Merge pull request #525 from bemusic/use-service-worker-plugin

🏗️ Remove service-worker hack

config/webpack.js

@@ -6,6 +6,7 @@ import { flowRight } from 'lodash'
 import path from './path'
 import webpack from 'webpack'
 import webpackResolve from './webpackResolve'
+import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin'
 
 function generateBaseConfig() {
   let config = {
@@ -19,7 +20,7 @@ function generateBaseConfig() {
     },
     devServer: {
       contentBase: false,
-      publicPath: '/build/',
+      publicPath: '/',
       stats: { colors: true, chunkModules: false },
     },
     module: {
@@ -40,6 +41,9 @@ function generateBaseConfig() {
           context: process.cwd(),
         },
       }),
+      new ServiceWorkerWebpackPlugin({
+        entry: path('src/app/service-worker.js'),
+      }),
     ],
   }
 
@@ -95,7 +99,12 @@ function generateLoadersConfig() {
     },
     {
       test: /\.worker\.js$/,
-      use: { loader: 'worker-loader' },
+      use: {
+        loader: 'worker-loader',
+        options: {
+          name: 'build/[hash].worker.js',
+        },
+      },
     },
     {
       test: /\.json$/,
@@ -170,21 +179,29 @@ function generateLoadersConfig() {
       options: {
         limit: 100000,
         mimetype: 'image/png',
+        name: 'build/[hash].[ext]',
       },
     },
     {
       test: /\.jpg$/,
       loader: 'file-loader',
+      options: {
+        name: 'build/[hash].[ext]',
+      },
     },
     {
       test: /\.(?:mp3|mp4|ogg|m4a)$/,
       loader: 'file-loader',
+      options: {
+        name: 'build/[hash].[ext]',
+      },
     },
     {
       test: /\.(otf|eot|svg|ttf|woff|woff2)(?:$|\?)/,
       loader: 'url-loader',
       options: {
         limit: 8192,
+        name: 'build/[hash].[ext]',
       },
     },
   ]
@@ -196,11 +213,11 @@ function applyWebConfig(config) {
       boot: ['./boot'],
     },
     output: {
-      path: path('dist', 'build'),
-      publicPath: 'build/',
+      path: path('dist'),
+      publicPath: '/',
       globalObject: 'this',
-      filename: '[name].js',
-      chunkFilename: '[name]-[chunkhash].js',
+      filename: 'build/[name].js',
+      chunkFilename: 'build/[name]-[chunkhash].js',
       devtoolModuleFilenameTemplate: 'file://[absolute-resource-path]',
       devtoolFallbackModuleFilenameTemplate:
         'file://[absolute-resource-path]?[hash]',

package.json

@@ -192,6 +192,7 @@
     "reselect": "^2.5.1",
     "rxjs": "^5.5.12",
     "screenfull": "^3.3.3",
+    "serviceworker-webpack-plugin": "^1.0.1",
     "throat": "^2.0.2",
     "timesynchro": "^1.0.1",
     "updeep": "^0.16.0",

src/app/index.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import SCENE_MANAGER from 'bemuse/scene-manager'
 import now from 'bemuse/utils/now'
-import workerPath from 'bemuse/hacks/service-worker-url/index.loader.js!serviceworker-loader!./service-worker.js'
+import serviceWorkerRuntime from 'serviceworker-webpack-plugin/lib/runtime'
 import { OFFICIAL_SERVER_URL } from 'bemuse/music-collection'
 import { createIO, createRun } from 'impure'
 import {
@@ -113,8 +113,7 @@ function setupServiceWorker() {
 }
 
 function registerServiceWorker() {
-  const url = '/sw-loader.js?path=' + encodeURIComponent(workerPath)
-  return navigator.serviceWorker.register(url)
+  return serviceWorkerRuntime.register()
 }
 
 function trackFullscreenEvents() {

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.base.json",
-  "include": ["src/**/*"],
+  "include": ["src/**/*", "types/**/*"],
   "exclude": ["node_modules", "website/node_modules"],
   "compilerOptions": {
     "baseUrl": ".",

types/serviceworker-webpack-plugin.d.ts

@@ -0,0 +1,4 @@
+declare module 'serviceworker-webpack-plugin/lib/runtime' {
+  const runtime: { register: () => Promise<ServiceWorkerRegistration> }
+  export default runtime
+}

yarn.lock

@@ -12761,6 +12761,13 @@ serviceworker-loader@^0.1.0:
   dependencies:
     loader-utils "0.2.x"
 
+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"
+  integrity sha512-VgDEkZ3pA0HajsRaWtl5w6bLxAXx0Y+4dm7YeTcIxVmvC9YXvstex38HOBDuYETeDS5fUlBy/47gC0QYBrG0nw==
+  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"