SW not serving precached files

[0xd61]

Describe the bug
The serviceworker does not serve cached files because of a missing "/" in the filenames of the cached-variable

Logs

To Reproduce
Run npx degit "sveltejs/sapper-template#rollup" my-app and set a breakpoint in the serviceworker.

Expected behavior
The serviceworker should find the cached files and return them.

Information about your Sapper Installation:

• Your browser and the version: Chromium Version 81.0.4044.138 (Developer Build) (64-bit)

• Your operating system: Voidlinux Kernel 5.4.40_1

• Sapper version 0.27.13

• Svelte version 3.22.3

• Whether your application uses Webpack or Rollup: Happens with both templates.

Severity
annoying

Workaround
My current workaround is to prepend a "/" for the filenames in the cached variable:

// `shell` is an array of all the files generated by the bundler,
// `files` is an array of everything in the `static` directory
const to_cache = shell.concat(files);
//const cached = new Set(to_cache);
const cached = new Set(to_cache.map(filename => `/${filename}`));

[antony]

I was able to reproduce this using the steps above, thanks!

[antony]

Right, so it looks like we can do one of two things here:

• in Sapper, prefix cached files with a slash
• In the service-worker, we can remove the slash when we look up the cache key.

As to which is the right approach, I don't know. Anybody know more about service-workers than me?

[0xd61]

I would suggest to do the first approach because this is done during compile time.

[benmccann]

I don't know much about service workers, but I think that either way is fine as long as we're consistent.

With slash

Would make it easy to just do a direct lookup on url.pathname
Code to modify:

sapper/src/core/create_app.ts

Line 41 in b80346e

export function create_serviceworker_manifest({ manifest_data, output, client_files, static_files }: {

Without slash

At first I was going to suggest that it's probably better performance to omit the slash because service-worker.js contains a list of every static file on the site and you'd be adding an extra character for each file that would need to be transferred over the network. But actually, once gzipped I don't think there's any difference at all (except for one character in the compression dictionary). So I guess I'd lean towards adding the slash.

[benmccann]

For what it's worth, Google and Mozilla both have a leading slash in their documentation:

https://developers.google.com/web/fundamentals/primers/service-workers#install_a_service_worker
https://developer.mozilla.org/en-US/docs/Web/API/Cache/addAll

[0xd61]

Actually I don't think there is a significant performance difference between the two approaches for "normal" sized web apps.
However, we could add the slash when we load the SW (see my workaround above). Then we do not have to send the character and we still can do the direct lookup.

[benmccann]

I still think it's cleaner to have the compiler do it. Then it's less code that the user has to be aware of in the service worker