feat: add setup for full pwa support

RangerRick · Sep 13, 2020 · f9bedf1 · f9bedf1
1 parent d0305cc
commit f9bedf1
Show file tree

Hide file tree

Showing 15 changed files with 112 additions and 5 deletions.
diff --git a/angular.json b/angular.json
@@ -29,7 +29,8 @@
                 "glob": "**/*.svg",
                 "input": "node_modules/ionicons/dist/ionicons/svg",
                 "output": "./svg"
-              }
+              },
+              "src/manifest.webmanifest"
             ],
             "styles": [
               {
@@ -64,7 +65,9 @@
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
                 }
-              ]
+              ],
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json"
             },
             "ci": {
               "progress": false
@@ -110,7 +113,8 @@
                 "glob": "**/*",
                 "input": "src/assets",
                 "output": "/assets"
-              }
+              },
+              "src/manifest.webmanifest"
             ]
           },
           "configurations": {

diff --git 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)"
+        ]
+      }
+    }
+  ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@angular/platform-browser": "^10.0.14",
     "@angular/platform-browser-dynamic": "^10.0.14",
     "@angular/router": "^10.0.14",
+    "@angular/service-worker": "^10.0.14",
     "@boosten/capacitor-keep-awake": "0.0.1",
     "@capacitor-community/http": "^0.2.1",
     "@capacitor/android": "^2.4.1",
@@ -76,4 +77,4 @@
     "prep-web": "rimraf www/* && ionic build --prod && ionic deploy manifest",
     "prep": "npm run prep-web && ionic cap sync --no-build --prod"
   }
-}
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -8,11 +8,13 @@ import { Deploy } from 'cordova-plugin-ionic/dist/ngx';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { APIStream } from '../lib/api/stream';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
 
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })],
   providers: [
     Deploy,
     APIStream,

diff --git a/src/assets/icon/icon-128x128.png b/src/assets/icon/icon-128x128.png
diff --git a/src/assets/icon/icon-144x144.png b/src/assets/icon/icon-144x144.png
diff --git a/src/assets/icon/icon-152x152.png b/src/assets/icon/icon-152x152.png
diff --git a/src/assets/icon/icon-192x192.png b/src/assets/icon/icon-192x192.png
diff --git a/src/assets/icon/icon-384x384.png b/src/assets/icon/icon-384x384.png
diff --git a/src/assets/icon/icon-512x512.png b/src/assets/icon/icon-512x512.png
diff --git a/src/assets/icon/icon-72x72.png b/src/assets/icon/icon-72x72.png
diff --git a/src/assets/icon/icon-96x96.png b/src/assets/icon/icon-96x96.png
diff --git a/src/index.html b/src/index.html
@@ -15,6 +15,8 @@
 
   <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
   <link rel="apple-touch-icon" href="assets/icon/favicon.png">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#00a831">
 
   <!-- add to homescreen for ios -->
   <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -23,6 +25,7 @@
 
 <body>
   <app-root></app-root>
+  <noscript>Please enable JavaScript to use this application.</noscript>
 </body>
 
 </html>
diff --git a/src/manifest.webmanifest b/src/manifest.webmanifest
@@ -0,0 +1,59 @@
+{
+  "name": "Blases Loaded",
+  "short_name": "Blases",
+  "theme_color": "#00a831",
+  "background_color": "#00a831",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "assets/icon/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icon/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icon/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icon/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icon/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icon/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icon/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icon/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}