Service worker doesn't precache content

[fnoop]

How do we add separate content pages to the service worker cache? Currently it works great for accessed pages/media, but not for pages that haven't been accessed.

[jrappen]

@fnoop The docs haven't been updated. You don't need the extra service-worker js file anymore. Compare the ./docs folder. For me everything works as expected.

[fnoop]

@jrappen Not sure what you mean by this - you need a service worker file to activate the service worker.

[jrappen]

Did you try what I suggested?

---

Compare:

• source: https://github.com/QingWei-Li/docsify/tree/master/docs
• output: https://docsify.js.org

where there is no extra service worker JavaScript file needed anymore, and the desired functionality works as expected. Maybe you need to update docsify on your end?

[fnoop]

@jrappen I don't mean to be rude, but do you know what service workers are?

There is still pwa page in the doc tree you reference:
https://github.com/QingWei-Li/docsify/blob/master/docs/pwa.md

But the service worker in this document cache's visited pages, but doesn't precache any content. This isn't very useful for an offline/pwa app - it needs to precache content, at least have the option to.

[jrappen]

I'm aware, yes.

As I said above, the docs haven't been updated in regards to the pwa and the functionality seems to be built in now. I'm not a JavaScript wizard and I do not understand all of the changes to this repo, but removing the service worker file that was needed with previous releases now makes the docs on my side available offline and precaches them.

What happens when you visit https://docsify.js.org, go offline and click through the pages? I assume everything works as expected on your side as well?

[fnoop]

Hi, if I go to docsify.js.org and turn off my wifi, I get 'not found' for every link in the sidebar I try to go to. If I turn wifi back on, the pages then load. If I turn my wifi off and then try to go to docsify.js.org in a new window/tab, I get the chrome dinosaur (There is no internet connection).

Using the service worker as prescribed in the pwa doc page works to a point. You can open a new window and browse to the prefetched site and you get the full docsify site as if you were online, which is really cool. But it doesn't provide a way to specify which pages to prefetch, it only prefetches those resources necessary for the docsify framework itself, not the content. Being able to reliably access a set of documentation offline - in the field - would be a really valuable feature for docsify.

Unless there's some other method it now uses that I can setup, like some clever local storage mechanism?

[jrappen]

Looking further into this I can partly reproduce your issue.

It didn't show up for me because in my own docs I only have one page and its translations:

./docs
    README.md
    /de-DE
        README.md

---

⚠️ What I found out so far while using the current docsify but NOT USING a pwa:

READMEs

It seems all README.md files in the ./docs root and any subfolder are loaded. This part works for me.

English docs

The other files in the ./docs root folder are sometimes loaded for me as well.

This part works for me on Waterfox (my default browser) and naturally on Firefox (which Waterfox is a fork from). It doesn't work on the Edge browser however.

Translated docs

Clicking links to any non-README files in the subfolders gives me the English translation from the root folder instead.

[jrappen]

A few links that might help:

• https://github.com/bstavroulakis/vue-wordpress-pwa
• https://github.com/GoogleChromeLabs/sw-precache
• https://github.com/Huxpro/mmpwa
• awesome lists:
  • https://github.com/hemanth/awesome-pwa
  • https://github.com/pazguille/offline-first

[jrappen]

@fnoop Reviewing the code I had when the sw.js was needed, I had the following changes in my sw.js file:

//  sw.js

const HOSTNAME_WHITELIST = [
  self.location.hostname,
  'assets-cdn.github.com',  //  <~~ images
  'raw.githubusercontent.com',  //  <~~ markdown source
  'fonts.gstatic.com',
  'fonts.googleapis.com',
  'unpkg.com'  //  <~~ importing docsify from the index.html
]

If you change your sw.js accordingly, does that help?

[jrappen]

@fnoop Did my solution work for you?

[fnoop]

@jrappen Sorry haven't had time to get back to this, will do asap. First of all, it's important to note that PWA allows true offline usage. If you don't use a service worker, your page/site won't load at all when you don't have network access.
Try turning off your internet/network, then going to your docsify site in your browser without a service worker. What do you see?