freedomotic / fd-vue-webapp

A Vue.js web application for Freedomotic Open IoT framework
http://fd-vue-webapp.herokuapp.com/
GNU Affero General Public License v3.0
65 stars 65 forks source link

Service worker introduction #177

Open ubaldop opened 5 years ago

ubaldop commented 5 years ago

As suggested by @rafmjr in #167 it would be useful to add a Service Worker to make the application a PWA.

mcicolella commented 5 years ago

We are using vue-onsenui for mobile and it supports PWA as reported here.

rafmjr commented 5 years ago

I'm planning to do an implementation of these three:

https://onsen.io/v2/guide/pwa/tutorial.html#service-worker https://developers.google.com/web/fundamentals/primers/service-workers/ https://developers.google.com/web/fundamentals/app-install-banners/

I would need to see which resources to cache on installation of the SW though.

rafmjr commented 5 years ago

I'm having troubles including with the webpack configuration. If I require the SW from src/main.js, the service worker is handled by webpack and its name is hashed. When registering the SW you need to specify the path of the file, but since this is generated, I can't provide the right path.

I tried including as static resource directly in index.html but then the file file is placed at /static/sw.js. This doesn't work, since the SW needs to be scoped at the very root so it can handle all the requests coming from /index.html

My knowledge of webpack is very basic, so I would appreciate any advice given. If not, is there any way I can place the at the same level of index.html?

Thank you very much for you help in advance.

amenak77 commented 5 years ago

Hi rafmjr, Take a look here. https://14islands.com/blog/2017/01/19/progressive-web-app-from-scratch/ Into "Caching strategy" where speaks about addressing a dynamic HTML page which changes address every time it runs

amenak77 commented 5 years ago

@rafmjr any news about the service worker?