|
1 | | -// In production, we register a service worker to serve assets from local cache. |
2 | | - |
3 | | -// This lets the app load faster on subsequent visits in production, and gives |
4 | | -// it offline capabilities. However, it also means that developers (and users) |
5 | | -// will only see deployed updates on the 'N+1' visit to a page, since previously |
6 | | -// cached resources are updated in the background. |
7 | | - |
8 | | -// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. |
9 | | -// This link also includes instructions on opting out of this behavior. |
10 | | - |
11 | | -const isLocalhost = Boolean( |
12 | | - window.location.hostname === 'localhost' || |
13 | | - // [::1] is the IPv6 localhost address. |
14 | | - window.location.hostname === '[::1]' || |
15 | | - // 127.0.0.1/8 is considered localhost for IPv4. |
16 | | - window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/) |
17 | | -); |
18 | | - |
19 | | -export default function register() { |
20 | | - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { |
21 | | - // The URL constructor is available in all browsers that support SW. |
22 | | - const publicUrl = new URL(process.env.PUBLIC_URL!, window.location.toString()); |
23 | | - if (publicUrl.origin !== window.location.origin) { |
24 | | - // Our service worker won't work if PUBLIC_URL is on a different origin |
25 | | - // from what our page is served on. This might happen if a CDN is used to |
26 | | - // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 |
27 | | - return; |
28 | | - } |
29 | | - |
30 | | - window.addEventListener('load', () => { |
31 | | - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; |
32 | | - |
33 | | - if (isLocalhost) { |
34 | | - // This is running on localhost. Lets check if a service worker still exists or not. |
35 | | - checkValidServiceWorker(swUrl); |
36 | | - |
37 | | - // Add some additional logging to localhost, pointing developers to the |
38 | | - // service worker/PWA documentation. |
39 | | - navigator.serviceWorker.ready.then(() => { |
40 | | - console.log( |
41 | | - 'This web app is being served cache-first by a service ' + |
42 | | - 'worker. To learn more, visit https://goo.gl/SC7cgQ' |
43 | | - ); |
44 | | - }); |
45 | | - } else { |
46 | | - // Is not local host. Just register service worker |
47 | | - registerValidSW(swUrl); |
48 | | - } |
49 | | - }); |
50 | | - } |
51 | | -} |
52 | | - |
53 | | -function registerValidSW(swUrl: string) { |
54 | | - if (!window.location.href.match('^([^/]*\\/)(.*\\.js|.*.html|static\\/.*|)$')) { |
55 | | - return; |
56 | | - } |
57 | | - navigator.serviceWorker |
58 | | - .register(swUrl) |
59 | | - .then((registration) => { |
60 | | - registration.onupdatefound = () => { |
61 | | - const installingWorker = registration.installing; |
62 | | - if (installingWorker) { |
63 | | - installingWorker.onstatechange = () => { |
64 | | - if (installingWorker.state === 'installed') { |
65 | | - if (navigator.serviceWorker.controller) { |
66 | | - // At this point, the old content will have been purged and |
67 | | - // the fresh content will have been added to the cache. |
68 | | - // It's the perfect time to display a 'New content is |
69 | | - // available; please refresh.' message in your web app. |
70 | | - console.log('New content is available; please refresh.'); |
71 | | - } else { |
72 | | - // At this point, everything has been precached. |
73 | | - // It's the perfect time to display a |
74 | | - // 'Content is cached for offline use.' message. |
75 | | - console.log('Content is cached for offline use.'); |
76 | | - } |
77 | | - } |
78 | | - }; |
79 | | - } |
80 | | - }; |
81 | | - }) |
82 | | - .catch((error) => { |
83 | | - console.error('Error during service worker registration:', error); |
84 | | - }); |
85 | | -} |
86 | | - |
87 | | -function checkValidServiceWorker(swUrl: string) { |
88 | | - // Check if the service worker can be found. If it can't reload the page. |
89 | | - fetch(swUrl) |
90 | | - .then((response) => { |
91 | | - // Ensure service worker exists, and that we really are getting a JS file. |
92 | | - if ( |
93 | | - response.status === 404 || |
94 | | - response.headers.get('content-type')!.indexOf('javascript') === -1 |
95 | | - ) { |
96 | | - // No service worker found. Probably a different app. Reload the page. |
97 | | - navigator.serviceWorker.ready.then((registration) => { |
98 | | - registration.unregister().then(() => { |
99 | | - window.location.reload(); |
100 | | - }); |
101 | | - }); |
102 | | - } else { |
103 | | - // Service worker found. Proceed as normal. |
104 | | - registerValidSW(swUrl); |
105 | | - } |
106 | | - }) |
107 | | - .catch(() => { |
108 | | - console.log('No internet connection found. App is running in offline mode.'); |
109 | | - }); |
110 | | -} |
111 | | - |
112 | 1 | export function unregister() { |
113 | 2 | if ('serviceWorker' in navigator) { |
114 | 3 | navigator.serviceWorker.ready.then((registration) => { |
|
0 commit comments