初略Angular應用安裝@angular/pwa

PWA（Progressive web apps，漸進式 Web 應用）運用現代的 Web API 以及傳統的漸進式加強策略來建立跨平臺 Web 應用程序。這些應用無處不在、功能豐富，使其具備與原生應用相同的用戶體驗優點。

在Chrome中瀏覽網頁，經常會看到其搜索欄右上角有個➕安裝圖標，安裝後，相似頁面收藏到桌面通常。桌面會生成一個帶圖標的快捷鍵（移動端瀏覽器「add to home screen」或「添加到桌面」）。

這個可能須要瞭解下PWA(Progressive web apps，漸進式 Web 應用)，按其說明，貌似可與上次提到的electron相媲美了。

PWA - Progressive web apps，漸進式 Web 應用

✨PWA 的優點

PWA 是可被發現、易安裝、可連接、獨立於網絡、漸進式、可重用、響應性和安全的。

例如，web應用更加易於發現——相比於安裝應用，訪問一個網站顯然更加容易和迅速，而且你能夠經過一個連接來分享web應用。

下面看看在Angular應用中的配置安裝。

?安裝@angular/pwa

添加且修改文件信息以下(本示例於Angular9.x版本)：

CREATE ngsw-config.json (620 bytes)
CREATE src/manifest.webmanifest (1358 bytes)
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)
CREATE src/assets/icons/icon-96x96.png (958 bytes)
UPDATE angular.json (4234 bytes)
UPDATE package.json (1406 bytes)
UPDATE src/app/app.module.ts (1492 bytes)
UPDATE src/index.html (674 bytes)

而後修改圖標爲本身的站點logo標識圖。同時manifest.webmanifest文件相關參數。

每一個PWA有一個配置清單（manifest.webmanifest 或 manifest.json），經過上述 ng add命令，Angular CLI已經自動建立了一個。咱們會在index.html文件中看到：

<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#1976d2">

注意，若是更改了manifest中的theme_color，那麼對應這裏也不要忘記修改。

若在安裝過程當中，項目啓動狀態，肯能會出錯 

Cannot read property 'id' of undefined at registerNgModuleType

重啓下項目便可。

PWA 示例圖

PWA 示例圖

Chrome瀏覽器打開網址後，PC（電腦）端將會在搜索欄右側出現「➕安裝」提示；移動端則會在底部彈出「Add xxx to  Home screen」。安裝或點擊添加便可在桌面生成快捷方式。

若出現 manifest.webmanifest 或 ngsw-worker.js （A bad HTTP response code (404) was received when fetching the script）404未找到，能夠看看項目根路徑配置，同時注意ngsw-config.json中"index": "./index.html"，默認「/index.html」。

最後，打包至服務器，另外，本地環境可運行測試，線上環境支持須要HTTPS。