feat(pwa): support pwa using ng tools

README.md

@@ -47,7 +47,7 @@ commitizen init cz-conventional-changelog --save --save-exact
 - [x] 主题切换示例
 - [x] 常用组件
   - [x] 二维码扫描
-- [ ] PWA
+- [x] PWA
 - [ ] Cordova 插件说明与示例
 - [ ] 用户行为统计
 - [ ] 技巧与工具分享
@@ -159,6 +159,18 @@ see: [tools](./doc/tools.md)
 一个高大上的 App 肯定少不了换肤功能，但是 Ionic 已经足够好，已经帮我们实现大部分了，具体实现可以参考:  
 https://ionicframework.com/docs/theming/
 
+## PWA
+
+集成教程可以参见:  
+https://www.joshmorony.com/create-a-pwa-with-angular-service-workers-in-ionic-4/  
+需要注意的是，ionic4 目前是基于 Angular6 进行开发，所以安装时需要指定之前的版本
+
+```bash
+ng add @angular/[email protected] --project app
+```
+
+可以参见 issue: https://github.com/angular/angular-cli/issues/12914
+
 ## 参考
 
 https://github.com/marcoturi/ionic-boilerplate

angular.json

@@ -30,7 +30,8 @@
                 "glob": "**/*.svg",
                 "input": "node_modules/@ionic/angular/dist/ionic/svg",
                 "output": "./svg"
-              }
+              },
+              "src/manifest.json"
             ],
             "styles": [
               {
@@ -58,7 +59,8 @@
               "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
-              "buildOptimizer": true
+              "buildOptimizer": true,
+              "serviceWorker": true
             }
           }
         },
@@ -98,7 +100,8 @@
                 "glob": "**/*",
                 "input": "src/assets",
                 "output": "/assets"
-              }
+              },
+              "src/manifest.json"
             ]
           }
         },
@@ -174,4 +177,4 @@
       "styleext": "scss"
     }
   }
-}
+}

ngsw-config.json

@@ -0,0 +1,26 @@
+{
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    }, {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**"
+        ]
+      }
+    }
+  ]
+}