From 9c096db24871329260ad1386ff110989516a4991 Mon Sep 17 00:00:00 2001 From: Yasuaki Uechi Date: Fri, 6 Mar 2020 23:45:55 +0900 Subject: [PATCH] chore: refresh service worker --- web/src/index.tsx | 10 ++++++++- web/src/serviceWorker.ts | 44 ++++++++++++++++++++-------------------- 2 files changed, 31 insertions(+), 23 deletions(-) diff --git a/web/src/index.tsx b/web/src/index.tsx index 2af3c37..210280a 100644 --- a/web/src/index.tsx +++ b/web/src/index.tsx @@ -23,4 +23,12 @@ ReactDOM.render( document.getElementById('root'), ); -serviceWorker.register({}); +serviceWorker.register({ + onUpdate: (registration) => { + console.log('New version available! Ready to update?'); + if (registration && registration.waiting) { + registration.waiting.postMessage({type: 'SKIP_WAITING'}); + } + window.location.reload(); + }, +}); diff --git a/web/src/serviceWorker.ts b/web/src/serviceWorker.ts index e54d87c..eaebe6d 100644 --- a/web/src/serviceWorker.ts +++ b/web/src/serviceWorker.ts @@ -10,14 +10,11 @@ // To learn more about the benefits of this model and instructions on how to // opt-in, read https://bit.ly/CRA-PWA -const VERSION = 1; - 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. - + // 127.0.0.0/8 are considered localhost for IPv4. /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/.exec( window.location.hostname, ), @@ -28,16 +25,16 @@ type Config = { onUpdate?: (registration: ServiceWorkerRegistration) => void; }; -function registerValidSW(swUrl: string, config?: Config): void { +function registerValidSW(swUrl: string, config?: Config) { navigator.serviceWorker .register(swUrl) .then((registration) => { - registration.onupdatefound = (): void => { + registration.onupdatefound = () => { const installingWorker = registration.installing; if (installingWorker == null) { return; } - installingWorker.onstatechange = (): void => { + installingWorker.onstatechange = () => { if (installingWorker.state === 'installed') { if (navigator.serviceWorker.controller) { // At this point, the updated precached content has been fetched, @@ -72,9 +69,11 @@ function registerValidSW(swUrl: string, config?: Config): void { }); } -function checkValidServiceWorker(swUrl: string, config?: Config): void { +function checkValidServiceWorker(swUrl: string, config?: Config) { // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl) + fetch(swUrl, { + headers: {'Service-Worker': 'script'}, + }) .then((response) => { // Ensure service worker exists, and that we really are getting a JS file. const contentType = response.headers.get('content-type'); @@ -100,21 +99,10 @@ function checkValidServiceWorker(swUrl: string, config?: Config): void { }); } -export function unregister(): void { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then((registration) => { - registration.unregister(); - }); - } -} - -export function register(config?: Config): void { +export function register(config?: Config) { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL( - (process as {env: {[key: string]: string}}).env.PUBLIC_URL, - window.location.href, - ); + const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); if (publicUrl.origin !== window.location.origin) { // Our service worker won't work if PUBLIC_URL is on a different origin // from what our page is served on. This might happen if a CDN is used to @@ -144,3 +132,15 @@ export function register(config?: Config): void { }); } } + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready + .then((registration) => { + registration.unregister(); + }) + .catch((error) => { + console.error(error.message); + }); + } +}