/index.html doesn't contain any <script>, breaks ServiceWorker

[nolanlawson]

Steps to repro:

git clone https://github.com/sveltejs/sapper-template # commit 9c3c45a as of today
cd sapper-template
npm i
npm run build
npm start
curl -sL 'http://localhost:3000/index.html' # doesn't contain any <script>s

It seems localhost:3000/ contains the correct <script>, but localhost:3000/index.html does not. Unfortunately this means the ServiceWorker caches the incorrect index.html file, and thus the app breaks when you reload it.

[nolanlawson]

I resolved this manually with the following changes to app/service-worker.js:

const toCache = shell.concat(assets)
  .concat(['/']) // fetch the home page and cache it immediately

And then:

if (url.origin === self.origin && 
    routes.find(route => route.pattern.test(url.pathname))) {
  return caches.match('/')
}

Whether this should be added to sapper-template is up for grabs. But I think at best this comment is misleading and should maybe be removed. If you uncomment it, it doesn't actually work AFAICT. (But the above modifications do.)

[nolanlawson]

I have taken another look at this issue. Now the issue is that neither sapper build nor sapper export actually creates an index.html file, so it 404s. That means that this comment is still misleading, as uncommenting that block of code results in a broken app because the Service Worker can't actually serve a shell index.html file.

I'll keep looking into this, but it probably needs a new issue since this issue doesn't describe the problem.