Added service worker
This commit is contained in:
		
							parent
							
								
									29d0671282
								
							
						
					
					
						commit
						b84caadaae
					
				
					 6 changed files with 144 additions and 1 deletions
				
			
		| 
						 | 
					@ -8,6 +8,7 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	<link rel="stylesheet" href="/base.css">
 | 
						<link rel="stylesheet" href="/base.css">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						<script src="/worker.js"></script>
 | 
				
			||||||
	<script src="/back.js"></script>
 | 
						<script src="/back.js"></script>
 | 
				
			||||||
	<script src="/items.js"></script>
 | 
						<script src="/items.js"></script>
 | 
				
			||||||
</head>
 | 
					</head>
 | 
				
			||||||
| 
						 | 
					@ -30,4 +31,4 @@
 | 
				
			||||||
		<div class="rsk"></div>
 | 
							<div class="rsk"></div>
 | 
				
			||||||
	</footer>
 | 
						</footer>
 | 
				
			||||||
</body>
 | 
					</body>
 | 
				
			||||||
</html>
 | 
					</html>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -10,6 +10,7 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	<link rel="stylesheet" href="/base.css">
 | 
						<link rel="stylesheet" href="/base.css">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						<script src="/worker.js"></script>
 | 
				
			||||||
	<script src="/items.js"></script>
 | 
						<script src="/items.js"></script>
 | 
				
			||||||
</head>
 | 
					</head>
 | 
				
			||||||
<body>
 | 
					<body>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
							
								
								
									
										116
									
								
								sw.js
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										116
									
								
								sw.js
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
					@ -0,0 +1,116 @@
 | 
				
			||||||
 | 
					const VERSION = 'v1'
 | 
				
			||||||
 | 
					const API_ORIGIN = 'https://scraper.infotren.dcdev.ro/'
 | 
				
			||||||
 | 
					const API_TRAINS = `${API_ORIGIN}v2/trains`
 | 
				
			||||||
 | 
					const API_STATIONS = `${API_ORIGIN}v2/stations`
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					self.addEventListener('install', (event) => {
 | 
				
			||||||
 | 
					  event.waitUntil(
 | 
				
			||||||
 | 
					    caches
 | 
				
			||||||
 | 
					      .open(VERSION)
 | 
				
			||||||
 | 
					      .then((cache) =>
 | 
				
			||||||
 | 
					        cache.addAll([
 | 
				
			||||||
 | 
					          // Root
 | 
				
			||||||
 | 
					          '/',
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          // Utility JS
 | 
				
			||||||
 | 
					          '/worker.js',
 | 
				
			||||||
 | 
					          '/items.js',
 | 
				
			||||||
 | 
					          '/back.js',
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          // Base
 | 
				
			||||||
 | 
					          '/base.css',
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          // Pages
 | 
				
			||||||
 | 
					          '/index.html',
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          '/about.html',
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          '/train.html',
 | 
				
			||||||
 | 
					          '/train.js',
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          '/view-train.html',
 | 
				
			||||||
 | 
					          '/view-train.js',
 | 
				
			||||||
 | 
					          '/view-train.css',
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          // API
 | 
				
			||||||
 | 
					          API_TRAINS,
 | 
				
			||||||
 | 
					          API_STATIONS,
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        ])
 | 
				
			||||||
 | 
					      )
 | 
				
			||||||
 | 
					  )
 | 
				
			||||||
 | 
					})
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const deleteCache = (key) => caches.delete(key)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const deleteOldCaches = async () => {
 | 
				
			||||||
 | 
					   const cacheKeepList = [VERSION]
 | 
				
			||||||
 | 
					   const keyList = await caches.keys()
 | 
				
			||||||
 | 
					   const cachesToDelete = keyList.filter((key) => !cacheKeepList.includes(key))
 | 
				
			||||||
 | 
					   await Promise.all(cachesToDelete.map(deleteCache))
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					self.addEventListener('activate', (event) => {
 | 
				
			||||||
 | 
					  event.waitUntil(deleteOldCaches())
 | 
				
			||||||
 | 
					})
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// Enable navigation preload
 | 
				
			||||||
 | 
					const enableNavigationPreload = async () => {
 | 
				
			||||||
 | 
					  if (self.registration.navigationPreload) {
 | 
				
			||||||
 | 
					    // Enable navigation preloads!
 | 
				
			||||||
 | 
					    await self.registration.navigationPreload.enable()
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const putInCache = async (request, response) => {
 | 
				
			||||||
 | 
					  const cache = await caches.open(VERSION)
 | 
				
			||||||
 | 
					  await cache.put(request, response)
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const cacheFirst = async ({ request, preloadResponsePromise, refreshAnyway }) => {
 | 
				
			||||||
 | 
					  // First try to get the resource from the cache
 | 
				
			||||||
 | 
					  const responseFromCache = await caches.match(request)
 | 
				
			||||||
 | 
					  if (responseFromCache) {
 | 
				
			||||||
 | 
					    if (refreshAnyway) {
 | 
				
			||||||
 | 
					      console.log('request in cache, refreshing anyway but returning cache', request);
 | 
				
			||||||
 | 
					      ((async () => {
 | 
				
			||||||
 | 
					        try {
 | 
				
			||||||
 | 
					          const response = await fetch(request)
 | 
				
			||||||
 | 
					          if (response.ok) {
 | 
				
			||||||
 | 
					            putInCache(request, response)
 | 
				
			||||||
 | 
					          }
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        catch {}
 | 
				
			||||||
 | 
					      })())
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    return responseFromCache
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  // Next try to use (and cache) the preloaded response, if it's there
 | 
				
			||||||
 | 
					  const preloadResponse = await preloadResponsePromise
 | 
				
			||||||
 | 
					  if (preloadResponse) {
 | 
				
			||||||
 | 
					    console.info('using preload response', preloadResponse)
 | 
				
			||||||
 | 
					    putInCache(request, preloadResponse.clone())
 | 
				
			||||||
 | 
					    return preloadResponse
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  // Next try to get the resource from the network
 | 
				
			||||||
 | 
					  const responseFromNetwork = await fetch(request)
 | 
				
			||||||
 | 
					  // response may be used only once
 | 
				
			||||||
 | 
					  // we need to save clone to put one copy in cache
 | 
				
			||||||
 | 
					  // and serve second one
 | 
				
			||||||
 | 
					  if (responseFromNetwork.ok) {
 | 
				
			||||||
 | 
					    putInCache(request, responseFromNetwork.clone())
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  return responseFromNetwork;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					self.addEventListener('fetch', (event) => {
 | 
				
			||||||
 | 
					  event.respondWith(
 | 
				
			||||||
 | 
					    cacheFirst({
 | 
				
			||||||
 | 
					      request: event.request,
 | 
				
			||||||
 | 
					      preloadResponsePromise: event.preloadResponse,
 | 
				
			||||||
 | 
					      refreshAnyway: [API_STATIONS, API_TRAINS].includes(event.request.url),
 | 
				
			||||||
 | 
					    })
 | 
				
			||||||
 | 
					  )
 | 
				
			||||||
 | 
					})
 | 
				
			||||||
| 
						 | 
					@ -10,6 +10,7 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	<link rel="stylesheet" href="/base.css">
 | 
						<link rel="stylesheet" href="/base.css">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						<script src="/worker.js"></script>
 | 
				
			||||||
	<script src="/back.js"></script>
 | 
						<script src="/back.js"></script>
 | 
				
			||||||
	<script src="/items.js"></script>
 | 
						<script src="/items.js"></script>
 | 
				
			||||||
	<script src="train.js"></script>
 | 
						<script src="train.js"></script>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -11,6 +11,7 @@
 | 
				
			||||||
	<link rel="stylesheet" href="/base.css">
 | 
						<link rel="stylesheet" href="/base.css">
 | 
				
			||||||
	<link rel="stylesheet" href="view-train.css">
 | 
						<link rel="stylesheet" href="view-train.css">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						<script src="/worker.js"></script>
 | 
				
			||||||
	<script src="/back.js"></script>
 | 
						<script src="/back.js"></script>
 | 
				
			||||||
	<script src="view-train.js"></script>
 | 
						<script src="view-train.js"></script>
 | 
				
			||||||
</head>
 | 
					</head>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
							
								
								
									
										23
									
								
								worker.js
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										23
									
								
								worker.js
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
					@ -0,0 +1,23 @@
 | 
				
			||||||
 | 
					const registerServiceWorker = async () => {
 | 
				
			||||||
 | 
					  if ('serviceWorker' in navigator) {
 | 
				
			||||||
 | 
					    try {
 | 
				
			||||||
 | 
					      const registration = await navigator.serviceWorker.register(
 | 
				
			||||||
 | 
					        '/sw.js',
 | 
				
			||||||
 | 
					        {
 | 
				
			||||||
 | 
					          scope: '/',
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					      );
 | 
				
			||||||
 | 
					      if (registration.installing) {
 | 
				
			||||||
 | 
					        console.log('Service worker installing');
 | 
				
			||||||
 | 
					      } else if (registration.waiting) {
 | 
				
			||||||
 | 
					        console.log('Service worker installed');
 | 
				
			||||||
 | 
					      } else if (registration.active) {
 | 
				
			||||||
 | 
					        console.log('Service worker active');
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					    } catch (error) {
 | 
				
			||||||
 | 
					      console.error(`Registration failed with ${error}`);
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					registerServiceWorker();
 | 
				
			||||||
		Loading…
	
	Add table
		
		Reference in a new issue