feat: add offline support

[Siemko]

Hi there, so basically I've seen #29 and thought of giving it a try. I used some basic service worker to cache everything on / route. Let me know if this is enough.

[Siemko]

All right, so the biggest problem with that is to wait for parcel to bundle the app and then generate service worker that will precache all the files. I will try to make it work.

[Siemko]

Ok, so client files in main directory are cached properly. I have to work out how to make it work with Netlify redirects to cache all the files for offline usage, because currently the state of PWA is that it doesn't serve the index.html from cache. I'll have a look at it later.

[Siemko]

Alright, so basically I've got it working. It needs some polishing (manifest icons are not loaded) and I've got one problem: URL without markup query works offline, but with markup query seems broken.

[Siemko]

I can happily confirm that offline veriosn is working properly.

[Siemko]

@smeijer can you have a look at that? I guess if it's not on the roadmap, it's less important, but I still did it.

[smeijer]

I'll check this tomorrow. As it's about bed time in my timezone.

I need to read into workbox, as I've never heard of it before.

And a quick look also makes me wonder if the chunks of javascript really need to be in those html files.

But that's just a quick 2 minute glimpse at the diff. I'll come back to you with a more complete response.

Again, thanks for contributing. Offline functionality wasn't added to roadmap.md, but it is definitely something great to have. Hence the issue.

[Siemko]

And a quick look also makes me wonder if the chunks of javascript really need to be in those html files.

The only part necessary is:

const sw = '/sw.js';
navigator.serviceWorker.register(sw)

the line with const is a trick to make parcel work with workbox-builder.

[smeijer]

@Siemko, sorry it took me so long.

I have a couple of questions/suggestions;

1. I think we should move the js code out of index.html into a service-worker.js. Just to clean it up.

2. Regarding this message:

   console.log(
     'New content is available and will be used when all ' +
     'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
   );
   

   Where does it come from? We're not using CRA? Can we also change that to a fancy "there is an update waiting, click here to reload" button?

3. When running npm run start, I'll get an error because there is no sw.js.

[Siemko]

1. I think we should move the js code out of index.html into a service-worker.js. Just to clean it up.

Agreed, I also included production env checking.

2. Regarding this message:

   console.log(
     'New content is available and will be used when all ' +
     'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
   );
   

   Where does it come from? We're not using CRA? Can we also change that to a fancy "there is an update waiting, click here to reload" button?

I have taken it out from CRA. :) Sure will add the fancy button or any other message.

3. When running npm run start, I'll get an error because there is no sw.js.

Yes, I forgot to include env checking.

Still working on that fancy alert/button thing. Can you tell me, how should it look?

[smeijer]

Can you tell me, how should it look?

This is how Google does it, what do you think?

Maybe we can use react-toastify for it? That would also allow us to show a toast for other actions (like copy to clipboard) later.

[Siemko]

@smeijer sorry for the late response, I gave it a shot, I put react-toastify there as suggested.

[smeijer]

@Siemko, I think it's looking great!

Few things though,

1. Can you provide me with instructions on how to test the "update available" toast? How do I trigger that "update"? 😇

2. Can we change the update message?

   - An update is ready!
   + A new version is available!

3. It only works for the root domain, and that's an issue. When the user goes to "https://testing-playground.com" it works, but when he is hitting refresh while he is editing a playground, it still results in ERR_INTERNET_DISCONNECTED. This is because the playground adds state in the query params: .com?markup=...

   Will it be possible to fix/support that?

I can't wait to have this branch merged. Great work! 😎

[Siemko]

@smeijer, thank you :)

1. Can you provide me with instructions on how to test the "update available" toast? How do I trigger that "update"? innocent

Uploading new version of built files (so, basically files with new hashes) will trigger the SW to update. It is based on "manifest", that is generated on each build.

So, basically it's available now!

2. Can we change the update message?

   - An update is ready!
   + A new version is available!

Done.

3. It only works for the root domain, and that's an issue. When the user goes to "https://testing-playground.com" it works, but when he is hitting refresh while he is editing a playground, it still results in ERR_INTERNET_DISCONNECTED. This is because the playground adds state in the query params: .com?markup=...
   Will it be possible to fix/support that?

I've solved that issue before, here's little PoC:

I can't wait to have this branch merged. Great work!

Me too 👍

[smeijer]

@Siemko thanks for this one! Awesome work.

I've:

• fixed a merge conflict in package.json (which I fucked up)
• removed a console.log statement
• added description, lang and orientation to the manifest
• fixed my fuckup

I hope you don't mind 😇

Again, thanks. This is really nice.

[Siemko]

Awesome, thank you @smeijer. Glad you put it up into work :)

[smeijer]

@all-contributors please add @Siemko for code

[allcontributors]

@smeijer

I've put up a pull request to add @Siemko! 🎉