From 969a88538321cf6fde61331d8186e19e8c3f01db Mon Sep 17 00:00:00 2001 From: Mahmoud Saada Date: Sun, 9 Jul 2017 11:51:22 -0400 Subject: [PATCH 1/2] Explicit window vars in registerServiceWorker.js The props `URL`, `fetch`, `location`, `addEventListener` are available under the global `window` object in the browser. This was previously unclear to linter plugins such as `standardjs`. The solution is to either prepend all of those variables with `window.*` OR destructure them from the `window` object as shown in this commit. --- .../template/src/registerServiceWorker.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/react-scripts/template/src/registerServiceWorker.js b/packages/react-scripts/template/src/registerServiceWorker.js index 4a3ccf02124..9e5466652ba 100644 --- a/packages/react-scripts/template/src/registerServiceWorker.js +++ b/packages/react-scripts/template/src/registerServiceWorker.js @@ -7,13 +7,14 @@ // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. // This link also includes instructions on opting out of this behavior. +const {URL, fetch, location, addEventListener} = window; const isLocalhost = Boolean( - window.location.hostname === 'localhost' || + location.hostname === 'localhost' || // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || + location.hostname === '[::1]' || // 127.0.0.1/8 is considered localhost for IPv4. - window.location.hostname.match( + location.hostname.match( /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ ) ); @@ -21,15 +22,15 @@ const isLocalhost = Boolean( export default function register() { 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.env.PUBLIC_URL, window.location); - if (publicUrl.origin !== window.location.origin) { + const publicUrl = new URL(process.env.PUBLIC_URL, location); + if (publicUrl.origin !== 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 // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 return; } - window.addEventListener('load', () => { + addEventListener('load', () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; if (!isLocalhost) { @@ -84,7 +85,7 @@ function checkValidServiceWorker(swUrl) { // No service worker found. Probably a different app. Reload the page. navigator.serviceWorker.ready.then(registration => { registration.unregister().then(() => { - window.location.reload(); + location.reload(); }); }); } else { From 08ff70dbb4751bb425095e4d7adf4130063ac338 Mon Sep 17 00:00:00 2001 From: Mahmoud Saada Date: Sun, 9 Jul 2017 20:00:39 -0400 Subject: [PATCH 2/2] Update registerServiceWorker.js --- .../template/src/registerServiceWorker.js | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/react-scripts/template/src/registerServiceWorker.js b/packages/react-scripts/template/src/registerServiceWorker.js index 9e5466652ba..41308467b2e 100644 --- a/packages/react-scripts/template/src/registerServiceWorker.js +++ b/packages/react-scripts/template/src/registerServiceWorker.js @@ -7,14 +7,13 @@ // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. // This link also includes instructions on opting out of this behavior. -const {URL, fetch, location, addEventListener} = window; const isLocalhost = Boolean( - location.hostname === 'localhost' || + window.location.hostname === 'localhost' || // [::1] is the IPv6 localhost address. - location.hostname === '[::1]' || + window.location.hostname === '[::1]' || // 127.0.0.1/8 is considered localhost for IPv4. - location.hostname.match( + window.location.hostname.match( /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ ) ); @@ -22,15 +21,15 @@ const isLocalhost = Boolean( export default function register() { 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.env.PUBLIC_URL, location); - if (publicUrl.origin !== location.origin) { + const publicUrl = new window.URL(process.env.PUBLIC_URL, window.location); + 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 // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 return; } - addEventListener('load', () => { + window.addEventListener('load', () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; if (!isLocalhost) { @@ -75,7 +74,7 @@ function registerValidSW(swUrl) { function checkValidServiceWorker(swUrl) { // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl) + window.fetch(swUrl) .then(response => { // Ensure service worker exists, and that we really are getting a JS file. if ( @@ -85,7 +84,7 @@ function checkValidServiceWorker(swUrl) { // No service worker found. Probably a different app. Reload the page. navigator.serviceWorker.ready.then(registration => { registration.unregister().then(() => { - location.reload(); + window.location.reload(); }); }); } else { @@ -101,8 +100,8 @@ function checkValidServiceWorker(swUrl) { } export function unregister() { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { + if ('serviceWorker' in window.navigator) { + window.navigator.serviceWorker.ready.then(registration => { registration.unregister(); }); }