添加Service Worker 缓存网站

angular.json

@@ -30,7 +30,8 @@
                 "glob": "**/*",
                 "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                 "output": "/assets/"
-              }
+              },
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "src/assets/editor/css/editormd.css",
@@ -75,7 +76,9 @@
                   "maximumWarning": "6kb",
                   "maximumError": "10kb"
                 }
-              ]
+              ],
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json"
             }
           }
         },
@@ -105,7 +108,8 @@
             "karmaConfig": "karma.conf.js",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",

ngsw-config.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    }, {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+        ]
+      }
+    }
+  ]
+}

package-lock.json

@@ -575,6 +575,11 @@
       "resolved": "https://registry.npm.taobao.org/@angular/router/download/@angular/router-9.1.2.tgz?cache=0&sync_timestamp=1586994046502&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40angular%2Frouter%2Fdownload%2F%40angular%2Frouter-9.1.2.tgz",
       "integrity": "sha1-8juhkcRAfEvOC36n98pe3UetoBA="
     },
+    "@angular/service-worker": {
+      "version": "9.1.7",
+      "resolved": "https://registry.npm.taobao.org/@angular/service-worker/download/@angular/service-worker-9.1.7.tgz",
+      "integrity": "sha1-PrJI6D2XeKN6v/kIvFCDmQQIETw="
+    },
     "@ant-design/colors": {
       "version": "3.2.2",
       "resolved": "https://registry.npm.taobao.org/@ant-design/colors/download/@ant-design/colors-3.2.2.tgz?cache=0&sync_timestamp=1577271695621&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40ant-design%2Fcolors%2Fdownload%2F%40ant-design%2Fcolors-3.2.2.tgz",

package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser": "^9.1.2",
     "@angular/platform-browser-dynamic": "^9.1.2",
     "@angular/router": "^9.1.2",
+    "@angular/service-worker": "^9.1.2",
     "jquery": "^3.5.0",
     "ng-zorro-antd": "^9.0.1",
     "nrm": "^1.2.1",

src/app/app.module.ts

@@ -12,6 +12,8 @@ import {FooterComponent} from './components/footer/footer.component';
 import {AppRoutingModule} from './app-routing.module';
 import {LoginRegistrationModule} from './view/login-registration/login-registration.module';
 import {AdminModule} from './view/admin/admin.module';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
 
 
 registerLocaleData(zh);
@@ -30,7 +32,8 @@ registerLocaleData(zh);
         HttpClientModule,
         BrowserAnimationsModule,
         LoginRegistrationModule,
-        AdminModule
+        AdminModule,
+        ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
     ],
     providers: [{provide: NZ_I18N, useValue: zh_CN}],
     exports: [],

src/index.html

@@ -8,8 +8,11 @@
     <meta name="keywords" content="小海博客,个人博客,java博客,学习,IT,生活,前端,后端,移动端,java,spring,springboot,angular">
     <meta name="description" content="小海博客，记录学习成长历程,主要关注与java后端的技术学习">
     <link rel="icon" type="image/x-icon" href="https://56462271.oss-cn-beijing.aliyuncs.com/web/logo.ico">
+    <link rel="manifest" href="manifest.webmanifest">
+    <meta name="theme-color" content="#1976d2">
 </head>
 <body>
 <app-root></app-root>
+<noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 </html>

src/manifest.webmanifest

@@ -0,0 +1,59 @@
+{
+  "name": "index",
+  "short_name": "index",
+  "theme_color": "#1976d2",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}