Merge pull request #60 from lonevvolf/pwa-update

Reduced logging from WorkBox on production deployment

.github/workflows/github-actions.yml

@@ -1,4 +1,6 @@
 name: Build and Deploy Kai Chronicles
+env: 
+  WEBPACK_ENV: ${{ vars.WEBPACK_ENV }}
 run-name: ${{ github.actor }} is building Kai Chronicles
 on: [push, workflow_dispatch]
 jobs:

src/ts/model/projectAon.ts

@@ -256,7 +256,7 @@ export const projectAon = {
 
 };
 
-// Do not use Typescript modules here, plain node.js modules for browser JS compatiblity (oh javascript...)
+// Do not use Typescript modules here, plain node.js modules for browser JS compatibility (oh javascript...)
 try {
     if (typeof exports !== "undefined") {
         exports.projectAon = projectAon;

src/ts/pwa.ts

@@ -36,7 +36,7 @@ export class pwa {
     public static registerServiceWorker() {
         if ("serviceWorker" in window.navigator) {
             try {         
-                this.wb = new Workbox("/sw.js");
+                this.wb = new Workbox("./sw.js");
 
                 const showSkipWaitingPrompt = async (event) => {
                     // Assuming the user accepted the update, set up a listener

webpack.config.js

@@ -3,24 +3,22 @@ const TerserPlugin = require("terser-webpack-plugin");
 const {InjectManifest} = require('workbox-webpack-plugin');
 
 module.exports = {
-  mode: 'development',
+  mode: process.env.WEBPACK_ENV ?? 'development',
   entry: './src/ts/index.ts',
   devtool: "source-map",
+  performance: {
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000
+  },
+  ignoreWarnings: [
+    {
+      message: /InjectManifest has been called multiple times/,
+    }
+  ],
   devServer: {
     static: './www',
     port: 3000,
     hot: false,
-    client: {
-      overlay: {
-        // This is a terrible workaround for the annoying message from Workbox, but other solutions to suppress it have not yet worked
-        warnings: (warning) => {
-          if (warning.message.startsWith('InjectManifest has been called multiple times')) {
-            return false;
-          }
-          return true;
-        },
-      }
-    }
   },
   module: {
     rules: [
@@ -35,9 +33,8 @@ module.exports = {
     extensions: [ '.tsx', '.ts', '.js' ],
   },
   output: {
-    filename: 'kai.js',
-    path: path.resolve(__dirname, 'www/js'),
-    publicPath: '/js/',
+    filename: 'js/kai.js',
+    path: path.resolve(__dirname, 'www'),
     library: 'kai'
   },
   optimization: {
@@ -47,7 +44,7 @@ module.exports = {
   plugins: [
     new InjectManifest({
       swSrc: '/src/ts/sw.ts',
-      swDest: '../sw.js',
+      swDest: 'sw.js',
       include: [
         /kai\.js$/
       ]

www/manifest.json

@@ -1,17 +1,113 @@
 {
-    "$schema": "https://json.schemastore.org/web-manifest-combined.json",
-    "name": "Kai Chronicles",
-    "short_name": "Kai Chronicles",
-    "start_url": ".",
-    "display": "standalone",
-    "background_color": "#fff",
-    "description": "A player for Lone Wolf game books.",
-    "orientation": "portrait",
-    "icons": [{
-      "src": "images/icon_900.png",
-      "sizes": "900x900",
-      "type": "image/png"
-    }],
-    "categories": ["games","kids","books"]
-  }
-
+  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
+  "name": "Kai Chronicles",
+  "short_name": "Kai Chronicles",
+  "id": "/",
+  "start_url": ".",
+  "background_color": "#fff",
+  "theme_color": "#222",
+  "launch_handler": {
+    "client_mode" : "auto"
+  },
+  "display": "standalone",
+  "description": "A player for Lone Wolf game books.",
+  "orientation": "portrait",
+  "edge_side_panel": {},
+  "dir": "ltr",
+  "lang": "en",
+  "scope": "https://kaichronicles.projectaon.org",
+  "icons": [
+    {
+      "src": "images/app-icons/16x16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "images/app-icons/32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "images/app-icons/72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "images/app-icons/96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "images/app-icons/120x120.png",
+      "sizes": "120x120",
+      "type": "image/png"
+    },
+    {
+      "src": "images/app-icons/128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "images/app-icons/144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "images/app-icons/152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "images/app-icons/180x180.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "images/app-icons/192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "images/app-icons/384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "images/app-icons/512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ],
+  "screenshots": [
+    {
+      "src" : "images/screenshots/ss1-desktop.png",
+      "sizes" : "1280x800",
+      "type" : "image/png",
+      "form_factor": "wide",
+      "label" : "Main Page of Kai Chronicles",
+      "platform" : "windows"
+    },
+    {
+      "src" : "images/screenshots/ss1-mobile.png",
+      "sizes" : "750x1334",
+      "type" : "image/png",
+      "form_factor": "narrow",
+      "label" : "Main Page of Kai Chronicles",
+      "platform" : "android"
+    },
+    {
+      "src" : "images/screenshots/ss1-mobile.png",
+      "sizes" : "750x1334",
+      "type" : "image/png",
+      "form_factor": "narrow",
+      "label" : "Main Page of Kai Chronicles",
+      "platform" : "ios"
+    }
+  ],
+  "categories": [
+    "games",
+    "kids",
+    "books"
+  ]
+}