search

vuejs-templates / pwa

PWA template for vue-cli based on the webpack template
MIT License
3.04k stars 506 forks source link

Missing vendor.js files #156

Closed nwaughachukwuma closed 6 years ago

nwaughachukwuma commented 6 years ago

@jeffposnick , @addyosmani, @MaxMilton and everyone, my app is doing great offline thanks to this awesome template. I am really delighted about the template. But there's a little challenge. Whenever I try to visit the app after a period of inactivity, I get a blank screen (image below), and on chrome debugger, I see that it could not fetch the hashed vendor.js file. Also the vendor.js file is missing in the list of js files in the frames. And it shows an error reading the manifest.js file. This is like what is left for me to have a complete offline application. I am hoping there's a fix for this. Thanks

blank_screen loses_files image

maxmilton commented 6 years ago

Does this happen even with a freshly install project using this template?

nwaughachukwuma commented 6 years ago

@MaxMilton I have not inspected it. Will do that soon enough. But what do you think the problem might be

jeffposnick commented 6 years ago
nwaughachukwuma commented 6 years ago

Hi @jeffposnick, thanks for quick reply. I will give my answer in the order you have asked them:

  1. You can access the platform here: https://dashboards.dprsconnect.org.ng/ All you need to do is revisit the platform after a period of inactivity, don't know how to quantify this really. But say you put off your internet, and hibernate your system or put in sleep mode for a while. When you put it back on, revisit the URL with the internet off. That might reproduce it.

  2. No, this is not the situation. I had it deployed once and didn't redeploy in between visits.

  3. I didn't see the corresponding js File. However it is generated in the dist folder. Please check following link to see the full content of the generated service worker file: https://pastebin.com/Ck3AvhZn.

I hope my response is detailed enough. Thanks so much

jeffposnick commented 6 years ago

image

The problem is that your vendor bundle is 7.5 megabytes, and by default sw-precache won't cache anything larger than 2 megabytes. So your vendor bundle isn't available offline. And then when you immediately visit your web app right after waking up a system from sleep, you're effectively offline (if you reload quickly enough, before your WiFi connection has reestablished). I could simulate the same error just by forcing offline mode in Chrome's DevTools and then reloading the page.

You've got a few options:

  1. Don't do anything, and accept the fact that your vendor bundle won't be available offline and there might be versioning mismatches when you redeploy your site.
  2. Increase the value of the maximumFileSizeToCacheInBytes config option that's passed to the SWPrecacheWebpackPlugin config.
  3. Reduce the size of your vendor bundle, by breaking it down into multiple, smaller bundles or (preferably!) removing unused third part code. A tool like https://www.npmjs.com/package/webpack-bundle-analyzer can help there.

I'd strongly suggestion that you go with the third option, since your users will really benefit from having to download and parse less JavaScript.

nwaughachukwuma commented 6 years ago

Thanks so much @jeffposnick your response is really helpful. What I have done is remove certain unnecessary dependencies, thus reducing the vendor.js file size to about 2 mb. And it's working perfectly now. Really grateful for this help. Thanks also @MaxMilton

nwaughachukwuma commented 6 years ago

Hi @jeffposnick I have noticed that running my application over https://dashboards.dprsconnect.org.ng/ still gives me over 7mb but same application over https://dhis2-daily-reporting.firebaseapp.com gives me <2mb. What could be responsible for this? As the consequence is that the former takes long to load than the later, and the behavior is also funny.

Mind you I havehad to adopt the option of increasing maximumFileSizeToCacheInBytes to about 10mb just to accommodate this behavior.