Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a Service Worker and an offline page #234

Open
wants to merge 5 commits into
base: master
from

Conversation

Projects
None yet
5 participants
@chrisfinazzo
Copy link

chrisfinazzo commented Apr 24, 2018

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

This comment has been minimized.

Copy link
Member

pathawks commented Apr 24, 2018

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

@chrisfinazzo

This comment has been minimized.

Copy link
Author

chrisfinazzo commented Apr 24, 2018

@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

This comment has been minimized.

Copy link
Member

DirtyF commented Apr 24, 2018

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

This comment has been minimized.

Copy link
Member

DirtyF commented Apr 24, 2018

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

@DirtyF

This comment has been minimized.

Copy link
Member

DirtyF commented Apr 24, 2018

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

@DirtyF DirtyF added this to the 3.0 milestone Apr 24, 2018

@DirtyF DirtyF added the feature label Apr 24, 2018

@chrisfinazzo

This comment has been minimized.

Copy link
Author

chrisfinazzo commented Apr 25, 2018

@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

This comment has been minimized.

Copy link
Member

DirtyF commented Apr 25, 2018

@chrisfinazzo I was thinking of something like:

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

@chrisfinazzo

This comment has been minimized.

Copy link
Author

chrisfinazzo commented Apr 25, 2018

@DirtyF Ah, I see now. Will update.

@chrisfinazzo chrisfinazzo referenced this pull request May 23, 2018

Closed

Jekyll 4.0 Ideas #6948

@ashawley

This comment has been minimized.

Copy link
Contributor

ashawley commented Dec 27, 2018

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?
Show resolved Hide resolved sw.js
Show resolved Hide resolved sw.js Outdated
@chrisfinazzo

This comment has been minimized.

Copy link
Author

chrisfinazzo commented Dec 27, 2018

@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

This comment has been minimized.

Copy link
Author

chrisfinazzo commented Dec 27, 2018

  1. 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

This comment has been minimized.

Copy link
Contributor

ashawley commented Feb 9, 2019

I had suggested:

  1. 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.

  1. 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.