Fix service worker cache, handle refresh better

sw.js

@@ -1,14 +1,9 @@
-const VERSION = 'v14'
+const VERSION = 'v15'
 const API_ORIGIN = 'https://scraper.infotren.dcdev.ro/'
 const API_TRAINS = `${API_ORIGIN}v3/trains`
 const API_STATIONS = `${API_ORIGIN}v3/stations`
 
-self.addEventListener('install', (event) => {
+const CACHE_FIRST = [
-  event.waitUntil(
-    caches
-      .open(VERSION)
-      .then((cache) =>
-        cache.addAll([
 	// Root
 	'/',
 
@@ -43,8 +38,22 @@ self.addEventListener('install', (event) => {
 	// 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) => {
+	event.waitUntil(
+		caches
+			.open(VERSION)
+			.then((cache) =>
+				cache.addAll(CACHE_FIRST)
 			)
 	)
 })
@@ -70,8 +79,25 @@ self.addEventListener('activate', (event) => {
 	event.waitUntil(Promise.all([deleteOldCaches(), enableNavigationPreload()]))
 })
 
+/**
+ * @param {RequestInfo | URL} request
+ * @param {Response} response
+ * @returns {Promise<void>}
+ */
 const putInCache = async (request, response) => {
 	const cache = await caches.open(VERSION)
+	// 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)
 }
 
@@ -80,17 +106,20 @@ const cacheFirst = async ({ request, preloadResponsePromise, refreshAnyway }) =>
 	const responseFromCache = await caches.match(request)
 	if (responseFromCache) {
 		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 () => {
 				try {
 					const response = await fetch(request)
 					if (response.ok) {
-            putInCache(request, response)
+						await putInCache(request, response)
 					}
 				}
 				catch {}
 			})())
 		}
+		else {
+			console.log('[cf] using cache response', responseFromCache)
+		}
 		return responseFromCache
 	}
 
@@ -98,12 +127,12 @@ const cacheFirst = async ({ request, preloadResponsePromise, refreshAnyway }) =>
 	if (preloadResponsePromise) {
 		const preloadResponse = await preloadResponsePromise
 		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
 		}
 		else {
-      console.log('got not ok preloadResponse, ignoring', preloadResponse)
+			console.log('[cf] got not ok preloadResponse, ignoring', preloadResponse)
 		}
 	}
 
@@ -113,12 +142,66 @@ const cacheFirst = async ({ request, preloadResponsePromise, refreshAnyway }) =>
 	// we need to save clone to put one copy in cache
 	// and serve second one
 	if (responseFromNetwork.ok) {
-    putInCache(request, responseFromNetwork.clone())
+		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) => {
+	if (shouldReturnFromCacheFirst(event.request.url)) {
 		event.respondWith(
 			cacheFirst({
 				request: event.request,
@@ -126,4 +209,13 @@ self.addEventListener('fetch', (event) => {
 				refreshAnyway: [API_STATIONS, API_TRAINS].includes(event.request.url.split('?')[0]),
 			})
 		)
+	}
+	else {
+		event.respondWith(
+			networkFirst({
+				request: event.request,
+				preloadResponsePromise: event.preloadResponse,
+			})
+		)
+	}
 })

view-train.js

@@ -1,4 +1,10 @@
+/**
+ * @type {string}
+ */
 var trainNumber
+/**
+ * @type {Date}
+ */
 var date
 var groupIndex = null
 
@@ -6,6 +12,9 @@ var yesterday = false
 var showKm = false
 
 var trainData = null
+/**
+ * @type {?Date}
+ */
 var lastSuccessfulFetch = null
 
 /**
@@ -55,8 +64,9 @@ var lastSuccessfulFetch = null
 
 /**
  * @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')
 	title.textContent = ''
 	title.appendChild(document.createTextNode('Train '))
@@ -384,10 +394,14 @@ function onTrainData(data) {
 		}
 	})
 
-	lastSuccessfulFetch = new Date()
+	lastSuccessfulFetch = fetchDate || new Date()
 }
 
 var refreshStopToken = null
+
+/**
+ * @returns {Promise<boolean>}
+ */
 function refresh() {
 	function reschedule(timeout) {
 		if (refreshStopToken != null) {
@@ -415,14 +429,25 @@ function refresh() {
 			reschedule(10000)
 			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) {
 		if (!response) {
 			return
 		}
+		var cacheDate = response['$cacheDate']
+		if (cacheDate) {
+			cacheDate = new Date(cacheDate)
+		}
+		var success = !cacheDate
 		trainData = response
-		onTrainData(response)
+		onTrainData(response, cacheDate)
-		reschedule()
+		// Check in 1 seconds if network error
+		reschedule(success ? undefined : 1000)
+		return success
 	}).catch(function (e) {
 		// Check in 1 second if network error
 		reschedule(1000)
@@ -437,7 +462,24 @@ window.addEventListener('unload', function (e) {
 })
 
 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) {