什么是PWA

PWA（Progressive Web App）利用TLS，webapp manifests和service workers使應用程序能夠安裝并離線使用。 換句話說，PWA就像手機上的原生應用程序，但它是使用諸如HTML5，JavaScript和CSS3之類的網絡技術構建的。 如果構建正確，PWA與原生應用程序無法區分。

PWA 的主要特點包括下面三點：

PWA 本身強調漸進式，并不要求一次性達到安全、性能和體驗上的所有要求，開發者可以通過 PWA Checklist 查看現有的特征。

創建項目

Step 1.創建項目

我們使用Angular CLI來創建PWA程序，首先我們安裝。

npm install -g @angular/clinpm install -g @angular/service-worker

首先我們需要確定angular/cli版本在1.6.0或以上。

最新版本6.0.0將無效，應該后續會修復。

.angular-cli.json文件被更名為angular.json

如果是全新項目

可以使用angular/cli幫你創建一個Angular Service Worker項目：

ng new PWCat --service-worker

就這樣，cli會幫你安裝@angular/service-worker，在.angular-cli.json中啟用serviceWorker，為app注冊serviceWorker和生成默認配置的ngsw-config.json。

生成的文件中，注意檢查一下app.module,ts，其中serviceWorkerModule注冊的時候應該是這樣：

imports: [  // other modules...  ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}) ],

在Angular 6.0.0中ng new PWCat --service-worker已經被廢棄，使用下面的命令為項目添加pwa

ng add @angular/pwa

執行后的結果

CREATE ngsw-config.json (392 bytes)
UPDATE angular.json (3464 bytes)
UPDATE package.json (1446 bytes)
UPDATE src/app/app.module.ts (851 bytes)

如果是已有項目

對于老版本，也就是Angular 6.0.0以前：

安裝@angular/service-worker：

npm install @angular/service-worker --save

在項目目錄下面新增ngsw-config.json文件：

// src/ngsw-config.json{ "index": "/index.html", "assetGroups": [{  "name": "app",  "installMode": "prefetch",  "resources": {   "files": [    "/favicon.ico",    "/index.html"   ],   "versionedFiles": [    "/*.bundle.css",    "/*.bundle.js",    "/*.chunk.js"   ]  } }, {  "name": "assets",  "installMode": "lazy",  "updateMode": "prefetch",  "resources": {   "files": [    "/assets/**"   ]  } }]}

在.angular-cli.json中啟用service worker：