mascara - use sw-controller and other cleanups

mascara/server/index.js

@@ -23,7 +23,8 @@ function createMetamascaraServer () {
   serveBundle(server, '/metamascara.js', metamascaraBundle)
   serveBundle(server, '/scripts/ui.js', uiBundle)
   serveBundle(server, '/scripts/proxy.js', proxyBundle)
-  serveBundle(server, '/scripts/background.js', backgroundBuild)
+  // the serviceworker must be served from the root of the app
+  serveBundle(server, '/background.js', backgroundBuild)
 
   // serve assets
   server.use(express.static(path.join(__dirname, '/../ui/'), { setHeaders: (res) => res.set('X-Frame-Options', 'DENY') }))

mascara/src/background.js

@@ -30,15 +30,19 @@ global.addEventListener('activate', function (event) {
 
 log.debug('inside:open')
 
-
-// // state persistence
+// state persistence
 const dbController = new DbController({
   key: STORAGE_KEY,
 })
-loadStateFromPersistence()
-.then((initState) => setupController(initState))
-.then(() => log.debug('MetaMask initialization complete.'))
-.catch((err) => console.error('WHILE SETTING UP:', err))
+
+start().catch(log.error)
+
+async function start() {
+  log.debug('MetaMask initializing...')
+  const initState = await loadStateFromPersistence()
+  await setupController(initState)
+  log.debug('MetaMask initialization complete.')
+}
 
 //
 // State and Persistence

mascara/src/proxy.js

@@ -1,13 +1,13 @@
 const createParentStream = require('iframe-stream').ParentStream
-const SWcontroller = require('client-sw-ready-event/lib/sw-client.js')
+const SwController = require('sw-controller')
 const SwStream = require('sw-stream/lib/sw-stream.js')
 
-const intervalDelay = Math.floor(Math.random() * (30000 - 1000)) + 1000
-const background = new SWcontroller({
+const keepAliveDelay = Math.floor(Math.random() * (30000 - 1000)) + 1000
+const background = new SwController({
   fileName: './scripts/background.js',
-  letBeIdle: false,
-  wakeUpInterval: 30000,
-  intervalDelay,
+  keepAlive: true,
+  keepAliveInterval: 30000,
+  keepAliveDelay,
 })
 
 const pageStream = createParentStream()

mascara/src/ui.js

@@ -1,6 +1,6 @@
 const injectCss = require('inject-css')
-const SWcontroller = require('client-sw-ready-event/lib/sw-client.js')
-const SwStream = require('sw-stream/lib/sw-stream.js')
+const SwController = require('sw-controller')
+const SwStream = require('sw-stream')
 const MetaMaskUiCss = require('../../ui/css')
 const MetamascaraPlatform = require('../../app/scripts/platforms/window')
 const startPopup = require('../../app/scripts/popup-core')
@@ -8,27 +8,44 @@ const startPopup = require('../../app/scripts/popup-core')
 // create platform global
 global.platform = new MetamascaraPlatform()
 
-
 var css = MetaMaskUiCss()
 injectCss(css)
 const container = document.getElementById('app-content')
 
-var name = 'popup'
+const name = 'popup'
 window.METAMASK_UI_TYPE = name
 window.METAMASK_PLATFORM_TYPE = 'mascara'
 
-const intervalDelay = Math.floor(Math.random() * (30000 - 1000)) + 1000
+const keepAliveDelay = Math.floor(Math.random() * (30000 - 1000)) + 1000
 
-const background = new SWcontroller({
-  fileName: './scripts/background.js',
-  letBeIdle: false,
-  intervalDelay,
-  wakeUpInterval: 20000,
+const swController = new SwController({
+  fileName: './background.js',
+  keepAlive: true,
+  keepAliveDelay,
+  keepAliveInterval: 20000,
 })
+
+swController.once('updatefound', windowReload)
+swController.once('ready', async () => {
+  try {
+    swController.removeListener('updatefound', windowReload)
+    console.log('swController ready')
+    await timeout(1000)
+    console.log('connecting to app')
+    await connectApp()
+    console.log('app connected')
+  } catch (err) {
+    console.error(err)
+  }
+})
+
+console.log('starting service worker')
+swController.startWorker()
+
 // Setup listener for when the service worker is read
-const connectApp = function (readSw) {
+function connectApp() {
   const connectionStream = SwStream({
-    serviceWorker: background.controller,
+    serviceWorker: swController.getWorker(),
     context: name,
   })
   return new Promise((resolve, reject) => {
@@ -43,19 +60,6 @@ const connectApp = function (readSw) {
     })
   })
 }
-background.on('ready', async (sw) => {
-  try {
-    background.removeListener('updatefound', connectApp)
-    await timeout(1000)
-    await connectApp(sw)
-    console.log('hello from cb ready event!')
-  } catch (e) {
-    console.error(e)
-  }
-})
-background.on('updatefound', windowReload)
-
-background.startWorker()
 
 function windowReload () {
   if (window.METAMASK_SKIP_RELOAD) return

package.json

@@ -78,7 +78,6 @@
     "browserify-derequire": "^0.9.4",
     "browserify-unibabel": "^3.0.0",
     "classnames": "^2.2.5",
-    "client-sw-ready-event": "^3.3.0",
     "clone": "^2.1.1",
     "copy-to-clipboard": "^3.0.8",
     "debounce": "^1.0.0",
@@ -118,6 +117,7 @@
     "fuse.js": "^3.2.0",
     "gulp": "github:gulpjs/gulp#4.0",
     "gulp-autoprefixer": "^5.0.0",
+    "gulp-debug": "^3.2.0",
     "gulp-eslint": "^4.0.0",
     "gulp-sass": "^3.1.0",
     "hat": "0.0.3",
@@ -180,7 +180,8 @@
     "semaphore": "^1.0.5",
     "semver": "^5.4.1",
     "shallow-copy": "0.0.1",
-    "sw-stream": "^2.0.0",
+    "sw-controller": "^1.0.3",
+    "sw-stream": "^2.0.2",
     "textarea-caret": "^3.0.1",
     "through2": "^2.0.3",
     "valid-url": "^1.0.9",