feat(pwa): add manifest.json and service worker

jwplayer · Jun 16, 2021 · 49a8d01 · 49a8d01
1 parent 9bf4b08
commit 49a8d01
Show file tree

Hide file tree

Showing 13 changed files with 1,252 additions and 9 deletions.
diff --git a/.commitlintrc.js b/.commitlintrc.js
@@ -10,6 +10,7 @@ module.exports = {
         'search',
         'watchhistory',
         'favorites',
+        'pwa',
       ],
     ],
   },

diff --git a/README.md b/README.md
@@ -69,6 +69,7 @@ The allowed scopes are:
 - search
 - watchhistory
 - favorites
+- pwa
 
 ### Subject
 

diff --git a/package.json b/package.json
@@ -95,7 +95,8 @@
     "stylelint-declaration-strict-value": "^1.7.12",
     "stylelint-order": "^4.1.0",
     "stylelint-scss": "^3.19.0",
-    "typescript": "^4.2.4"
+    "typescript": "^4.2.4",
+    "workbox-webpack-plugin": "^6.1.5"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx}": [

diff --git a/public/images/icon-128x128.png b/public/images/icon-128x128.png
diff --git a/public/images/icon-144x144.png b/public/images/icon-144x144.png
diff --git a/public/images/icon-152x152.png b/public/images/icon-152x152.png
diff --git a/public/images/icon-24x24.png b/public/images/icon-24x24.png
diff --git a/public/images/icon-256x256.png b/public/images/icon-256x256.png
diff --git a/public/images/icon-48x48.png b/public/images/icon-48x48.png
diff --git a/public/index.html b/public/index.html
@@ -21,14 +21,17 @@
 
   <!-- Safari web app -->
   <meta name="apple-mobile-web-app-capable" content="yes">
-  <link rel="apple-touch-icon" href="/images/icon-152x152.png">
+  <link rel="apple-touch-icon" href="/images/icon-192x192.png" sizes="192x192">
 
   <!-- Chrome, Firefox OS and Opera -->
   <meta name="theme-color" content="#000000">
   <!-- Windows Phone -->
   <meta name="msapplication-navbutton-color" content="#000000">
   <!-- iOS Safari -->
   <meta name="apple-mobile-web-app-status-bar-style" content="#000000">
+
+  <!-- Manifest -->
+  <link rel="manifest" href="manifest.json" />
 </head>
 <body>
 <div id="root"></div>
@@ -50,5 +53,12 @@
   }
 </script>
 <script type="module" src="/dist/index.js"></script>
+<script>
+  if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+      navigator.serviceWorker.register('/service-worker.js');
+    });
+  }
+</script>
 </body>
 </html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,30 @@
+{
+  "name": "JW Showcase",
+  "display": "standalone",
+  "start_url": "/",
+  "short_name": "JW Showcase",
+  "theme_color": "#DD0000",
+  "description": "JW Showcase is an open-source, dynamically generated video website.",
+  "orientation": "any",
+  "background_color": "#000",
+  "related_applications": [],
+  "prefer_related_applications": false,
+  "icons": [
+    {
+      "src": "images/icon-512x512.png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "images/icon-192x192.png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "images/icon-48x48.png",
+      "sizes": "48x48"
+    },
+    {
+      "src": "images/icon-24x24.png",
+      "sizes": "24x24"
+    }
+  ]
+}
diff --git a/snowpack.config.js b/snowpack.config.js
@@ -1,4 +1,6 @@
 /** @type {import("snowpack").SnowpackUserConfig } */
+const WorkboxPlugin = require('workbox-webpack-plugin');
+
 module.exports = {
   mount: {
     public: { url: '/', static: true },
@@ -37,6 +39,8 @@ module.exports = {
           });
         }
 
+        config.plugins.push(new WorkboxPlugin.GenerateSW())
+
         return config;
       },
     }],