feat: try to add services worker

phodal · Apr 8, 2020 · 61a0b65 · 61a0b65
1 parent 39c1c12
commit 61a0b65
Show file tree

Hide file tree

Showing 17 changed files with 111 additions and 7 deletions.
diff --git a/angular.json b/angular.json
@@ -26,7 +26,8 @@
             "assets": [
               "src/favicon.ico",
               "src/assets",
-              "src/README.md"
+              "src/README.md",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
@@ -75,7 +76,9 @@
                   "maximumWarning": "6kb",
                   "maximumError": "10kb"
                 }
-              ]
+              ],
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json"
             }
           }
         },
@@ -108,7 +111,8 @@
             "karmaConfig": "karma.conf.js",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",

diff --git a/ngsw-config.json b/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)"
+        ]
+      }
+    }
+  ]
+}
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "@angular/platform-browser": "~9.0.3",
     "@angular/platform-browser-dynamic": "^9.1.0",
     "@angular/router": "~9.0.3",
+    "@angular/service-worker": "~9.0.3",
     "@ledge-framework/render": "~0.0.6",
     "@ngx-pwa/local-storage": "^9.0.2",
     "@scullyio/init": "^0.0.23",

diff --git a/src/android-chrome-192x192.png b/src/android-chrome-192x192.png
diff --git a/src/android-chrome-512x512.png b/src/android-chrome-512x512.png
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -25,6 +25,8 @@ import { registerLocaleData } from '@angular/common';
 import localeGb from '@angular/common/locales/en-GB';
 import localZhHans from '@angular/common/locales/zh-Hans';
 import { ScullyLibModule } from '@scullyio/ng-lib';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
 
 registerLocaleData(localeGb, 'en-gb');
 registerLocaleData(localZhHans, 'zh-Hans');
@@ -57,6 +59,9 @@ registerLocaleData(localZhHans, 'zh-Hans');
     CustomMaterialModule,
     LedgeRenderModule,
     ScullyLibModule,
+    ServiceWorkerModule.register('ngsw-worker.js', {
+      enabled: environment.production,
+    }),
   ],
   providers: [Title],
   bootstrap: [AppComponent],

diff --git a/src/assets/icons/icon-128x128.png b/src/assets/icons/icon-128x128.png
diff --git a/src/assets/icons/icon-144x144.png b/src/assets/icons/icon-144x144.png
diff --git a/src/assets/icons/icon-152x152.png b/src/assets/icons/icon-152x152.png
diff --git a/src/assets/icons/icon-192x192.png b/src/assets/icons/icon-192x192.png
diff --git a/src/assets/icons/icon-384x384.png b/src/assets/icons/icon-384x384.png
diff --git a/src/assets/icons/icon-512x512.png b/src/assets/icons/icon-512x512.png
diff --git a/src/assets/icons/icon-72x72.png b/src/assets/icons/icon-72x72.png
diff --git a/src/assets/icons/icon-96x96.png b/src/assets/icons/icon-96x96.png
diff --git a/src/index.html b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Ledge</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -11,8 +11,8 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
-<!--  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">-->
-<!--  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
+<!--  <link rel="manifest" href="manifest.webmanifest">-->
+  <meta name="theme-color" content="#1976d2">
 </head>
 <body class="mat-typography">
   <!--[if IE]>
@@ -25,13 +25,14 @@ <h2 class="title">抱歉，您的浏览器版本过低，请先升级到 <a href
   <app-root id="app"></app-root>
 
   <!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-77YVCJP4T6"></script>
+<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-77YVCJP4T6"></script>
 <script>
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
 
   gtag('config', 'G-77YVCJP4T6');
 </script>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 </html>
diff --git a/src/manifest.webmanifest b/src/manifest.webmanifest
@@ -0,0 +1,59 @@
+{
+  "name": "ledge",
+  "short_name": "ledge",
+  "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"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}
diff --git a/yarn.lock b/yarn.lock
@@ -293,6 +293,11 @@
   resolved "https://registry.yarnpkg.com/@angular/router/-/router-9.0.5.tgz#97f23adc933e96ba04c0ef93b3a8f0c2e7777e77"
   integrity sha512-Sz3DQUxlzAk9aZ9eVtZRh6xF5SMg/Gb3rc5I7dL1M+mycSNoFJ4HPTXleZkKM69mMkKQ5fEtza4x26MSlF+O9w==
 
+"@angular/service-worker@~9.0.3":
+  version "9.0.7"
+  resolved "https://registry.yarnpkg.com/@angular/service-worker/-/service-worker-9.0.7.tgz#0dabff710f7128d955c09a255af94d88ca7ef3f9"
+  integrity sha512-t2wQ0xl0BSq85BP898Dnhk3IJHRjbavTmeYItOtsE6KsqcGRGA0uJLzsGMwh3ZO/+u1iwcfnktL0qtH6WOj9yw==
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"