kbruen
/
kai.infotren
mirror of https://codeberg.org/kbruen/kai.infotren.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fix service worker cache, handle refresh better

master
Kenneth Bruen 2 years ago
parent
0827a1ec31
commit
9d4442de45
Signed by: kbruen
GPG Key ID: C1980A470C3EE5B1
2 changed files with 233 additions and 99 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 278
      sw.js
  2. 54
      view-train.js

278
sw.js
Unescape 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`
self.addEventListener('install', (event) => { const CACHE_FIRST = [
event.waitUntil( // Root
caches '/',
.open(VERSION)
.then((cache) => // Utility JS
cache.addAll([ '/common/worker.js',
// Root '/common/items.js',
'/', '/common/back.js',
'/common/tabs.js',
// Utility JS // Base
'/common/worker.js', '/base.css',
'/common/items.js',
'/common/back.js',
'/common/tabs.js',
// Base // Pages
'/base.css', '/index.html',
// Pages '/about.html',
'/index.html',
'/about.html', '/train.html',
'/train.js',
'/train.html', '/view-train.html',
'/train.js', '/view-train.js',
'/view-train.css',
'/view-train.html', '/station.html',
'/view-train.js', '/station.js',
'/view-train.css',
'/station.html', '/view-station.html',
'/station.js', '/view-station.js',
'/view-station.css',
'/view-station.html', // API
'/view-station.js', API_TRAINS,
'/view-station.css', API_STATIONS,
];
// API /**
API_TRAINS, * @param {string} url
API_STATIONS, * @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) => {
) event.waitUntil(
) caches
.open(VERSION)
.then((cache) =>
cache.addAll(CACHE_FIRST)
)
)
}) })
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)
}
// Next try to use (and cache) the preloaded response, if it's there return responseFromCache
if (preloadResponsePromise) { }
const preloadResponse = await preloadResponsePromise
if (preloadResponse && preloadResponse.ok) { // Next try to use (and cache) the preloaded response, if it's there
console.info('using preload response', preloadResponse) if (preloadResponsePromise) {
putInCache(request, preloadResponse.clone()) const preloadResponse = await preloadResponsePromise
return preloadResponse if (preloadResponse && preloadResponse.ok) {
} console.info('[cf] using preload response', preloadResponse)
else { await putInCache(request, preloadResponse.clone())
console.log('got not ok preloadResponse, ignoring', preloadResponse) return preloadResponse
} }
} else {
console.log('[cf] got not ok preloadResponse, ignoring', 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 // Next try to get the resource from the network
// and serve second one const responseFromNetwork = await fetch(request)
if (responseFromNetwork.ok) { // response may be used only once
putInCache(request, responseFromNetwork.clone()) // we need to save clone to put one copy in cache
} // and serve second one
return responseFromNetwork; if (responseFromNetwork.ok) {
console.log('[cf] using network response; ok so also cache', responseFromNetwork)
await putInCache(request, responseFromNetwork.clone())
}
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
Unescape 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) {

Write Preview
Loading…
Cancel
Save