Add PWA infrastructure

4 years ago · 42d6245cf2
parent f6168b6b7c
commit 42d6245cf2
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="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="format-detection" content="telephone=no"/>
-  <meta name="msapplication-tap-highlight" content="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-capable" content="yes"/>
-  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  <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"
    }
  ]
 }