Repository: sveltejs/sapper

Issue #625: CSS chunks are not included in the service worker
Created: 2019-04-11T13:45:25Z
The few CSS chunks generated in the __sapper__/client directory are not registrated in __sapper__/service-worker.js, even if JS files are. As a result, some CSS files could be missing when the service worker is installed, and as a minor point they are saved in the sapper-template in the cache storage offlineTTT instead of cacheTTT.
My first research shows this information could be collected with the same information as in build.json file, I’m not sure if there is a better mean.

Duplicate issue #1112: service worker shell array missing .css files
Created: 2020-03-08T16:29:22Z
Describe the bug
The default implementation of src/service-worker.js imports the variable shell which is an array of .js files in the build/client directory that should be cached. I think the .css files in that same directory should also be in included in the shell array so they are also cached.
Logs
Please include browser console and server logs around the time this bug occurred.
The FetchEvent for "https://0c31914b.ngrok.io/client/index.51f34ae6.css" resulted in a network error response: the promise was rejected.
Promise.then (async)
(anonymous) @ service-worker.js:1
service-worker.js:1 Uncaught (in promise) TypeError: Failed to fetch
client.bfd9baf0.js:1 GET https://0c31914b.ngrok.io/client/index.51f34ae6.css net::ERR_FAILED

To Reproduce

Enter npx degit sveltejs/sapper-template#rollup sapper-pwa
Enter cd sapper-pwa
Enter npm install
Generate a self-signed certificate with the command
openssl req -newkey rsa:2048 -nodes -x509 -days 365 -keyout key.pem -out cert.pem
Change src/server.js to the following so the app is served using HTTPS:

const {createServer} = require('https');
const {readFileSync} = require('fs');

import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';

const {PORT, NODE_ENV} = process.env;
const dev = NODE_ENV === 'development';

const options = {
  key: readFileSync('key.pem'),
  cert: readFileSync('cert.pem')
};

const {handler} = polka().use(
  compression({threshold: 0}),
  sirv('static', {dev}),
  sapper.middleware()
);

createServer(options, handler).listen(PORT, err => {
  if (err) {
    console.error('error', err);
  } else {
    console.info('listening for HTTPS requests on', PORT);
  }
});

Enter npm run build.
Enter npm start.
Install ngrok at https://ngrok.com/ so we can hit a non-localhost URL using HTTPS.
Enter ngrok http https://localhost:3000.
Browse the "Forwarding" URL that begins with "https:", not the one that begins with "http:", in Chrome.
Open the Chrome devtools.
Click the "Application" tab.
Select "Service Workers" in the left nav.
Click the "Offline" checkbox to simulate being offline.
In the running app, click the "blog" link.
Note the error displayed in the devtools Console tab where it fails to retreive the .css file needed for this page.

Expected behavior
I expected the .css file for this page to have been cached so the page is usable when offline.
Information about your Sapper Installation:


Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10) Chrome Version 80.0.3987.132


Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc) macOS 10.15.1


Your hosting environment: (i.e. Local, GCP, AWS, Now, etc...) none


Sapper version (Please check you can reproduce the issue with the latest release!) 0.27.10


Svelte version (Please check you can reproduce the issue with the latest release!) 3.19.2


If it is an exported (npm run export) or dynamic application. - dynamic


Whether your application uses Webpack or Rollup - Rollup


Severity
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Sapper entirely?
I'm just trying to document how Sapper supports offline operation for my book, but it seems serious for apps that want to rely on this feature.

Closing comment (2020-08-28T21:54:34Z): Closing as a duplicate of #625