PWA offline mode not working

[rof20004]

I did a fresh install of a new project:

vue init pwa testingpwa
cd testingpwa
yarn

After that I generate the build for production:

npm run build

Then start that build using a local server:

cd dist
started my web server: http://localhost:8080

I access the app using Samsung Galaxy Tab 2 using the IP of my computer

http:10.10.10.10:8080

The web app opened and I added the application to Homescreen
After I go offline using airplane mode and try to open application using the icon on my homescreen.
The PWA not worked, It show offline. My browser is Google Chrome 58.0.3029.83

[Naramsim]

Are you browsing Google.com.br or your webapp?

[rof20004]

No, I get the screenshot in my pc because I do not know how to do this in mobile :D , I only wanna show the image tha appears. I am browsing my app, I used the google.com.br only to take screenshot.

[Naramsim]

Yep, maybe I've understood the issue, you browsed and are browsing from 10.0.0.1, but currently, this PWA is implemented to be tested only using 127.0.0.1/8 subnet

So you have to browse 127.0.0.1, turn off the Internet and reload, everything should work fine.

[rof20004]

But if I test with a mobile? I only can access using my IP address.

[rof20004]

If I remove this line in condition it will work?
(window.location.protocol === 'https:' || isLocalhost)

I will test here

[rof20004]

I tried and not worked, I need HTTPS?

[rof20004]

Well, I tried with https, on port 443, and not worked, I think that have a problem caching files, and in my PC browser always have many errors that can not fetch manifest.json and service-worker.js

[addyosmani]

You generally need to either be directly running off of localhost (whitelisted) or a domain with HTTPS setup in order for the Service Worker to successfully register.

I'm unsure about the specifics of the setup above, but if you're trying to test on mobile I'd recommend plugging your phone up to your system over USB and using DevTools remote debugging which will let you test your local version with SW correctly: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

[rof20004]

Well, I will waiting for #12 , because it apears to me and i will try again another day, but I think this is strange, I created a PWA that works offline, without vue, and it worked like I expected, doing the same tests here, I did it manually, maybe I miss something using with vue-cli. Thanks and regards everyone.

[eMerzh]

@addyosmani
sorry to dig up this old issue, but kinda have the same issue, not abble to make offile work...
not sure i do smth wrong...
what i did :

• init the vue pwa app with vue-cli
• add codes
• ran yarn dev
• then in network panel of devtool set offline
• reload
  and it fails

is there smth that i don't get ?

thanks

[JavaTheNutt]

@eMerzh Unless you modified your webpack config, offline shouldn't work in dev mode. You don't want assets to be cached while in development.

[hathemi]

is there a solution ???

[rof20004]

@hathemi Hi, I opened this issue years ago, now the vue-cli works perfect without this problem. May you need to open a new ticket with details of your problem.

My problem was solved doing this:

1. PWA only works with https.
2. service-worker.js needs no cache.

Regards.