Workbox webpack plugin

[laurentpayot]

What kind of change does this PR introduce? (check at least one)

• [ ] Bugfix
• [x] Feature
• [ ] Code style update
• [x] Refactor
• [x] Build-related changes
• [ ] Other, please describe:

Does this PR introduce a breaking change? (check one)

• [ ] Yes
• [x] No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• [x] It's submitted to the dev branch and not the master branch (NO DEV BRANCH)
• [x] When resolving a specific issue, it's referenced in the PR's title (e.g. fix: #xxx[,#xxx], where "xxx" is the issue number)
• [x] It's been tested with all Quasar themes
• [x] It's been tested on a Cordova (iOS, Android) app
• [x] It's been tested on a Electron app
• [x] Any necessary documentation has been added or updated in the docs (for faster update click on "Suggest an edit on GitHub" at bottom of page) or explained in the PR's description.

If adding a new feature, the PR's description includes:

• [x] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information: Feature Request #14

[laurentpayot]

It's working fine for my app. Added runtimeCaching section for external sources caching syntax examples.

[rstoenescu]

Hi, Thanks for this. Since v0.15 is so close and it has a new architecture for the starter kit, it would be best to bring this in on the new architecture. But unfortunately there's no time left to get this into v0.15 and test it thoroughly. Will add it to next version (v1.0).

[laurentpayot]

I understand. No problem.

[rstoenescu]

I think it's more to it, since we need to adjust the service-worker (dev and prod) files too. They need to use the Workbox provided API.

[kevinmarrec]

When Workbox 3.0 will be official, won't it be easier to migrate actual "sw-precache-webpack-plugin" used by Quasar Framework PWA to the "Workbox webpack plugin" ?

See : https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-sw#from_the_sw-precache-webpack-plugin_to_the_workbox_webpack_plugin

If I want to do a PWA with Quasar now, what should I do then ? Wait for a release with Workbox or deal with sw-precache for a while and the new update Quasar-cli will be able to migrate it on his own ?

[laurentpayot]

A third option would be to wait for Quasar-CLI to use Vue CLI 3 (with workbox plugin) but only @rstoenescu knows if that will happen some day…

[kevinmarrec]

My option seems easier to implement and btw if we want the feature quick, but the best (for me) is the option you mentioned, as far as we need to be updated with the last official Vue CLI, even if it makes ages (@rstoenescu said "Will add it to next version (v1.0)", but we've still no news since about 2 months and I'm not really aware about when this 1.0 version will be released).

[laurentpayot]

@kevinmarrec When I made this PR 4 months ago GenerateSW didn't exist, but "your" option is the same as mine: updating the PWA template with the webpack workbox plugin. All the remarks made by @rstoenescu remain valid.

[kevinmarrec]

@laurentpayot Okay ! I didn't look deep at what was existing 4 months ago and what exists now, but all we can do for now is wait, I guess !

[laurentpayot]

@kevinmarrec I think that with Quasar 0.15+ you can use the extendWebpack function of quasar.conf.js to remove the old sw-precache plugins from the webpack config object and replace it with the workbox plugin. I will try.

[kevinmarrec]

@laurentpayot Ok cool ! Please forward your changes/code if you succeed to make it working :)

[laurentpayot]

@kevinmarrec I had a look and with Quasar 0.15+ new starter kit PWA mode is much more than a webpack plugin added to the config. So yes for now all we have to do is to wait...

[kevinmarrec]

@laurentpayot Ok, thanks for your feedback !

Have you any advices to get started with Service Workers using Quasar PWA, considering all we talked about ? I mean should I use pw-precache for now and then migrate myself to Workbox then ?

I do not know how long will it take to get Workbox there, so... All I know : It's on the roadmap (I got a reply on Yesterday Quasar Release Tweet's).

[laurentpayot]

@kevinmarrec good to know it's on the roadmap! I just created this feature request: https://github.com/quasarframework/quasar-starter-kit/issues/36

sw-precache is working fine, you can go right now with Quasar pwa mode.

[kevinmarrec]

@laurentpayot Ok !

Have you any websites which may references sw-precache API better than the Official GitHub's one ? I'll give it a try