Service worker doesn't precache content

fnoop commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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

jrappen commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

A few links that might help:

jrappen commented 6 years ago

@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 commented 6 years ago

@fnoop Did my solution work for you?

fnoop commented 6 years ago

@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?

jrappen commented 6 years ago

@fnoop I assume your issue is fixed temporarily with the work-around I provided?

fnoop commented 6 years ago

@jrappen No, the problem isn't fixed at all. Your changes to the sw.js don't have anything to do with the content, which is the main problem. I'll try and dig into this over the next few days, but I suspect it will involve either explicitly stating all content pages required to be offline and running them through a pre-cache, or automatically building a tree from the markup and cacheing everything, or adopting an access-and-cache policy.

trusktr commented 4 years ago

I think this would be a non-breaking change. Adding it to the 4.x project board. @fnoop thanks for the idea! I would be glad to review a PR if you're interested to add the feature.

I think also we should publish the service worker file so it is consumable, instead of having it embedded inside a documentation page.

docsifyjs / docsify