Merge pull request bemusic#423 from bemusic/update-service-worker

Improve service workers

package.json

@@ -152,7 +152,6 @@
     "reselect": "^2.5.1",
     "rxjs": "^5.0.0-beta.9",
     "screenfull": "^3.0.0",
-    "serviceworker-cache-polyfill": "^4.0.0",
     "test-bed": "^0.5.3",
     "throat": "^2.0.2",
     "timesynchro": "^1.0.1",

src/app/browser-support.js

@@ -5,8 +5,8 @@ export const SUPPORTED = [
     test: () => checkUserAgent(/Firefox\/(\d+)/, 37),
   },
   {
-    name: 'Chrome 42+',
-    test: () => checkUserAgent(/Chrome\/(\d+)\./, 42),
+    name: 'Chrome 54+',
+    test: () => checkUserAgent(/Chrome\/(\d+)\./, 54),
   },
   {
     name: 'Safari 8+',

src/app/index.js

@@ -1,33 +1,28 @@
+import * as Analytics from './analytics'
+import * as OptionsIO from './io/OptionsIO'
+import * as ReduxState from './redux/ReduxState'
 
 import now from 'bemuse/utils/now'
-
-import SCENE_MANAGER    from 'bemuse/scene-manager'
-import React            from 'react'
-import TitleScene       from './ui/TitleScene'
-import AboutScene       from './ui/AboutScene'
-import ModeSelectScene  from './ui/ModeSelectScene'
-import ServiceWorkerRegistrationScene
-    from './ui/ServiceWorkerRegistrationScene'
-
-import { OFFICIAL_SERVER_URL }    from './constants'
-import { isBrowserSupported }     from './browser-support'
-import BrowserSupportWarningScene from './ui/BrowserSupportWarningScene'
-
-import { getMusicServer, getTimeSynchroServer, getInitialGrepString }
-    from './query-flags'
-import { shouldShowAbout, shouldShowModeSelect }
-    from 'bemuse/devtools/query-flags'
-
 import workerPath from
   'bemuse/hacks/service-worker-url!serviceworker!./service-worker.js'
+import React from 'react'
+import SCENE_MANAGER from 'bemuse/scene-manager'
+import { shouldShowAbout, shouldShowModeSelect }
+    from 'bemuse/devtools/query-flags'
 import { createIO, createRun } from 'impure'
-import ioContext from './io/ioContext'
 import { withContext } from 'recompose'
+
+import ioContext from './io/ioContext'
 import store from './redux/instance'
+import AboutScene from './ui/AboutScene'
+import BrowserSupportWarningScene from './ui/BrowserSupportWarningScene'
+import ModeSelectScene from './ui/ModeSelectScene'
+import TitleScene from './ui/TitleScene'
 import { WarpDestination } from '../react-warp'
-import * as OptionsIO from './io/OptionsIO'
-import * as ReduxState from './redux/ReduxState'
-import * as Analytics from './analytics'
+import { isBrowserSupported } from './browser-support'
+import { OFFICIAL_SERVER_URL } from './constants'
+import { getMusicServer, getTimeSynchroServer, getInitialGrepString }
+    from './query-flags'
 
 export const runIO = createRun({
   context: ioContext
@@ -98,32 +93,23 @@ function getFirstScene () {
   }
 }
 
+function shouldActivateServiceWorker () {
+  return (
+    (location.protocol === 'https:' && location.host === 'bemuse.ninja') ||
+    (location.hostname === 'localhost')
+  )
+}
+
 function setupServiceWorker () {
   if (!('serviceWorker' in navigator)) return false
-  if (location.host !== 'bemuse.dev' && location.host !== 'bemuse.ninja') {
-    return false
-  }
-  if (location.protocol !== 'https:') return false
-  if (navigator.serviceWorker.controller) {
-    registerServiceWorker()
-    return true
-  } else {
-    var cutscene = React.createElement(ServiceWorkerRegistrationScene)
-    return SCENE_MANAGER.display(cutscene)
-    .then(function () {
-      return registerServiceWorker()
-    })
-    .then(function () {
-      return new Promise(function () {
-        location.reload()
-      })
-    })
-  }
+  if (!shouldActivateServiceWorker()) return false
+  registerServiceWorker()
+  return true
 }
 
 function registerServiceWorker () {
-  return navigator.serviceWorker.register('/sw-loader.js?path=' +
-    encodeURIComponent(workerPath))
+  const url = '/sw-loader.js?path=' + encodeURIComponent(workerPath)
+  return navigator.serviceWorker.register(url)
 }
 
 window.addEventListener('beforeunload', () => {

src/app/service-worker.js

@@ -1,10 +1,10 @@
 
 /*global caches*/
+
 import version from 'bemuse/utils/version'
-import 'serviceworker-cache-polyfill'
 
 function log (...args) {
-  console.log('[serviceworker]', ...args)
+  console.log('%c serviceworker %c', 'background:yellow;color:black', '', ...args)
 }
 
 log('I am a service worker! ' + version)
@@ -17,14 +17,15 @@ var SONG_CACHE_KEY = 'songs'
 
 self.addEventListener('install', function (event) {
   event.waitUntil(
-    caches.open(SITE_CACHE_KEY).then(function (cache) {
-      return cache.addAll(['/'])
-    })
+    caches.open(SITE_CACHE_KEY)
+    .then((cache) => cache.addAll([ '/' ]))
+    .then(() => self.skipWaiting())
   )
 })
 
 self.addEventListener('activate', function () {
-  log('Service worker activated!')
+  log('Service worker activated! Claiming clients now!')
+  return self.clients.claim()
 })
 
 self.addEventListener('fetch', function (event) {
@@ -69,7 +70,7 @@ function cacheForever (event, cacheName) {
     caches.open(cacheName).then(function (cache) {
       return cache.match(event.request).then(function (cached) {
         return cached || fetch(event.request).then(function (response) {
-          log('[caching forever]', event.request.url)
+          log('Cache forever:', event.request.url)
           cache.put(event.request, response.clone())
           return response
         })
@@ -83,7 +84,7 @@ function fetchThenCache (event, cacheName) {
     caches.open(cacheName).then(function (cache) {
       return fetch(event.request).then(function (response) {
         if (response && response.ok) {
-          log('[cached]', event.request.url)
+          log('Fetch OK:', event.request.url)
           cache.put(event.request, response.clone())
           return response
         } else {
@@ -102,7 +103,7 @@ function staleWhileRevalidate (event, cacheName) {
       return cache.match(event.request).then(function (cached) {
         var promise = fetch(event.request).then(function (response) {
           if (response && response.ok) {
-            log('[updated]', event.request.url)
+            log('Updated:', event.request.url)
             cache.put(event.request, response.clone())
           }
           return response

yarn.lock

@@ -6362,10 +6362,6 @@ serve-static@~1.11.1:
     parseurl "~1.3.1"
     send "0.14.1"
 
-serviceworker-cache-polyfill@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/serviceworker-cache-polyfill/-/serviceworker-cache-polyfill-4.0.0.tgz#de19ee73bef21ab3c0740a37b33db62464babdeb"
-
 serviceworker-loader@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/serviceworker-loader/-/serviceworker-loader-0.1.0.tgz#de9d8c105959773bbd2383becdc620eab9ae03e4"