Add a Service Worker and an offline page

[chrisfinazzo]

Based on the discussion in #149, I took another crack at this. As the aim of Minima is to show what unmodified Jekyll looks like (E.g, jekyll start), I cached files based on the contents of lib/site_template.

For a 3.0 release (#145), this seems like a reasonable thing to include.

[pathawks]

I am not sure that this is in keeping with the spirit of having a minimal theme.

[chrisfinazzo]

@pathawks,

It probably isn't (in a strict sense), but this seems like a lighter-weight solution compared to using a module like Workbox. Although I've used that on a small site and it does the job well, it would require people to deal with NPM. That isn't difficult, but it is a bit heavy in terms of dependencies.

As previously mentioned, this is probably something for 3.0, so I'm happy to wait on this for a while.

[DirtyF]

Thanks @chrisfinazzo I'd really much like if we could provide a better user experience and allow offline browsing for minima. Shouldn't we add a timestamp to the staticCacheName here?

[DirtyF]

@chrisfinazzo we don't want any npm dependency to stay minimal. Thanks for using the native API.

[DirtyF]

Going offline by @adactio is out today, let's read it and make sure we have a solid strategy here 😉

[chrisfinazzo]

@DirtyF I read it this afternoon, so this was on my mind 😃.

To your point regarding a timestamp on the CacheName, if we update the version constant, that should cause a new registration. Perhaps we could do something like the following:

const version = 'v1';
const staticCacheName = version + 'minima';

To be honest, the section on caching is a bit dense, so I probably need to spend a bit more time thinking about what the right thing to do is.

[DirtyF]

@chrisfinazzo I was thinking of something like:

const staticCacheName = "version-{{site.time | date: '%Y%m%d%H%M%S'}}";

[chrisfinazzo]

@DirtyF Ah, I see now. Will update.

[ashawley]

This would be a nice addition. Thanks for working on adding it.

1. The offline.html is a useful template, but wouldn't be shipped with the gem-based theme.
2. The same for sw.js. It would need to be located in assets/js or some such.
3. Maybe call the file offline.js instead of sw.js?
4. If the service worker is added on every page, and the sw.js exists, but the offline.html does not, the service worker fetch will fail. This is a Javascript console error. Loading the site while offline will fail to load the offline page ⚡️, but the browser knows how to degrade gracefully to just a regular "This site can't be reached", so 👍.
5. It would be nice to have the offline page cache be configurable, but it seems like this should be a Jekyll plugin?

[chrisfinazzo]

@ashawley,

Thanks for the feedback. I have a branch in my local repo that has some of the changes you mentioned, I will review there and then add those to this PR.

[chrisfinazzo]

4. If the service worker is added on every page, and the sw.js exists, but the offline.html does not, the service worker fetch will fail. This is a Javascript console error. Loading the site while offline will fail to load the offline page ⚡️, but the browser knows how to degrade gracefully to just a regular "This site can't be reached", so 👍.

In GitHub Pages environments, the custom 404.html is used. In terms of fallbacks, it's not much work to modify an .htaccess or nginx.conf to point to it - if your host doesn't do this behind the scenes already.

[ashawley]

I had suggested:

2. The same for sw.js. It would need to be located in assets/js or some such.

According to Google's primer on Service Workers that wouldn't really work.

One subtlety with the register() method is the location of the service worker file. You'll notice in this case that the service worker file is at the root of the domain. This means that the service worker's scope will be the entire origin. In other words, this service worker will receive fetch events for everything on this domain. If we register the service worker file at /example/sw.js, then the service worker would only see fetch events for pages whose URL starts with /example/ (i.e. /example/page1/, /example/page2/).

It seems it would need to live at the root directory.

3. Maybe call the file offline.js instead of sw.js?

This name is cryptic, but I suppose it is the standard name for this kind of thing.