Add PWA infrastructure

2020-10-21 13:55:34 -05:00 · 2020-10-21 13:55:34 -05:00 · 42d6245cf2
commit 42d6245cf2
parent f6168b6b7c
15 changed files with 126 additions and 11 deletions
--- a/angular.json
+++ b/angular.json
@ -34,7 +34,8 @@
                "glob": "**/*",
                "input": "node_modules/ngx-monaco-editor/assets/monaco",
                "output": "./assets/monaco/"
-              }
+              },
+              "src/manifest.webmanifest"
            ],
            "styles": [
              {
@ -85,7 +86,9 @@
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
-              ]
+              ],
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json"
            },
            "ci": {
              "progress": false
@ -132,7 +135,8 @@
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
-              }
+              },
+              "src/manifest.webmanifest"
            ]
          },
          "configurations": {
--- a/ngsw-config.json
+++ b/ngsw-config.json
@ -0,0 +1,30 @@
+{
+  "$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)"
+        ]
+      }
+    }
+  ]
+}
--- a/package-lock.json
+++ b/package-lock.json
@ -832,6 +832,21 @@
        }
      }
    },
+    "@angular/service-worker": {
+      "version": "10.1.6",
+      "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-10.1.6.tgz",
+      "integrity": "sha512-wGF2ZVByYonNpQNjyLn4zK0O2au1ZJQv6JLZj5zHnVnaiz/xJXvY9TPCU3dLmuRFt6UmKStLlclJkG3s3FYiZg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
+    },
    "@babel/code-frame": {
      "version": "7.10.4",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
--- a/package.json
+++ b/package.json
@ -20,6 +20,7 @@
    "@angular/platform-browser-dynamic": "~10.1.5",
    "@angular/pwa": "^0.1001.7",
    "@angular/router": "~10.1.5",
+    "@angular/service-worker": "~10.1.5",
    "@circlon/angular-tree-component": "^10.0.0",
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@ionic-native/core": "^5.0.0",
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -16,6 +16,8 @@ import {MonacoEditorModule} from 'ngx-monaco-editor';
 import { APP_BASE_HREF, PlatformLocation } from '@angular/common';
 import { MarkdownModule } from 'ngx-markdown';
 import {ConnectionServiceModule} from 'ng-connection-service';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';

 /**
 * This function is used internal to get a string instance of the `<base href="" />` value from `index.html`.
@ -46,6 +48,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
    MonacoEditorModule.forRoot(),
    MarkdownModule.forRoot(),
    ConnectionServiceModule,
+    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
  ],
  providers: [
    StatusBar,
--- a/src/assets/icons/icon-128x128.png
+++ b/src/assets/icons/icon-128x128.png
--- a/src/assets/icons/icon-144x144.png
+++ b/src/assets/icons/icon-144x144.png
--- a/src/assets/icons/icon-152x152.png
+++ b/src/assets/icons/icon-152x152.png
--- a/src/assets/icons/icon-192x192.png
+++ b/src/assets/icons/icon-192x192.png
--- a/src/assets/icons/icon-384x384.png
+++ b/src/assets/icons/icon-384x384.png
--- a/src/assets/icons/icon-512x512.png
+++ b/src/assets/icons/icon-512x512.png
--- a/src/assets/icons/icon-72x72.png
+++ b/src/assets/icons/icon-72x72.png
--- a/src/assets/icons/icon-96x96.png
+++ b/src/assets/icons/icon-96x96.png
--- a/src/index.html
+++ b/src/index.html
@ -2,24 +2,27 @@
 <html lang="en">

 <head>
-  <meta charset="utf-8" />
+  <meta charset="utf-8"/>
  <title>Ionic App</title>

-  <base href="/" />
+  <base href="/"/>

-  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <meta name="format-detection" content="telephone=no" />
-  <meta name="msapplication-tap-highlight" content="no" />
+  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+  <meta name="format-detection" content="telephone=no"/>
+  <meta name="msapplication-tap-highlight" content="no"/>

-  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
+  <link rel="icon" type="image/png" href="assets/icon/favicon.png"/>

  <!-- add to homescreen for ios -->
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  <meta name="apple-mobile-web-app-capable" content="yes"/>
+  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+  <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>
--- a/src/manifest.webmanifest
+++ b/src/manifest.webmanifest
@ -0,0 +1,59 @@
+{
+  "name": "app",
+  "short_name": "app",
+  "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"
+    }
+  ]
+}