From 903ad14bbc1cfbbf5e4757bb4d37329977a83556 Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Thu, 25 Oct 2018 16:50:38 +0200
Subject: [PATCH] Add a service worker and cache assets

Assets are served from the local cache preferably. They are fetched from
the network if not available. This new addition also enables the "Add to
homescreen" in Chrome/Chromium.

Fix #22.
---
 .eslintrc.js                          |  1 +
 build/webpack.base.conf.js            |  4 ++
 package.json                          |  1 +
 src/App.vue                           |  9 +++
 src/components/Map.vue                |  3 +-
 src/components/ReportCard.vue         |  3 +-
 src/components/ReportDialog/index.vue |  3 +-
 src/components/ReportsDescription.vue |  3 +-
 src/constants.js                      | 58 +---------------
 src/report-types.js                   | 57 +++++++++++++++
 src/sw.js                             | 99 +++++++++++++++++++++++++++
 support/nginx/cyclassist.conf         |  9 +++
 yarn.lock                             |  6 ++
 13 files changed, 195 insertions(+), 61 deletions(-)
 create mode 100644 src/report-types.js
 create mode 100644 src/sw.js

diff --git a/.eslintrc.js b/.eslintrc.js
index c0128b6..1053bb4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -43,6 +43,7 @@ module.exports = {
         }
     ],
     'no-bitwise': 'off',
+    'no-unused-expressions': ["error", { "allowShortCircuit": true }],
     'function-paren-newline': 'off',
   }
 }
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index c48c623..5fa1dc5 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -8,6 +8,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const ServiceWorkerWebpackPlugin = require("serviceworker-webpack-plugin");
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 
@@ -189,6 +190,9 @@ module.exports = {
         child_process: 'empty',
     },
     plugins: [
+        new ServiceWorkerWebpackPlugin({
+            entry: path.join(__dirname, '../src/sw.js'),
+        }),
         new VueLoaderPlugin(),
         new MiniCssExtractPlugin({
             filename: utils.assetsPath('css/[name].[contenthash:4].css'),
diff --git a/package.json b/package.json
index 83cf8c6..119564f 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
         "nosleep.js": "^0.7.0",
         "ol": "^5.1.3",
         "roboto-fontface": "^0.9.0",
+        "serviceworker-webpack-plugin": "^1.0.1",
         "vue": "^2.5.2",
         "vue-i18n": "^8.0.0",
         "vue-router": "^3.0.1",
diff --git a/src/App.vue b/src/App.vue
index a621878..fdce398 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -63,6 +63,8 @@
 </template>
 
 <script>
+import runtime from 'serviceworker-webpack-plugin/lib/runtime';
+
 import { DELAY_BETWEEN_API_BATCH_REQUESTS } from '@/constants';
 
 import ReportErrorModal from '@/components/ReportErrorModal.vue';
@@ -136,6 +138,13 @@ export default {
                 });
         },
     },
+    mounted() {
+        if ('serviceWorker' in navigator) {
+            runtime.register().catch((error) => {
+                console.log(`Registration failed with ${error}.`);
+            });
+        }
+    },
 };
 </script>
 
diff --git a/src/components/Map.vue b/src/components/Map.vue
index 99f32c3..0b8358f 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -46,6 +46,7 @@ import compassIcon from '@/assets/compass.svg';
 import compassNorthIcon from '@/assets/compassNorth.svg';
 import unknownMarkerIcon from '@/assets/unknownMarker.svg';
 import * as constants from '@/constants';
+import REPORT_TYPES from '@/report-types';
 import { distance } from '@/tools';
 
 const MAIN_VECTOR_LAYER_NAME = 'MAIN';
@@ -177,7 +178,7 @@ export default {
                             ? constants.LARGE_ICON_SCALE
                             : constants.NORMAL_ICON_SCALE
                     ),
-                    src: constants.REPORT_TYPES[marker.type].marker,
+                    src: REPORT_TYPES[marker.type].marker,
                 }),
             }));
             // Add the marker to the map and keep a reference to it
diff --git a/src/components/ReportCard.vue b/src/components/ReportCard.vue
index a21b756..7cf4559 100644
--- a/src/components/ReportCard.vue
+++ b/src/components/ReportCard.vue
@@ -49,7 +49,8 @@
 </template>
 
 <script>
-import { REPORT_TYPES, REPORT_ALARM_VIBRATION_SEQUENCE } from '@/constants';
+import { REPORT_ALARM_VIBRATION_SEQUENCE } from '@/constants';
+import REPORT_TYPES from '@/report-types';
 import { distanceInWordsToNow } from '@/tools/date';
 import beepSound from '@/assets/beep.mp3';
 
diff --git a/src/components/ReportDialog/index.vue b/src/components/ReportDialog/index.vue
index 3cc2482..237f225 100644
--- a/src/components/ReportDialog/index.vue
+++ b/src/components/ReportDialog/index.vue
@@ -22,7 +22,8 @@
 </template>
 
 <script>
-import { REPORT_TYPES, REPORT_TYPES_ORDER } from '@/constants';
+import { REPORT_TYPES_ORDER } from '@/constants';
+import REPORT_TYPES from '@/report-types';
 
 import ReportErrorModal from '@/components/ReportErrorModal.vue';
 import ReportTile from './ReportTile.vue';
diff --git a/src/components/ReportsDescription.vue b/src/components/ReportsDescription.vue
index 0bba748..8f44183 100644
--- a/src/components/ReportsDescription.vue
+++ b/src/components/ReportsDescription.vue
@@ -8,7 +8,8 @@
 </template>
 
 <script>
-import { REPORT_TYPES, REPORT_TYPES_ORDER } from '@/constants';
+import { REPORT_TYPES_ORDER } from '@/constants';
+import REPORT_TYPES from '@/report-types';
 
 export default {
     data() {
diff --git a/src/constants.js b/src/constants.js
index 0900bb7..8b48ee2 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -1,65 +1,9 @@
-import accidentMarker from '@/assets/accidentMarker.svg';
-import gcumMarker from '@/assets/gcumMarker.svg';
-import interruptMarker from '@/assets/interruptMarker.svg';
-import miscMarker from '@/assets/miscMarker.svg';
-import obstacleMarker from '@/assets/obstacleMarker.svg';
-import potholeMarker from '@/assets/potholeMarker.svg';
-import accidentIcon from '@/assets/accident.svg';
-import gcumIcon from '@/assets/gcum.svg';
-import interruptIcon from '@/assets/interrupt.svg';
-import miscIcon from '@/assets/misc.svg';
-import obstacleIcon from '@/assets/obstacle.svg';
-import potholeIcon from '@/assets/pothole.svg';
-
 export const VERSION = '0.3';
 
 export const NORMAL_ICON_SCALE = 0.625;
 export const LARGE_ICON_SCALE = 1.0;
 export const ICON_ANCHOR = [0.5, 1.0];
-export const REPORT_TYPES = {
-    accident: {
-        description: 'reportLabels.accidentDescription',
-        label: 'reportLabels.accident',
-        image: accidentIcon,
-        marker: accidentMarker,
-        markerLarge: accidentMarker,
-    },
-    gcum: {
-        description: 'reportLabels.gcumDescription',
-        label: 'reportLabels.gcum',
-        image: gcumIcon,
-        marker: gcumMarker,
-        markerLarge: gcumMarker,
-    },
-    interrupt: {
-        description: 'reportLabels.interruptDescription',
-        label: 'reportLabels.interrupt',
-        image: interruptIcon,
-        marker: interruptMarker,
-        markerLarge: interruptMarker,
-    },
-    misc: {
-        description: 'reportLabels.miscDescription',
-        label: 'reportLabels.misc',
-        image: miscIcon,
-        marker: miscMarker,
-        markerLarge: miscMarker,
-    },
-    obstacle: {
-        description: 'reportLabels.obstacleDescription',
-        label: 'reportLabels.obstacle',
-        image: obstacleIcon,
-        marker: obstacleMarker,
-        markerLarge: obstacleMarker,
-    },
-    pothole: {
-        description: 'reportLabels.potholeDescription',
-        label: 'reportLabels.pothole',
-        image: potholeIcon,
-        marker: potholeMarker,
-        markerLarge: potholeMarker,
-    },
-};
+
 // Display order of the report types
 export const REPORT_TYPES_ORDER = ['gcum', 'interrupt', 'obstacle', 'pothole', 'accident', 'misc'];
 
diff --git a/src/report-types.js b/src/report-types.js
new file mode 100644
index 0000000..2988668
--- /dev/null
+++ b/src/report-types.js
@@ -0,0 +1,57 @@
+import accidentMarker from '@/assets/accidentMarker.svg';
+import gcumMarker from '@/assets/gcumMarker.svg';
+import interruptMarker from '@/assets/interruptMarker.svg';
+import miscMarker from '@/assets/miscMarker.svg';
+import obstacleMarker from '@/assets/obstacleMarker.svg';
+import potholeMarker from '@/assets/potholeMarker.svg';
+import accidentIcon from '@/assets/accident.svg';
+import gcumIcon from '@/assets/gcum.svg';
+import interruptIcon from '@/assets/interrupt.svg';
+import miscIcon from '@/assets/misc.svg';
+import obstacleIcon from '@/assets/obstacle.svg';
+import potholeIcon from '@/assets/pothole.svg';
+
+export default {
+    accident: {
+        description: 'reportLabels.accidentDescription',
+        label: 'reportLabels.accident',
+        image: accidentIcon,
+        marker: accidentMarker,
+        markerLarge: accidentMarker,
+    },
+    gcum: {
+        description: 'reportLabels.gcumDescription',
+        label: 'reportLabels.gcum',
+        image: gcumIcon,
+        marker: gcumMarker,
+        markerLarge: gcumMarker,
+    },
+    interrupt: {
+        description: 'reportLabels.interruptDescription',
+        label: 'reportLabels.interrupt',
+        image: interruptIcon,
+        marker: interruptMarker,
+        markerLarge: interruptMarker,
+    },
+    misc: {
+        description: 'reportLabels.miscDescription',
+        label: 'reportLabels.misc',
+        image: miscIcon,
+        marker: miscMarker,
+        markerLarge: miscMarker,
+    },
+    obstacle: {
+        description: 'reportLabels.obstacleDescription',
+        label: 'reportLabels.obstacle',
+        image: obstacleIcon,
+        marker: obstacleMarker,
+        markerLarge: obstacleMarker,
+    },
+    pothole: {
+        description: 'reportLabels.potholeDescription',
+        label: 'reportLabels.pothole',
+        image: potholeIcon,
+        marker: potholeMarker,
+        markerLarge: potholeMarker,
+    },
+};
diff --git a/src/sw.js b/src/sw.js
new file mode 100644
index 0000000..007bcc4
--- /dev/null
+++ b/src/sw.js
@@ -0,0 +1,99 @@
+import { VERSION as CACHE_NAME } from '@/constants';
+
+const DEBUG = (process.env.NODE_ENV !== 'production');
+
+// Define the assets to cache
+const { assets } = global.serviceWorkerOption;
+let assetsToCache = [...assets, './'];
+assetsToCache = assetsToCache.map(
+    path => new URL(path, global.location).toString(),
+);
+assetsToCache = assetsToCache.filter(
+    // Remove some assets from cache, such as Webpack hot-reload stuff
+    url => !url.endsWith('hot-update.json'),
+);
+
+// Define the locations from which we allow caching
+const ALLOW_CACHING_FROM = [
+    global.location.origin,
+];
+
+global.self.addEventListener('install', (event) => {
+    DEBUG && console.log('SW: installing…');
+    event.waitUntil(
+        global.caches.open(CACHE_NAME)
+            .then((cache) => {
+                DEBUG && console.log('SW: cache opened.');
+                cache.addAll(assetsToCache).then(
+                    () => {
+                        if (DEBUG) {
+                            console.log(`SW: cached assets ${assetsToCache}.`);
+                            console.log('SW: successfully installed!');
+                        }
+                        return global.self.skipWaiting(); // Immediately update the SW
+                    },
+                );
+            }),
+    );
+});
+
+global.self.addEventListener('activate', (event) => {
+    DEBUG && console.log('SW: activating…');
+
+    event.waitUntil(
+        // Delete all caches but the current one
+        global.caches.keys().then(
+            cacheNames => Promise.all(
+                cacheNames.map((cacheName) => {
+                    if (cacheName.indexOf(CACHE_NAME) !== 0) {
+                        DEBUG && console.log(`SW: Deleting unused cache ${cacheName}.`);
+                        return global.caches.delete(cacheName);
+                    }
+                    return null;
+                }),
+            ).then(() => DEBUG && console.log('SW: activated!')),
+        ),
+    );
+});
+
+global.self.addEventListener('fetch', (event) => {
+    const { request } = event;
+
+    // Do not touch requests which are not GET
+    if (request.method !== 'GET') {
+        DEBUG && console.log(`SW: ignore non-GET request: ${request.method}`);
+        return;
+    }
+
+    // Do not touch requests from a different origin
+    const requestURL = new URL(request.url);
+    if (ALLOW_CACHING_FROM.indexOf(requestURL.origin) === -1) {
+        DEBUG && console.log(`SW: ignore different origin ${requestURL.origin}`);
+        return;
+    }
+
+    // Never touch requests going from / to the API
+    if (requestURL.pathname.startsWith('/api')) {
+        // Note that if API is on a different location, it will be ignored by
+        // the previous rule.
+        DEBUG && console.log(`SW: ignore API call ${requestURL.pathname}`);
+        return;
+    }
+
+    // For the other requests, try to match it in the cache, otherwise do a
+    // network call
+    const resource = global.caches.open(CACHE_NAME).then(
+        cache => cache.match(request).then(
+            (response) => {
+                if (response) {
+                    DEBUG && console.log(`SW: serving ${request.url} from cache`);
+                    return response;
+                }
+
+                DEBUG && console.log(`SW: no match in cache for ${request.url}, using network`);
+                return fetch(request);
+            },
+        ),
+    );
+    event.respondWith(resource);
+});
diff --git a/support/nginx/cyclassist.conf b/support/nginx/cyclassist.conf
index 9fd43e2..4cd34c9 100644
--- a/support/nginx/cyclassist.conf
+++ b/support/nginx/cyclassist.conf
@@ -46,6 +46,15 @@ server {
         expires max;  # Max caching for font files
     }
 
+    # No caching for the service worker file
+    location = /sw.js {
+        add_header Last-Modified $date_gmt;
+        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
+        if_modified_since off;
+        expires off;
+        etag off;
+    }
+
     # Proxy pass the API calls to the server part
     location /api {
         limit_req zone=cycloAPI burst=3 nodelay; # Add rate-limiting on top of the API
diff --git a/yarn.lock b/yarn.lock
index 4ec9884..1106f1b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7413,6 +7413,12 @@ serve-static@1.13.2:
     parseurl "~1.3.2"
     send "0.16.2"
 
+serviceworker-webpack-plugin@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/serviceworker-webpack-plugin/-/serviceworker-webpack-plugin-1.0.1.tgz#481863288487e92da01d49745336c72ef8a6136b"
+  dependencies:
+    minimatch "^3.0.4"
+
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"