Working with service worker for sync/push in DEV mode

[sebastien.roul]

Hi,

Our app (PWA) use SW for 3 purposes :

• Caching statics resources
• Push notifications to user
• Sync data with the server

For productivity reason we need to be able to have SW active for the 2 last points in DEV mode : How can we manage ?
Today, all the features working in PROD mode, but it’s not very efficient for debugging and adding new features on SYNC/PUSH…

As I’ll understand the way to do it, I could send a PR to the doc…

Working with Quasar 0.16

Thanks !

[rstoenescu]

The main problem with SW on dev mode is that it breaks HMR (Hot Module Reload) since SW caching would be in effect. If you find a clever way to make both SW and HMR happy, I’d be thrilled to integrate the solution.

[sebastien.roul]

@rstoenescu I will find a solution keep on touche !

[sebastien.roul]

@rstoenescu I read the code from quasar-cli and I think, the solution could be like this…

• Create (when generating app or whatever when) 2 other files in the src-pwa :

  • File one : push-service-worker.js : Which would be all in comment, but let the dev putting his code about listenning “push notification”
  • File two : sync-service-worker.js : Which would be all in comment, but let the dev putting his code about listenning “sync notification”

• In “dev mode”, quasar-cli answer automatically to the GET service-worker.js with the no-op template : Perfect ! Just add the content of the two files above to the response

• In “prod mode”, quasar-cli building the service-worker.js depending of options (params), let’s do the same and add the content of the two files above at the end of the file

In a perfect world, user could define, in the quasar.conf.js 2 settings under the [pwa] section :

• usePushServiceWorker : true/false | To add the push part to the generated SW
• useSyncServiceWorker : true/false | To add the sync part to the generated SW

I tried to make it work, but running Quasar-CLI on my PC was not so easy…

Best regards

[Al1_andre]

@sebastien-roul +1 for this solution. I try to create a PWA and it’s a little complicate for someone not having a huge background in PWA things. Actually my main difficulty is to deploy the created PWA and to be able to install it on a smartphone. I have no idea how to add Sync and Push service and Google Audits tells me my app does not register a service worker.
@rstoenescu I think a PWA dedicated howto should be really appreciated.