mode offline

src/registerServiceWorker.js

@@ -10,8 +10,14 @@ if (process.env.NODE_ENV === 'production') {
         'For more details, visit https://goo.gl/AFskqB'
       )
     },
-    registered () {
-      console.log('Service worker has been registered.')
+    registered (registration) {
+      //console.log('Service worker has been registered.')
+      console.log(
+        'Service worker has been registered and now polling for updates.'
+      )
+      setInterval(() => {
+        registration.update()
+      }, 10000) // every 10 seconds
     },
     cached () {
       console.log('Content has been cached for offline use.')
@@ -19,8 +25,14 @@ if (process.env.NODE_ENV === 'production') {
     updatefound () {
       console.log('New content is downloading.')
     },
-    updated () {
-      console.log('New content is available; please refresh.')
+    updated (registration) {
+      alert('Une nouvelle version de l\'application est disponible, l\'application va se recharger');
+      console.log('New content is available; please refresh.');
+      //
+      if (!registration || !registration.waiting) return
+      // Send message to SW to skip the waiting and activate the new SW
+      registration.waiting.postMessage({ type: 'SKIP_WAITING' })
+      //window.location.reload(true);
     },
     offline () {
       console.log('No internet connection found. App is running in offline mode.')

src/service-worker.js

+// custom service-worker.js
+if (workbox) {
+    // adjust log level for displaying workbox logs
+    //workbox.core.setLogLevel(workbox.core.LOG_LEVELS.debug)
+
+    // apply precaching. In the built version, the precacheManifest will
+    // be imported using importScripts (as is workbox itself) and we can 
+    // precache this. This is all we need for precaching
+    workbox.precaching.precacheAndRoute(self.__precacheManifest);
+
+    //workbox.core.skipWaiting();
+
+    // Make sure to return a specific response for all navigation requests.
+    // Since we have a SPA here, this should be index.html always.
+    // https://stackoverflow.com/questions/49963982/vue-router-history-mode-with-pwa-in-offline-mode
+    workbox.routing.registerNavigationRoute('/index.html')
+
+    workbox.routing.registerRoute(
+        new RegExp('.*/config/config.json'),
+        new workbox.strategies.StaleWhileRevalidate({
+            cacheName: 'config',
+        })
+    )
+
+    workbox.routing.registerRoute(
+        new RegExp('.*/api/.*'),
+        new workbox.strategies.NetworkFirst({
+            cacheName: 'api',
+        })
+    )
+    workbox.routing.registerRoute(
+        /^https:\/\/c\.tile\.openstreetmap\.fr/,
+        new workbox.strategies.CacheFirst({
+            cacheName: 'osm',
+            plugins: [
+                new workbox.cacheableResponse.Plugin({
+                    statuses: [0, 200],
+                }),
+                new workbox.expiration.Plugin({
+                    maxAgeSeconds: 60 * 60 * 24 * 365,
+                    maxEntries: 30,
+                }),
+            ],
+        })
+    )
+
+}
+
+// This code listens for the user's confirmation to update the app.
+self.addEventListener('message', (e) => {
+    if (!e.data) {
+        return;
+    }
+    //console.log(e.data);
+    switch (e.data.type) {
+        case 'SKIP_WAITING':
+            self.skipWaiting();
+            break;
+        default:
+            // NOOP
+            break;
+    }
+})
+

vue.config.js

@@ -3,6 +3,28 @@ const fs = require('fs')
 const packageJson = fs.readFileSync('./package.json')
 const version = JSON.parse(packageJson).version || 0
 module.exports = {
+    publicPath: './',
+    devServer: {
+        proxy: {
+            '^/api': {
+                target: 'https://geocontrib.dev.neogeo.fr/api',
+                ws: true,
+                changeOrigin: true
+            }
+        }
+    },
+    pwa: {
+        workboxPluginMode: 'InjectManifest',
+        workboxOptions: {
+            swSrc: 'src/service-worker.js',
+            exclude: [
+                /\.map$/, 
+                /config\/config.*\.json$/,
+                /manifest\.json$/ 
+            ],
+        },
+        themeColor: '#1da025'
+      },
     configureWebpack: {
         plugins: [
             new webpack.DefinePlugin({