如何用Angular5創建一個PWA項目
什麼是PWA
「
PWA（Progressive Web App）利用TLS，webapp manifests和service workers使應用程序能夠安裝並離線使用。 換句話說，PWA就像手機上的原生應用程序，但它是使用諸如HTML5，JavaScript和CSS3之類的網路技術構建的。 如果構建正確，PWA與原生應用程序無法區分。
PWA 的主要特點包括下面三點：
可靠 - 即使在不穩定的網路環境下，也能瞬間載入並展現
體驗 - 快速響應，並且有平滑的動畫響應用戶的操作
粘性 - 像設備上的原生應用，具有沉浸式的用戶體驗，用戶可以添加到桌面
PWA 本身強調漸進式，並不要求一次性達到安全、性能和體驗上的所有要求，開發者可以通過PWA Checklist查看現有的特徵。
」
用angular5創建一個PWA項目
1
Angular Service Worker
MDN中對service worker的定義：
「
Service workers 本質上充當Web應用程序與瀏覽器之間的代理伺服器，也可以在網路可用時作為瀏覽器和網路間的代理。它們旨在（除其他之外）使得能夠創建有效的離線體驗，攔截網路請求並基於網路是否可用以及更新的資源是否駐留在伺服器上來採取適當的動作。他們還允許訪問推送通知和後台同步API。
」
Angular 已經提供了ServiceWorkerModule模塊來幫助我們建立一個service worker的應用。
如果是全新項目
可以使用angular/cli幫你創建一個Angular Service Worker項目：
就這樣，cli會幫你安裝@angular/service-worker，在.angular-cli.json中啟用serviceWorker，為app註冊serviceWorker和生成默認配置的ngsw-config.json。
生成的文件中，注意檢查一下app.module.ts，其中serviceWorkerModule註冊的時候應該是這樣：
@angular/cli的1.7.3版本註冊的時候會在ngsw-worker.js前加一個/，會導致路徑錯誤。
如果是已有項目
安裝@angular/service-worker：
在src下面新增ngsw-config.json文件：
然後在app.module.ts中註冊Service Worker ：
這樣項目中就引入Service Worker。
2
部署
這時候我們先嘗試把項目部署到github pages，因為PWA需要在HTTPS下運行，方便查看一下現在項目的PWA測試結果。現在github上創建一個倉庫，然後本地運行：
這樣就把項目部署到了github。然後用下面命令build你的app：
為github pages 創建一個新的分支：
這時候可以在github項目倉庫的setting中看到已經published：
這時候我們需要把/dist裡面的文件push到gh-pages的分支，而不是整個項目。這時候可以藉助angular-cli-ghpage來實現，運行下面命令：
這時候在https://tc9011.github.io/PWA-Angular中就可以看到你的項目了。
可以用Chrome DevTools中的Audits 或者Lighthouse先測試一下：
測試結果如下：
3
增加manifest
從上面的audit結果中，有三個紅色warning與manifest有關，MDN上對manifest是這麼定義的：
「
Web應用程序清單在一個JSON文本文件中提供有關應用程序的信息（如名稱，作者，圖標和描述）。manifest 的目的是將Web應用程序安裝到設備的主屏幕，為用戶提供更快的訪問和更豐富的體驗。
」
Chrome 和 Firefox 已經實現了這個功能，微軟正努力在 Edge 瀏覽器上實現，Apple 前不久宣布在iOS11.3中會支持。具體請查閱 caniuse.com 來查看主流瀏覽器的支持情況。
在src文件夾下面新建一個manifest.json :
在.angular-cli.json中把它增加到assets中：
在index.html中:
這樣成功引入了manifest，這時候重新build再部署一下，用audit測試結果如下：
在Chrome DevTools的Application中，可以查看Manifest：
這時候可以看到已經有一個add to homescreen的鏈接：
點擊後會彈出下面選項：
點擊確定後，就可以在桌面上找到你的應用：
4
JS Fallback
測試結果中紅色warning有一項是沒有在JavaScript不可用的時候提供回退內容，可以在index.html中增加標籤：
這時候再測試一下：
這樣一個非常簡單的基於angular5的pwa項目就完成了。
源碼在：https://github.com/tc9011/PWA-Angular
TAG:tc9011 |