One of the core features of WildRank is that the app should be fully offline compatible. A problem I discovered while using version 1 at the various competitions this year is how do you update an out of date installation while offline?
Offline PWAs use CacheStorage to add new files to the browser's cache when they are fetched using function add(), addAll(), and put(). These functions normally take a URL and or a Response to cache away an actual response from the web server. But this is not possible if the application is offline and the server is not present.
WildRank imports app offline updates via a zip archive. When opened the files in the zip are represented as a Blob which are effectively JS representations of files. Luckily, a Response can be manually constructed around a Blob. But the Blob alone won't tell the browser enough about the file to pull it from the cache. Headers, just like those returned in a GET request, must also be present to describe the file. Content-Type, containing the mime-type of the file, and Content-Length containing the length in bytes of the file, must be in the header. Here is the completed example:
let cache = await caches.open('cache_name')
let content = new Blob()
let headers = new Headers()
headers.append('Content-Type', 'application/javascript')
headers.append('Content-Length', content.size)
let res = new Response(content, { statusText: 'OK', headers: headers })
cache.put(new URL('https://url/path/to/file'), res)
The WildRank implementation can be found here.