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