feat(workbox): workbox 3 + offlinePage #60

manniL · 2018-04-04T11:58:50Z

Workbox has released version 3, so we could upgrade to v3 as well. But there are some obstacles.

In version 3, there is no WorkboxSW class anymore. workbox is exposed as a global variable instead (see the Migration Guide). The problem is that workbox is always undefined when compiling the sw.template.js lodash template.

+ Use global variable instead of class instance + Update methods + Add cleanUrls property

manniL · 2018-07-14T22:42:00Z

Unfortunately I don't know how to proceed further :( Hope if someone could give it a go and take over from here.

XanderLuciano · 2018-07-20T20:47:42Z

Just doing some preliminary research currently, but looks like vue-cli has a work in progress PWA with workbox 3. May be worth looking at the implementation there: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

monotykamary · 2018-07-21T21:53:04Z

packages/workbox/templates/sw.template.js


 <% options.runtimeCaching.forEach(r => {
  const strategy = JSON.stringify(r.strategyOptions || {})
  %>
-workboxSW.router.registerRoute(new RegExp('<%= r.urlPattern %>'), workboxSW.strategies.<%= r.handler %>(<%= strategy %>), '<%= r.method %>')
+workbox.routing.registerRoute(new RegExp('<%= r.urlPattern %>'), workboxSW.strategies.<%= r.handler %>(<%= strategy %>), '<%= r.method %>')


Should workboxSW.strategies be workbox.strategies?

Thanks, will fix!

monotykamary · 2018-07-21T23:37:53Z

I think it might be related to the path of the workbox-sw asset.

jsdelivr reflects the path for v2:

/build/importScripts/workbox-sw.prod.v2.1.3.min.js

and for v3:

/build/workbox-sw.min.js

manniL · 2018-07-22T10:01:44Z

Thanks to @XanderLuciano and @monotykamary for helping out ☺️

Looks like the ball is rolling again 🙊

manniL · 2018-07-22T10:04:37Z

This looks somewhat ready. Will do some tests with a real-world project of mine and report back and soon as I have the results ☺️

manniL · 2018-07-22T10:26:05Z

LGTM so far.

cc @pi0 for cross-validation and review :)

XanderLuciano · 2018-07-23T03:42:10Z

Took me a bit to figure out how to install your changes locally but eventually figured it out and it seems to be working just fine on my project also!

manniL · 2018-07-23T10:12:49Z

@XanderLuciano Happy to hear that!

The only thing I'm experiencing is that workbox is still used in dev mode/ on localhost, which results in an endless loop where workbox and the webpack HMR are fighting and reloading the page every few seconds. A hard refresh (CTRL + F5) does stop it though.

~~It only happens when using Firefox. 🦊~~ Happens on FF and Chrome, as the sw.js is cached

Possibly related: #75 #63

XanderLuciano · 2018-07-23T11:15:08Z

@manniL I swear I had not run into this issue all night, but as soon as I saw your comment it happened.

It seems a bit like an edge case for me though because in dev mode if I remove the service worker a new one isn't registered. So I was only able to reproduce by building and starting the app, then stopping the server and starting a dev instance, and then updating some code that triggers the HMR.

Like you said though, a quick ctrl+shift+r / ctrl + F5 fixed it.

I'm gunna continue development using this version so if I run into additional issues (or a solution to the HMR reloading) I'll let you know.

XanderLuciano · 2018-07-23T21:42:44Z

Struggled to get offline support functional, but eventually figured it out.

workbox: {
    runtimeCaching: [
        // Needed to cache the homepage and manifest file (not 100% sure on that though)
        {
            urlPattern: '/.*',
            handler: 'networkFirst',
            method: 'GET',
        },
        // Cache our CDN libraries
        {
            urlPattern: 'https://cdnjs.cloudflare.com/ajax/libs/.*',
            handler: 'cacheFirst',
            method: 'GET',
        },
        // Cache our fonts
        {
            urlPattern: 'https://fonts.(?:googleapis|gstatic).com/(.*)',
            strategyOptions: {
                cacheName: 'google-fonts',
            },
        },
    ],
},

Would it make sense to add that pattern to the template also? We already cache everything in /_nuxt/, but /.* would try to cache quite a bit more.

Update: Looking good ✨

manniL · 2018-07-25T11:01:08Z

I've investigated the "update issue" and I've likely tracked it down. It is, as I assumed, a caching issue, so #75 should definitely be merged in before updating. After clearing my cache for localhost, everything worked well :)

XanderLuciano · 2018-07-25T22:56:12Z

@manniL Oh awesome! So merging #75 into my custom build of this PR should fix the issues with HMR? Have you tested offline usage with the server worker's cache disabled?

manniL · 2018-08-04T17:19:53Z

There are some caveats left when specifying own precaching but it shouldn't be hard to fix ☺️ (workbox now calls 'plugins', but this is a thing we can setup dynamically quite good)

Really want to add some tests to it too later.

XanderLuciano · 2018-08-07T12:55:32Z

Well it took me 2 weeks to figure out how to create my own personal build of this package with all the PR's I wanted, but now I've got that all setup under my own personal scope (since it's taking so long to get any PR's to this repo).

That said, I included #75 in that build and still get stuck in a reload loop when going from a built instance to a dev instance with hot reloading. So as you said, there are still some caveats to work out.

For example, going from built version to dev, upon triggering an HMR the server console will output a loop of errors such as:

{
  statusCode: 404,
  path: '/_nuxt/55d3a1e8f0e84963b002.hot-update.json',
  message: 'This page could not be found'
}

And upon going from a dev instance to a built server instance, there appears to be an HMR request that continues to try and update, even though it's a production build:

So it seems to me that the overly broad URL pattern of /.* may be a little too broad and causing the service worker to cache these files. Potentially might be worth excluding files with hot-update in their name?

Maybe another solution to this would be to disable (or change) precaching on development builds. That way when you you run npm run dev HMR works as expected and workbox doesn't interfere, but running npm run build && npm run start allows you test offline mode and your service worker properly.

I'm still learning a lot about workbox, but so far I've had no issues running this in a production environment. Add to homescreen banners appearing properly too.

Edit: Now workbox isn't loading at all under dev, which is great because now I don't have the HMR issue, but not sure what triggered the change.

XanderLuciano · 2018-08-08T05:23:00Z

Alternatively, this button is super handy. It disables the service worker's cache and seems to fix all the reload looping.

galvez · 2018-08-17T20:28:08Z

@manniL @XanderLuciano anything else you'd like to get in before I merge this? I'll give it a round of testing tonight.

manniL · 2018-08-17T20:29:45Z

@galvez I’d wait until we fixed the plugin thing I mentioned above. Otherwise custom strategies are hard to accomplish. Testing is happily seen! 😋

galvez · 2018-08-17T20:33:13Z

@manniL I'm gonna dabble at fixing that problem, do you have any WIP updates to this branch?

manniL · 2018-08-17T20:40:37Z

@galvez Nope, have no WIP there yet :/

galvez · 2018-08-17T20:47:36Z

@manniL no worries -- picking this up on the feature/workbox-v3 branch :)

manniL · 2018-08-24T09:34:35Z

We should adopt the changes for workbox-strategies plugins as well. (see here)

galvez · 2018-08-24T09:39:37Z

We should adopt the changes for workbox-strategies plugins as well. (see here)

As I have pointed out over Discord, we're not using any of the features that require updating.

Co-authored-by: manniL <hello@lichter.io> Co-authored-by: galvez <jonasgalvez@gmail.com>"

manniL · 2018-08-24T13:41:51Z

@galvez Well, we do use the feature as we enable customization of strategies (fka. as runtime-caching) by the user.

pwa-module/packages/workbox/templates/sw.template.js

Lines 11 to 15 in ef670b8

    
           options.runtimeCaching.forEach(r => { 
        
             const strategy = JSON.stringify(r.strategyOptions || {}) 
        
           %> 
        
           workbox.routing.registerRoute(new RegExp('<%= r.urlPattern %>'), workbox.strategies.<%= r.handler %>(<%= strategy %>), '<%= r.method %>') 
        
           <% }) %>

Formerly you could pass the options as a simple object

{
  cacheExpiration: {maxEntries: 50}
}

but now you have to use plugins where the initial workbox object has to be called.

plugins: [
    new workbox.expiration.Plugin({maxEntries: 50})
  ]

(from the example linked above)

manniL added 2 commits April 4, 2018 13:18

Update workbox version

71fd73e

Migrate as far as possible

5d6da43

+ Use global variable instead of class instance + Update methods + Add cleanUrls property

manniL mentioned this pull request Apr 4, 2018

feat(workbox): offline analytics #55

Closed

manniL mentioned this pull request Jul 13, 2018

Upgrade workbox version on pwa-module #72

Closed

monotykamary suggested changes Jul 21, 2018

View reviewed changes

manniL added 2 commits July 22, 2018 12:03

fix: typos

ad667f6

chore: update workbox-build

d7f76b1

chore: improve code layout

be984d7

manniL changed the title ~~[WIP] Update workbox to version 3~~ Update workbox to version 3 Jul 22, 2018

Merge branch 'master' into feature-update-workbox

fbe94c3

Fix staleWhileRevalidate ref

d1f29b0

pi0 mentioned this pull request Aug 24, 2018

feat: enable to set skipWaiting for workbox #80

Merged

galvez added 13 commits August 24, 2018 04:17

Fix refs

f3bf70e

Debugging offlinePage

0e1b9a8

Precache offlinePage

d0cc8ac

Precache offlinePage (2)

b202189

Offline page tweaks

e3b1113

Offline page tweaks (2)

6a4dad5

Offline page tweaks (3)

c673017

Offline page tweaks (4)

cfb72d4

Offline page tweaks (5)

f9c2e75

Offline page tweaks (6)

3973c0e

Offline page tweaks (7)

1d6d212

Offline page tweaks (8)

4ba6913

Offline page tweaks (9)

e6a7e78

pi0 changed the title ~~[WIP] Update workbox to version 3~~ [wip] feat(workbox): workbox 3 + offlinePage Aug 24, 2018

galvez added 3 commits August 24, 2018 06:17

Offline page tweaks (10)

b8e2cf0

Offline page tweaks (11)

469ff25

Update docs

b2bb50c

galvez changed the title ~~[wip] feat(workbox): workbox 3 + offlinePage~~ feat(workbox): workbox 3 + offlinePage Aug 24, 2018

Add note to docs

663651e

galvez merged commit 51e2938 into nuxt-community:master Aug 24, 2018

manniL deleted the feature-update-workbox branch August 24, 2018 09:55

pi0 pushed a commit that referenced this pull request Aug 24, 2018

feat(workbox): workbox 3 + offlinePage (#60)

fa790e5

Co-authored-by: manniL <hello@lichter.io> Co-authored-by: galvez <jonasgalvez@gmail.com>"

pi0 pushed a commit that referenced this pull request Aug 24, 2018

feat(workbox): workbox 3 + offlinePage (#60)

0fef874

Co-authored-by: manniL <hello@lichter.io> Co-authored-by: galvez <jonasgalvez@gmail.com>"

This was referenced Sep 1, 2018

safari: infinite loop when hot reloading nuxt/nuxt#3828

Closed

Hot Reload make page not load anything till restart of server #88

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(workbox): workbox 3 + offlinePage #60

feat(workbox): workbox 3 + offlinePage #60

manniL commented Apr 4, 2018

manniL commented Jul 14, 2018

XanderLuciano commented Jul 20, 2018

monotykamary Jul 21, 2018

manniL Jul 22, 2018

monotykamary commented Jul 21, 2018

manniL commented Jul 22, 2018

manniL commented Jul 22, 2018

manniL commented Jul 22, 2018

XanderLuciano commented Jul 23, 2018

manniL commented Jul 23, 2018 •

edited

Loading

XanderLuciano commented Jul 23, 2018

XanderLuciano commented Jul 23, 2018 •

edited

Loading

manniL commented Jul 25, 2018 •

edited

Loading

XanderLuciano commented Jul 25, 2018

manniL commented Aug 4, 2018

XanderLuciano commented Aug 7, 2018 •

edited

Loading

XanderLuciano commented Aug 8, 2018

galvez commented Aug 17, 2018

manniL commented Aug 17, 2018

galvez commented Aug 17, 2018

manniL commented Aug 17, 2018

galvez commented Aug 17, 2018

manniL commented Aug 24, 2018

galvez commented Aug 24, 2018

manniL commented Aug 24, 2018

feat(workbox): workbox 3 + offlinePage #60

feat(workbox): workbox 3 + offlinePage #60

Conversation

manniL commented Apr 4, 2018

manniL commented Jul 14, 2018

XanderLuciano commented Jul 20, 2018

monotykamary Jul 21, 2018

Choose a reason for hiding this comment

manniL Jul 22, 2018

Choose a reason for hiding this comment

monotykamary commented Jul 21, 2018

manniL commented Jul 22, 2018

manniL commented Jul 22, 2018

manniL commented Jul 22, 2018

XanderLuciano commented Jul 23, 2018

manniL commented Jul 23, 2018 • edited Loading

XanderLuciano commented Jul 23, 2018

XanderLuciano commented Jul 23, 2018 • edited Loading

manniL commented Jul 25, 2018 • edited Loading

XanderLuciano commented Jul 25, 2018

manniL commented Aug 4, 2018

XanderLuciano commented Aug 7, 2018 • edited Loading

XanderLuciano commented Aug 8, 2018

galvez commented Aug 17, 2018

manniL commented Aug 17, 2018

galvez commented Aug 17, 2018

manniL commented Aug 17, 2018

galvez commented Aug 17, 2018

manniL commented Aug 24, 2018

galvez commented Aug 24, 2018

manniL commented Aug 24, 2018

manniL commented Jul 23, 2018 •

edited

Loading

XanderLuciano commented Jul 23, 2018 •

edited

Loading

manniL commented Jul 25, 2018 •

edited

Loading

XanderLuciano commented Aug 7, 2018 •

edited

Loading