Merge branch '354-improve-pwa-to-meet-all-google-lighthouse-pwa-requirements' into 'master'

Resolve "Improve PWA to meet all Google Lighthouse PWA requirements"

Closes #354

See merge request !187

webapp/.gitignore

@@ -8,6 +8,8 @@
 /public/css
 /public/fonts
 /public/flags
+/public/sw.js
+/public/workbox*.js
 
 #################
 ## Laravel

webapp/package.json

@@ -25,5 +25,8 @@
     "vue": "^2.6.11",
     "vue-template-compiler": "^2.6.11",
     "webpack-shell-plugin": "^0.5.0"
+  },
+  "dependencies": {
+    "workbox-webpack-plugin": "^5.1.3"
   }
 }

webapp/public/manifest.webmanifest

@@ -9,6 +9,17 @@
       "src": "/img/logo/logo_square.png",
       "sizes": "192x192",
       "type": "image/png"
+    },
+    {
+      "src": "/img/logo/logo_maskable_icon.png",
+      "sizes": "1024x1024",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/img/logo/logo_square_x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
     }
   ],
   "shortcuts": [

webapp/public/mix-manifest.json

@@ -4,7 +4,6 @@
     "/css/app.css": "/css/app.css",
     "/css/flag-icon.css": "/css/flag-icon.css",
     "/js/quickbuy.js": "/js/quickbuy.js",
-    "/js/sw.js": "/js/sw.js",
     "/js/jquery-packed.js": "/js/jquery-packed.js",
     "/css/glyphicons-packed.css": "/css/glyphicons-packed.css",
     "/css/semantic.min.css": "/css/semantic.min.css",

webapp/resources/js/app.js

 var axios = require('axios');
 
-// Register service worker for offline usage
+/**
+ * Keeps PWA prompt event so we can manually trigger it.
+ */
+var pwaDeferredPrompt = null;
+
+// Register service worker for PWA/offline usage
 if('serviceWorker' in navigator) {
-    navigator.serviceWorker
-        .register('/js/sw.js')
-        .then(function() {
-            console.log('Service worker registered');
+    window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/sw.js').then(registration => {
+            console.log('Service worker registered: ', registration);
+        }).catch(registrationError => {
+            console.log('Service worker registration failed: ', registrationError);
         });
+    });
 }
 
+// Catch PWA install prompt
+window.addEventListener('beforeinstallprompt', (e) => {
+    // Keep event so we can trigger prompt later
+    pwaDeferredPrompt = e;
+
+    // Manage PWA install button
+    managePwaInstallButton();
+});
+
 $(document).ready(function() {
     // Initialize components
     $('.ui.checkbox').checkbox();
@@ -41,37 +57,31 @@ $(document).ready(function() {
 /**
  * Manage the PWA install button.
  */
-// TODO: improve this logic
 function managePwaInstallButton() {
-    // Get install button, hide if useless, hold reference to PWA prompt
-    let deferredPrompt;
+    // Select install button, hide by default
     const installBtn = document.querySelector('.pwa-install-button');
     installBtn.style.display = 'none';
 
-    window.addEventListener('beforeinstallprompt', (e) => {
-        // // Prevent Chrome 67 and earlier from automatically showing the prompt
-        // e.preventDefault();
-
-        // Stash the event so it can be triggered later.
-        deferredPrompt = e;
-        // Update UI to notify the user they can add to home screen
-        installBtn.style.display = 'block';
-
-        installBtn.addEventListener('click', (e) => {
-            // hide our user interface that shows our A2HS button
-            installBtn.style.display = 'none';
-            // Show the prompt
-            deferredPrompt.prompt();
-            // Wait for the user to respond to the prompt
-            deferredPrompt.userChoice.then((choiceResult) => {
-                // TODO: remove logging?
-                if (choiceResult.outcome === 'accepted') {
-                    console.log('User accepted the A2HS prompt');
-                } else {
-                    console.log('User dismissed the A2HS prompt');
-                }
-                deferredPrompt = null;
-            });
+    // Stop if we did not catch PWA prompt
+    if(pwaDeferredPrompt == null)
+        return;
+
+    // Show install button if PWA prompt was deferred
+    installBtn.style.display = 'block';
+
+    installBtn.addEventListener('click', (e) => {
+        installBtn.style.display = 'none';
+
+        // Show prompt
+        pwaDeferredPrompt.prompt();
+        pwaDeferredPrompt.userChoice.then((choiceResult) => {
+            // TODO: remove logging?
+            // if (choiceResult.outcome === 'accepted') {
+            //     console.log('User accepted the A2HS prompt');
+            // } else {
+            //     console.log('User dismissed the A2HS prompt');
+            // }
+            pwaDeferredPrompt = null;
         });
     });
 }

webapp/resources/js/sw.js

-self.addEventListener('install', function(e) {
-    e.waitUntil(
-        caches.open('barbapappa').then(function(cache) {
-            return cache.addAll([
-                // TODO: improve this list, less resources, only necessary
-                '/css/app.css',
-                '/css/flag-icon.css',
-                '/css/glyphicons-packed.css',
-                '/css/semnatic.min.css',
-                '/img/logo/logo_square.png',
-                '/js/app.js',
-                '/js/jquery-packed.js',
-                '/js/lang.js',
-                '/js/quickbuy.js',
-                '/js/semantic.min.js',
-            ]);
-        })
-    );
-});
-
-self.addEventListener('fetch', function(e) {
-    // TODO: remove console log here, only to debug?
-    console.log(e.request.url);
-    e.respondWith(
-        caches.match(e.request).then(function(response) {
-            return response || fetch(e.request);
-        })
-    );
-});

webapp/resources/views/layouts/app.blade.php

@@ -8,6 +8,7 @@
     <meta name="HandheldFriendly" content="True">
     <meta name="theme-color" content="#e9e9e9">
     <link rel="icon" type="image/png" href="/favicon.png">
+    <link rel="apple-touch-icon" href="/img/icon/logo_apple_touch_icon.png">
 
     <meta name="application-name" content="{{ config('app.name', 'Barbapappa') }}">
     <meta name="author" content="{{ config('app.author') }}">

webapp/webpack.mix.js

 // noinspection JSAnnotator
 let mix = require('laravel-mix');
 const WebpackShellPlugin = require('webpack-shell-plugin');
+const {GenerateSW} = require('workbox-webpack-plugin');
 
 // Add shell command plugin configured to create JavaScript language file
 mix.webpackConfig({
@@ -9,6 +10,13 @@ mix.webpackConfig({
             onBuildStart:['php artisan lang:js --compress --quiet'],
             onBuildEnd:[],
         }),
+        new GenerateSW({
+            // TODO: do not exclude common files
+            exclude: [
+                /.*\.(js|css)/
+            ],
+            swDest: 'sw.js',
+        }),
     ]
 });
 
@@ -33,9 +41,6 @@ mix.copyDirectory(
 mix.js(
     'resources/js/app.js',
     'public/js',
-).js(
-    'resources/js/sw.js',
-    'public/js',
 ).js(
     'resources/js/quickbuy/quickbuy.js',
     'public/js',