Add service worker to cache requests to mapbox APIs

3 files changed, 45 insertions, 7 deletions

diff --git a/app/app.js b/app/app.js
index e43a1de173..7c358dcbda 100644
--- a/app/app.js
+++ b/app/app.js
@@ -1,3 +1,4 @@
+import path from 'path';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
@@ -81,7 +82,16 @@ const createElement = (Component, props) => {
 const rootElement = document.querySelector(document.currentScript.getAttribute('data-container'));
 
 // disable smart pinch.
-webFrame.setVisualZoomLevelLimits(1, 1);
+webFrame.setZoomLevelLimits(1, 1);
+
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register(path.join(__dirname, 'tilecache.sw.js'))
+    .then((registration) => {
+      console.log('ServiceWorker registration successful with scope: ', registration.scope);
+    }).catch((err) => {
+      console.log('ServiceWorker registration failed: ', err);
+    });
+}
 
 ReactDOM.render(
   <Provider store={ store }>
diff --git a/app/tilecache.sw.js b/app/tilecache.sw.js
new file mode 100644
index 0000000000..4a3721216b
--- /dev/null
+++ b/app/tilecache.sw.js
@@ -0,0 +1,27 @@
+
+this.addEventListener('install', function (event) {
+  console.log('Installing Service Worker');
+  event.waitUntil(this.skipWaiting());
+});
+
+this.addEventListener('activate', function (event) {
+  event.waitUntil(this.clients.claim());
+});
+
+this.addEventListener('fetch', function(event) {
+  var url = event.request.url;
+
+  if(url.startsWith('https://') && (url.includes('tiles.mapbox.com') || url.includes('api.mapbox.com'))) {
+    event.respondWith(
+      caches.match(event.request).then(function(resp) {
+        return resp || fetch(event.request).then(function(response) {
+          var cacheResponse = response.clone();
+          caches.open('mapbox').then(function(cache) {
+            cache.put(event.request, cacheResponse);
+          });
+          return response;
+        });
+      })
+    );
+  }
+});
\ No newline at end of file
diff --git a/package.json b/package.json
index cf564585af..f92bbcdc88 100644
--- a/package.json
+++ b/package.json
@@ -52,20 +52,21 @@
   },
   "scripts": {
     "postinstall": "install-app-deps",
-    "develop": "npm run private:compile -- --source-maps true && run-p -r private:watch private:serve",
+    "develop": "npm run private:compile -- --source-maps true && npm run private:service-worker && run-p -r private:watch private:serve",
     "test": "mocha -R spec --compilers js:babel-core/register test/**/*.spec.js",
     "lint": "eslint --no-ignore scripts app test *.js",
-    "pack": "run-s private:clean private:compile private:build:all",
-    "pack:mac": "run-s private:clean private:compile private:build:mac",
-    "pack:win": "run-s private:clean private:compile private:build:win",
-    "pack:linux": "run-s private:clean private:compile private:build:linux",
+    "pack": "run-s private:clean private:compile private:service-worker private:build:all",
+    "pack:mac": "run-s private:clean private:compile private:service-worker private:build:mac",
+    "pack:win": "run-s private:clean private:compile private:service-worker private:build:win",
+    "pack:linux": "run-s private:clean private:compile private:service-worker private:build:linux",
     "private:build:all": "build -mwl",
     "private:build:mac": "build --mac",
     "private:build:win": "build --win",
     "private:build:linux": "build --linux",
     "private:watch": "npm run private:compile -- --source-maps true --watch --skip-initial-build",
     "private:serve": "babel-node scripts/serve.js",
-    "private:compile": "babel app/ --copy-files --out-dir build",
+    "private:compile": "babel app/ --copy-files --ignore *.sw.js --out-dir build",
+    "private:service-worker": "cp app/*.sw.js build",
     "private:clean": "rimraf build"
   }
 }