kbruen/kai.infodb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix service worker cache, handle refresh better

Browse source
This commit is contained in:
Kenneth Bruen 2022-11-17 21:31:07 +01:00
parent 0827a1ec31
commit 9d4442de45
Signed by: kbruen
GPG key ID: C1980A470C3EE5B1
2 changed files with 240 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

292
sw.js
View file

@ -1,129 +1,221 @@
const VERSION = 'v14' const VERSION = 'v15'
const API_ORIGIN = 'https://scraper.infotren.dcdev.ro/' const API_ORIGIN = 'https://scraper.infotren.dcdev.ro/'
const API_TRAINS = `${API_ORIGIN}v3/trains` const API_TRAINS = `${API_ORIGIN}v3/trains`
const API_STATIONS = `${API_ORIGIN}v3/stations` const API_STATIONS = `${API_ORIGIN}v3/stations`
const CACHE_FIRST = [
// Root
'/',
// Utility JS
'/common/worker.js',
'/common/items.js',
'/common/back.js',
'/common/tabs.js',
// Base
'/base.css',
// Pages
'/index.html',
'/about.html',
'/train.html',
'/train.js',
'/view-train.html',
'/view-train.js',
'/view-train.css',
'/station.html',
'/station.js',
'/view-station.html',
'/view-station.js',
'/view-station.css',
// API
API_TRAINS,
API_STATIONS,
];
/**
* @param {string} url
* @returns {boolean}
*/
function shouldReturnFromCacheFirst(url) {
return CACHE_FIRST.map(u => u.includes('://') ? u : self.location.origin + u).includes(url.split('?')[0])
}
self.addEventListener('install', (event) => { self.addEventListener('install', (event) => {
event.waitUntil( event.waitUntil(
caches caches
.open(VERSION) .open(VERSION)
.then((cache) => .then((cache) =>
cache.addAll([ cache.addAll(CACHE_FIRST)
// Root )
'/', )
// Utility JS
'/common/worker.js',
'/common/items.js',
'/common/back.js',
'/common/tabs.js',
// Base
'/base.css',
// Pages
'/index.html',
'/about.html',
'/train.html',
'/train.js',
'/view-train.html',
'/view-train.js',
'/view-train.css',
'/station.html',
'/station.js',
'/view-station.html',
'/view-station.js',
'/view-station.css',
// API
API_TRAINS,
API_STATIONS,
])
)
)
}) })
const deleteCache = (/** @type {string} */ key) => caches.delete(key) const deleteCache = (/** @type {string} */ key) => caches.delete(key)
const deleteOldCaches = async () => { const deleteOldCaches = async () => {
const cacheKeepList = [VERSION] const cacheKeepList = [VERSION]
const keyList = await caches.keys() const keyList = await caches.keys()
const cachesToDelete = keyList.filter((key) => !cacheKeepList.includes(key)) const cachesToDelete = keyList.filter((key) => !cacheKeepList.includes(key))
await Promise.all(cachesToDelete.map(deleteCache)) await Promise.all(cachesToDelete.map(deleteCache))
} }
// Enable navigation preload // Enable navigation preload
const enableNavigationPreload = async () => { const enableNavigationPreload = async () => {
if (self.registration.navigationPreload) { if (self.registration.navigationPreload) {
// Enable navigation preloads! // Enable navigation preloads!
await self.registration.navigationPreload.enable() await self.registration.navigationPreload.enable()
} }
} }
self.addEventListener('activate', (event) => { self.addEventListener('activate', (event) => {
event.waitUntil(Promise.all([deleteOldCaches(), enableNavigationPreload()])) event.waitUntil(Promise.all([deleteOldCaches(), enableNavigationPreload()]))
}) })
/**
* @param {RequestInfo | URL} request
* @param {Response} response
* @returns {Promise<void>}
*/
const putInCache = async (request, response) => { const putInCache = async (request, response) => {
const cache = await caches.open(VERSION) const cache = await caches.open(VERSION)
await cache.put(request, response) // try {
// response.headers.set('SW-Cached-At', new Date().toISOString())
// }
// catch {
const headers = new Headers(response.headers)
headers.set('SW-Cached-At', new Date().toISOString())
response = new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers,
})
// }
await cache.put(request, response)
} }
const cacheFirst = async ({ request, preloadResponsePromise, refreshAnyway }) => { const cacheFirst = async ({ request, preloadResponsePromise, refreshAnyway }) => {
// First try to get the resource from the cache // First try to get the resource from the cache
const responseFromCache = await caches.match(request) const responseFromCache = await caches.match(request)
if (responseFromCache) { if (responseFromCache) {
if (refreshAnyway) { if (refreshAnyway) {
console.log('request in cache, refreshing anyway but returning cache', request); console.log('[cf] using cache response; refreshing anyway but returning cache', responseFromCache);
((async () => { ((async () => {
try { try {
const response = await fetch(request) const response = await fetch(request)
if (response.ok) { if (response.ok) {
putInCache(request, response) await putInCache(request, response)
} }
} }
catch {} catch {}
})()) })())
} }
return responseFromCache else {
} console.log('[cf] using cache response', responseFromCache)
}
return responseFromCache
}
// Next try to use (and cache) the preloaded response, if it's there // Next try to use (and cache) the preloaded response, if it's there
if (preloadResponsePromise) { if (preloadResponsePromise) {
const preloadResponse = await preloadResponsePromise const preloadResponse = await preloadResponsePromise
if (preloadResponse && preloadResponse.ok) { if (preloadResponse && preloadResponse.ok) {
console.info('using preload response', preloadResponse) console.info('[cf] using preload response', preloadResponse)
putInCache(request, preloadResponse.clone()) await putInCache(request, preloadResponse.clone())
return preloadResponse return preloadResponse
} }
else { else {
console.log('got not ok preloadResponse, ignoring', preloadResponse) console.log('[cf] got not ok preloadResponse, ignoring', preloadResponse)
} }
} }
// Next try to get the resource from the network // Next try to get the resource from the network
const responseFromNetwork = await fetch(request) const responseFromNetwork = await fetch(request)
// response may be used only once // response may be used only once
// we need to save clone to put one copy in cache // we need to save clone to put one copy in cache
// and serve second one // and serve second one
if (responseFromNetwork.ok) { if (responseFromNetwork.ok) {
putInCache(request, responseFromNetwork.clone()) console.log('[cf] using network response; ok so also cache', responseFromNetwork)
} await putInCache(request, responseFromNetwork.clone())
return responseFromNetwork; }
else {
console.log('[cf] using network not ok response', responseFromNetwork)
}
return responseFromNetwork;
}
const networkFirst = async ({ request, preloadResponsePromise }) => {
// First try to use (and cache) the preloaded response, if it's there
if (preloadResponsePromise) {
const preloadResponse = await preloadResponsePromise
if (preloadResponse && preloadResponse.ok) {
console.info('[nf] using preload response', preloadResponse)
await putInCache(request, preloadResponse.clone())
return preloadResponse
}
else {
console.log('[nf] got not ok preloadResponse, ignoring', preloadResponse)
}
}
// Next try to get the resource from the network
let responseFromNetwork
let errorFromNetwork
try {
responseFromNetwork = await fetch(request)
}
catch (e) {
responseFromNetwork = null
errorFromNetwork = e
}
// If the response is ok, put it in cache and respond
if (responseFromNetwork && responseFromNetwork.ok) {
console.log('[nf] using ok network response', responseFromNetwork)
await putInCache(request, responseFromNetwork.clone())
return responseFromNetwork
}
// Response from network wasn't ok, try to find in cache
const responseFromCache = await caches.match(request)
if (responseFromCache) {
console.log('[nf] using cache response', responseFromCache)
return responseFromCache
}
// If we didn't find a cached response, return the fresh network error
if (responseFromNetwork) {
console.log('[nf] using network not ok response', responseFromNetwork)
return responseFromNetwork
}
else {
console.log('[nf] throwing network error', errorFromNetwork)
throw errorFromNetwork
}
} }
self.addEventListener('fetch', (event) => { self.addEventListener('fetch', (event) => {
event.respondWith( if (shouldReturnFromCacheFirst(event.request.url)) {
cacheFirst({ event.respondWith(
request: event.request, cacheFirst({
preloadResponsePromise: event.preloadResponse, request: event.request,
refreshAnyway: [API_STATIONS, API_TRAINS].includes(event.request.url.split('?')[0]), preloadResponsePromise: event.preloadResponse,
}) refreshAnyway: [API_STATIONS, API_TRAINS].includes(event.request.url.split('?')[0]),
) })
)
}
else {
event.respondWith(
networkFirst({
request: event.request,
preloadResponsePromise: event.preloadResponse,
})
)
}
}) })

54
view-train.js
View file

@ -1,4 +1,10 @@
/**
* @type {string}
*/
var trainNumber var trainNumber
/**
* @type {Date}
*/
var date var date
var groupIndex = null var groupIndex = null
@ -6,6 +12,9 @@ var yesterday = false
var showKm = false var showKm = false
var trainData = null var trainData = null
/**
* @type {?Date}
*/
var lastSuccessfulFetch = null var lastSuccessfulFetch = null
/** /**
@ -55,8 +64,9 @@ var lastSuccessfulFetch = null
/** /**
* @param {{ rank: string; number: string; operator: string; date: string; groups: Group[]; }} data * @param {{ rank: string; number: string; operator: string; date: string; groups: Group[]; }} data
* @param {?Date} fetchDate
*/ */
function onTrainData(data) { function onTrainData(data, fetchDate) {
var title = document.getElementById('title') var title = document.getElementById('title')
title.textContent = '' title.textContent = ''
title.appendChild(document.createTextNode('Train ')) title.appendChild(document.createTextNode('Train '))
@ -384,10 +394,14 @@ function onTrainData(data) {
} }
}) })
lastSuccessfulFetch = new Date() lastSuccessfulFetch = fetchDate || new Date()
} }
var refreshStopToken = null var refreshStopToken = null
/**
* @returns {Promise<boolean>}
*/
function refresh() { function refresh() {
function reschedule(timeout) { function reschedule(timeout) {
if (refreshStopToken != null) { if (refreshStopToken != null) {
@ -415,14 +429,25 @@ function refresh() {
reschedule(10000) reschedule(10000)
return return
} }
return response.json() var cacheDate = response.headers.get('SW-Cached-At')
return response.json().then(function (data) {
data['$cacheDate'] = cacheDate
return data
})
}).then(function (response) { }).then(function (response) {
if (!response) { if (!response) {
return return
} }
var cacheDate = response['$cacheDate']
if (cacheDate) {
cacheDate = new Date(cacheDate)
}
var success = !cacheDate
trainData = response trainData = response
onTrainData(response) onTrainData(response, cacheDate)
reschedule() // Check in 1 seconds if network error
reschedule(success ? undefined : 1000)
return success
}).catch(function (e) { }).catch(function (e) {
// Check in 1 second if network error // Check in 1 second if network error
reschedule(1000) reschedule(1000)
@ -437,7 +462,24 @@ window.addEventListener('unload', function (e) {
}) })
function rsk() { function rsk() {
refresh() function changeRskText(newText) {
document.querySelectorAll('.rsk').forEach(function (elem) {
elem.textContent = newText
})
}
changeRskText('Refreshing...')
refresh().catch(function () { return false}).then(function (success) {
if (!success) {
changeRskText('Refreshing failed')
setTimeout(function (_) {
changeRskText('Refresh')
}, 3000)
}
else {
changeRskText('Refresh')
}
})
} }
window.addEventListener('popstate', function (e) { window.addEventListener('popstate', function (e) {