Offline access about learnroadrunner HOT 12 CLOSED

After looking a bit into it, it looks like it should be super easy to make it a PWA and work offline with @vuepress/plugin-pwa.

from learnroadrunner.

This is a really neat idea! The vuepress pwa plugin actually looks very seamless! The @vuepress/plugin-pwa page seems to just imply that all you need to do is set install, set serviceWorker to true, and it'll simply start caching everything with a service worker? The only issue is that it seems to only cache rather than download ahead of time. Not entirely sure though. Would have to look into that. If that were the case, you'd have to visit every page to pre-populate the cache before going offline.

I will most definitely look into it when I have the time!

For the time being, you are able to get offline access if you clone and just run it locally. Since you're familiar with web dev.

from learnroadrunner.

Just curious, is there any update on this? I see there was a commit a couple days ago that added the plugin and stuff, but I don't see anything on the production site. I also see some changes that were commit and are on the production site. Is something maybe not working, or is it just not enabled or something? Again, I'm just curious about the state of this.

from learnroadrunner.

Honestly, no clue.
I assumed that the PWA plugin would enable offline cache via the service workers automatically with zero config but it doesn't seem to actually do anything?

from learnroadrunner.

Might just have to try and work on implementing offline caching via service workers from scratch.

from learnroadrunner.

From the Application tab of Inspect Elements, it gives the following errors:

• Manifest start URL is not valid
• No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.
• Downloaded icon was empty or corrupted

In addition to an error in the log:

• Error while trying to use the following icon from the Manifest: https://www.learnroadrunner.com/android-chrome-192x192.png (Download error or resource isn't a valid image)

To me, it looks like there is no start_url property in the manifest.json file as well as the icons in there don't have the /assets/favicons at the beginning. There might also be an issue with the service worker, but that may be an issue in the build process, which I haven't checked yet.

from learnroadrunner.

After pulling and making some small changes, it seems that making those 2 changes to the manifest.json file will fix 2 of the issues with installing. The last seems to be with the build process. According to this line:

  if (process.env.NODE_ENV === 'production' && !isServer && SW_ENABLED) {

it seems that the build process must be run with the NODE_ENV environment variable set to production. You could use the cross-env package to set environment variables in NPM scripts so that the build process always has that set. I haven't tested it because I don't have a static file server on my computer, but I think that should work.

Edit: after a bit more testing, it seems that the service worker is generated without explicitly NODE_ENV. Perhaps it was just those two other things that needed to be changed in the manifest.json file. Again, I don't have a static file server so I can't check, but from what it looks like, it seems that should fix it. If I wasn't clear on the changes that need to be made or if you need help, I can submit a PR with the changes.

from learnroadrunner.

Ah. I did not see the errors in the Application tab. Thank you so much for pointing that out!
I ignored the manifest icon error as I did not think it would cause any errors (favicons are ignored all the time). Apparently not!

I'll look into fixing the manifest!
The build process isn't an issue. Netlify (upon which LRR is hosted) automatically sets the environment variable.
Actually by seeing the error in the Application tab you can surmise that this isn't an issue.

from learnroadrunner.

I don't want to merge anything until it's tested but if you have (or I can) then I am happy to merge it! Or you can make a PR and I'll just make push commits to your PR if it doesn't work. Whatever works!

from learnroadrunner.

I created a PR (#21) with my changes. It looks like Netlify creates a preview site, so even though I can't test locally, it looks like it should be able to be tested there.

from learnroadrunner.

Checking the deployment, the service worker wasn't generated. It looks like there was an issue in the build process. I can test again on my machine. Perhaps a difference between the server and development environments?

Edit: On my end, it works with the exact same working tree. I think there is some difference between the deployment environment and my development environment...

Edit 2: Got a static file server and can confirm that the service worker works on my end. (Side note, it appears that it does download all files, including ones that the user has not gone to, so everything should work fine offline) Something to note is that I have Node version v15.3.0. I'll try with version v10.24.1, which is what Netlify uses.

Edit 3: It seems that it works even with version v10.24.1. Perhaps it is using an old cached version of node_modules that doesn't contain @vuepress/plugin-pwa?

from learnroadrunner.

Update since this seems to fix it: b45963e

the vue pwa plugin was in devDependencies in package.json which are not installed in production. This was my bad. Wish it errored properly though.

from learnroadrunner.