From 71188bb56e031c117074df63a013c9930e31963a Mon Sep 17 00:00:00 2001 From: Jimmy Moon Date: Thu, 1 Jun 2017 07:19:41 +0900 Subject: [PATCH] Add SW registration template injection (#21) --- template/build/service-worker-dev.js | 17 ++++++++ template/build/service-worker-prod.js | 55 +++++++++++++++++++++++++ template/build/webpack.dev.conf.js | 6 ++- template/build/webpack.prod.conf.js | 5 ++- template/index.html | 58 +-------------------------- 5 files changed, 82 insertions(+), 59 deletions(-) create mode 100644 template/build/service-worker-dev.js create mode 100644 template/build/service-worker-prod.js diff --git a/template/build/service-worker-dev.js b/template/build/service-worker-dev.js new file mode 100644 index 0000000..979e196 --- /dev/null +++ b/template/build/service-worker-dev.js @@ -0,0 +1,17 @@ +// This service worker file is effectively a 'no-op' that will reset any +// previous service worker registered for the same host:port combination. +// In the production build, this file is replaced with an actual service worker +// file that will precache your site's local assets. +// See https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432 + +self.addEventListener('install', () => self.skipWaiting()); + +self.addEventListener('activate', () => { + self.clients.matchAll({ type: 'window' }).then(windowClients => { + for (let windowClient of windowClients) { + // Force open pages to refresh, so that they have a chance to load the + // fresh navigation response from the local dev server. + windowClient.navigate(windowClient.url); + } + }); +}); \ No newline at end of file diff --git a/template/build/service-worker-prod.js b/template/build/service-worker-prod.js new file mode 100644 index 0000000..dd6f006 --- /dev/null +++ b/template/build/service-worker-prod.js @@ -0,0 +1,55 @@ +(function() { + 'use strict'; + + // Check to make sure service workers are supported in the current browser, + // and that the current page is accessed from a secure origin. Using a + // service worker from an insecure origin will trigger JS console errors. + const isLocalhost = Boolean(window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.1/8 is considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) + ); + + window.addEventListener('load', function() { + if ('serviceWorker' in navigator && + (window.location.protocol === 'https:' || isLocalhost)) { + navigator.serviceWorker.register('service-worker.js') + .then(function(registration) { + // updatefound is fired if service-worker.js changes. + registration.onupdatefound = function() { + // updatefound is also fired the very first time the SW is installed, + // and there's no need to prompt for a reload at that point. + // So check here to see if the page is already controlled, + // i.e. whether there's an existing service worker. + if (navigator.serviceWorker.controller) { + // The updatefound event implies that registration.installing is set + const installingWorker = registration.installing; + + installingWorker.onstatechange = function() { + switch (installingWorker.state) { + case 'installed': + // At this point, the old content will have been purged and the + // fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in the page's interface. + break; + + case 'redundant': + throw new Error('The installing ' + + 'service worker became redundant.'); + + default: + // Ignore + } + }; + } + }; + }).catch(function(e) { + console.error('Error during service worker registration:', e); + }); + } + }); +})(); diff --git a/template/build/webpack.dev.conf.js b/template/build/webpack.dev.conf.js index 5470402..b992727 100644 --- a/template/build/webpack.dev.conf.js +++ b/template/build/webpack.dev.conf.js @@ -1,3 +1,5 @@ +var fs = require('fs') +var path = require('path') var utils = require('./utils') var webpack = require('webpack') var config = require('../config') @@ -28,7 +30,9 @@ module.exports = merge(baseWebpackConfig, { new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', - inject: true + inject: true, + serviceWorkerLoader: `` }), new FriendlyErrorsPlugin() ] diff --git a/template/build/webpack.prod.conf.js b/template/build/webpack.prod.conf.js index 879c1e9..3c3cf61 100644 --- a/template/build/webpack.prod.conf.js +++ b/template/build/webpack.prod.conf.js @@ -1,3 +1,4 @@ +var fs = require('fs') var path = require('path') var utils = require('./utils') var webpack = require('webpack') @@ -66,7 +67,9 @@ var webpackConfig = merge(baseWebpackConfig, { // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin - chunksSortMode: 'dependency' + chunksSortMode: 'dependency', + serviceWorkerLoader: `` }), // split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({ diff --git a/template/index.html b/template/index.html index dc0591e..1ff878b 100644 --- a/template/index.html +++ b/template/index.html @@ -28,63 +28,7 @@
This is your fallback content in case JavaScript fails to load.
- + <%= htmlWebpackPlugin.options.serviceWorkerLoader %>