https://www.ecolechocolat.com/serviceworker.php

1/* In order to get the listed resources below to load properly once moved to Amazon's CloudFront servers you need to add this to your S3 bucket, under Permissions/CORS configuration:
2
3<    ?xml version="1.0" encoding="UTF-8"?>
4<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
5	<CORSRule>
6		<AllowedOrigin>https://PUTYOURDOMAINNAMEHERE.com</AllowedOrigin>
7		<AllowedMethod>GET</AllowedMethod>
8		<MaxAgeSeconds>3000</MaxAgeSeconds>
9		<AllowedHeader>Authorization</AllowedHeader>
10	</CORSRule>
11</CORSConfiguration>
12
13
14Then you need to select the appropriate distribution under CloudFront and click the Behaviors tab.  Create or Edit an existing Behavior and select the following settings:
15
16Allowed HTTP Methods: GET, HEAD, OPTIONS
17
18Enable 'Cached HTTP Methods': GET, HEAD and OPTIONS
19NOTE: THIS IS A MAYBE, I HAVE TO LEARN MORE ABOUT THIS Setting
20
21Cache Based on Selected Request Headers: Whitelist
22Add these to the right box under Whitelist Headers, add as custom if necessary:
23	Access-Control-Allow-Origin
24	Access-Control-Request-Headers
25	Access-Control-Request-Method
26	Origin
27
28Then click the 'Yes, Edit' button at the bottom and give it about 10 minutes to propagate through the system and test using Chrome.
29*/
30
31const cacheName = '2024-06-22.v02';
32
33/* Point this array item to your own 'offline' template if you plan on removing the 'examples' folder in your own development. */
34var cacheFiles = [
35/* {  CCMS_LIB:site.php;FUNC:build_offline_lngList} */
36'/en/offline.html',
37'/en/manifest.php',
38'/ccmstpl/img/offline_01.webp',
39'/ccmstpl/img/offline_01-min.jpg'
40];
41
42const doNotSearchSWCache = [
43	'connect.facebook.net',
44	'ct.pinterest.com',
45	's.pinimg.com',
46	'www.facebook.com',
47	'www.instagram.com',
48	'www.googletagmanager.com'
49];
50
51/*
52Analytics and Service Worker:
53https://developers.google.com/web/ilt/pwa/integrating-analytics#analytics_and_service_worker
54self.importScripts('/ccmstpl/examples/_js/analytics-helper.js');
55
56Important resources used in the assembly of this services code:
57https://googlechrome.github.io/samples/service-worker/custom-offline-page/
58https://developers.google.com/web/updates/2017/02/navigation-preload
59*/
60
61self.addEventListener('install',(event) => {
62	event.waitUntil((async() => {
63		const cache = await caches.open(cacheName).then(cache => {
64			return cache.addAll(cacheFiles);
65		})
66	})());
67});
68
69
70self.addEventListener('activate',(event) => {
71	event.waitUntil((async() => {
72		caches.keys().then(keyList => {
73			return Promise.all(keyList.map(key => {
74				if(key !== cacheName) return caches.delete(key);
75			}));
76		})
77	})());
78});
79
80
81/*
82SerivceWorker Type 1:
831) Check the cache first and return if found.
842) Check the network for changes and save to the cache if found.
853) Return offline page if resource not found in cache and network not accessible.
86*/
87
88self.addEventListener('fetch',(event) => {
89	var parse_url = /^https:\/\/([0-9.\-A-Za-z]+)/;
90	var result = parse_url.exec(event.request.url);
91
92// console.log('SW result event: ' ,result);
93
94	let found = doNotSearchSWCache.find((element) => element == result[1]);
95
96	console.log('SW fetch event: ' ,result[1], ', found = ', found);
97
98	if(found === undefined) {
99
100		console.log('SW fetch event: ', result[1], ' (The domain name, or resource requested, was not found in the doNotSearchSWCache const so can check the local cache.)(1)');
101
102		if(!/(\/(([a-z]{2,3})(-[a-z]{2,3})?)\/payment\/(.*))|(\/(([a-z]{2,3})(-[a-z]{2,3})?)\/user\/)/i.test(event.request.url)) {
103
104			console.log('SW fetch event: ', event.request.url, ' (event.request.url did not contain requests for the payment or user dirs so we are going to check the cache for it.  If its not there then we will try pulling a copy of it via the network, display it, then add it to the cache for next time.)(2)');
105
106			event.respondWith(
107				caches.open(cacheName).then(cache => {
108					return cache.match(event.request).then(response => {
109
110/*
111Go here to learn more about cors:
112https://jakearchibald.com/2015/thats-so-fetch/#no-cors-and-opaque-responses
113or
114https://developers.google.com/web/fundamentals/primers/service-workers/#non-cors_fail_by_default
115const fetchResponse = await fetch(event.request, {mode:'cors'});
116const fetchResponse = await fetch(event.request, {mode:'no-cors'});
117const fetchResponse = await fetch(event.request, {mode:'immutable'});
118*/
119
120						const fetchPromise = fetch(event.request, {mode:'no-cors'}

120).then(networkResponse => {
121
122							if(networkResponse.status === 404) {
123								return networkResponse;
124							}
125							cache.put(event.request, networkResponse.clone());
126							return networkResponse;
127						});
128						return response || fetchPromise;
129					}).catch(function() {
130
131						console.log('SW fetch event: ', event.request.url, ', (event.request.url could not be reached over the network so we are going to display the offline template instead.)(3)');
132
133						const regex = /\/(([a-z]{2,3})(-[a-z]{2,3})?)\//i;
134						const lng = event.request.url.match(regex);
135						const searchForThis = '/' + lng[1] + '/offline.html';
136						return caches.match(searchForThis);
137					})
138				})
139			);
140		} else {
141
142			console.log('SW fetch event: ' ,result[1], ', (We do not check or pull this one from cache.)(4)');
143
144			return event.respondWith(fetch(event.request, {mode:'no-cors'}));
145		}
146	} else {
147
148		console.log('SW fetch event: ' ,result[1], ', (The domain name, or resource requested, was found in the doNotSearchSWCache const so we do not check the local cache.)(5)');
149
150		return event.respondWith(fetch(event.request, {mode:'no-cors'}));
151	}
152});
153
154
155/*
156SerivceWorker Type 2:
1571) Check the cache first and return if found.
1582) Check the network for changes and save to the cache if found.
1593) Return offline page if resource not found in cache and network not accessible.
160
161self.addEventListener('fetch',(event) => {
162	if(!/\/recaptcha\/|(\/(([a-z]{2,3})(-[a-z]{2,3})?)\/payment\/(.*))|(\/(([a-z]{2,3})(-[a-z]{2,3})?)\/user\/)/i.test(event.request.url)) {
163
164		console.log('SW fetch event: ', event.request.url, ' (event.request.url did not contain requests for the Google recaptcha, payment or user dirs so we are going to check the cache for it and store it if its not already there.)(2)');
165
166		event.respondWith(
167			caches.open(cacheName).then(cache => {
168				return cache.match(event.request).then(response => {
169					const fetchPromise = fetch(event.request, {mode:'no-cors'}).then(networkResponse => {
170
171						if(networkResponse.status === 404) {
172							return networkResponse;
173						}
174						cache.put(event.request, networkResponse.clone());
175						return networkResponse;
176					});
177					return response || fetchPromise;
178				}).catch(function() {
179
180					console.log('SW fetch event: ', event.request.url, ', (event.request.url could not be reached over the network so we are going to display the offline template instead.)(3)');
181
182					const expression = /\/(([a-z]{2,3})(-[a-z]{2,3})?)\//i;
183					const regex = new RegExp(expression);
184					const lng = event.request.url.match(regex);
185
186					console.log('lng=['+lng+']');
187
188					if(lng == null) {
189						console.log('SW fetch event: ', event.request.url, ', (event.request.url does not appear to be a template from our site because there is no language variables. Probably a call to an outsite resource like www.googletagmanager.com, connect.facebook.com or s.pinimg.com so we will simply return the responce from those resources.)(4)');
190
191						event.respondWith(fetch(event.request, {mode:'no-cors'}));
192
193					} else {
194						console.log('SW fetch event: ', event.request.url, ', (A lng variable was found in the event.request.url so it appear to be a template requested from our site, but in this case there does not appear to be either an internet connection or the site is down and we have nothing in cache so were going to return the "offline" template instead.)(5)');
195
196						const searchForThis = '/' + lng[1] + '/offline.html';
197						return caches.match(searchForThis);
198					}
199				})
200			})
201		);
202	} else {
203		console.log('SW fetch event: ', event.request.url, ', (We do not check or pull this one from cache.)(4)');
204
205		event.respondWith(fetch(event.request, {mode:'no-cors'}));
206	}
207});
208*/