Only caches visited routes #24

matthewpull · 2018-01-04T19:32:29Z

I've been playing around with the workbox component of the pwa module for a couple of days and have got it working with my hosting environment, but I seem to have a configuration problem.

For some reason only routes that I visit are being cached and then available offline. As far as I am concerned, this is not offline support as trying to navigate to other routes produces a browser error page.

This is strange, as in the sw.js file I can see that all of the nuxt js files for each route are being precached. However, trying to navigate to a route that I didn't visit while online gives the standard browser error (even though the corresponding nuxt js file is cached).

Is this the expected behaviour or is my configuration incorrect?

_{This question is available on Nuxt.js community (#c17)}

matthewpull · 2018-01-04T21:54:49Z

It is worth noting that I have my application set up as a single page app (SPA)

ahus1 · 2018-03-28T01:45:06Z

I experience the same situation with a generated nuxt site. I wonder if the pwa-module could pre-cache the 200.html and fallback to this file in offline mode.

AFAIK 200.html will either display the route if it exists, or show the custom error page if doesn't.

pi0 · 2018-04-02T20:20:38Z

#59 should fix it.

ahus1 · 2018-04-02T21:41:00Z

@pi0 - I looked at the PR and I don't think it fixes the issue described here:

With the PR #59 you can now disable runtime caching completely, so NO route is cached (only nuxt resources are cached).

I think what this issues needs is to have ALL available routes be part of the precache.

Therefore I vote for re-opening this issue.

…ty#59) Make all-inclusive NetworkFirst route registration optional. Fixes nuxt-community#24.

ahus1 · 2018-09-21T23:21:35Z

I tested this again and to me it seems that the behaviour changed in the latest releases and it seems that the issue is now resolved and can be closed.

Tested with: Nuxt 2.0.0 and @nuxtjs/pwa 2.6.0

The default behavior is now as follows:

all JS/CSS-contents of the _nuxt folder are precached as default

To make my app work fully in offline mode, I added the following:

pre-cache all images to ensure they are available offline as well
specify the fallback as the offline page for non-visited pages

My configuration now looks like this:

module.exports = {
  /* ... */
  workbox: {
    globPatterns: ['**/*.{js,css}', '**/img/*'],
    offlinePage: '/404.html'
  },
  generate: {
    fallback: true
  }
}

If you don't set fallback: true, you would use 200.html as the offline page I think (but I didn't test this). The version I tested pre-caches the offline page automatically as well.

When I test this, a page previously not visited will return the contents, as the Nuxt fallback page will display the correct contents. If the page does not exist, Nuxt will evaluate the routes and show the 404 page design.

galvez · 2018-09-21T23:41:54Z

@ahus1 You could also use the offlineAssets option but glad to see this example with globPattern working -- I hadn't used it like that before. I'll try and enhance this further soon.

pi0 · 2018-09-22T04:35:03Z

@ahus1 Happy to hear that it is finally working for you.😊 Enjoy coding and feel free opening new issues if you have observed any special problem.

micbra · 2020-05-13T12:34:24Z

@pi0 I'm afraid this issue has to be reopened 😥

In the latest version (3.0.0-beta.20) the generated sw.js looks like this:

importScripts('https://cdn.jsdelivr.net/npm/workbox-cdn@4.3.1/workbox/workbox-sw.js')

workbox.setConfig({
  "debug": false
})

workbox.core.clientsClaim()
workbox.core.skipWaiting()

workbox.precaching.cleanupOutdatedCaches()

workbox.routing.registerRoute(new RegExp('http://localhost:8000/api/public/.*'), new workbox.strategies.NetworkFirst ({}), 'GET')
workbox.routing.registerRoute(new RegExp('/_nuxt/'), new workbox.strategies.CacheFirst ({}), 'GET')
workbox.routing.registerRoute(new RegExp('/'), new workbox.strategies.NetworkFirst ({}), 'GET')

I downgraded the @nuxtjs/pwa module to version 2.6 to see the following sw.js has been generated:

importScripts('/_nuxt/workbox.4c4f5ca6.js')

workbox.precaching.precacheAndRoute([
  {
    "url": "/_nuxt/12a3dce2a6e949590390.js",
    "revision": "8ea362e53faf6466c89d4eac3f533e2a"
  }
  // ... (other fragments)
], {
  "cacheId": "my-app",
  "directoryIndex": "/",
  "cleanUrls": false
})

workbox.clientsClaim()
workbox.skipWaiting()

workbox.routing.registerRoute(new RegExp('/_nuxt/.*'), workbox.strategies.cacheFirst({}), 'GET')
workbox.routing.registerRoute(new RegExp('/.*'), workbox.strategies.networkFirst({}), 'GET')

workbox.routing.registerRoute(new RegExp('http://localhost:8000/api/public/.*'), workbox.strategies.networkFirst({}), 'GET')

So as you'd expect all routes are working offline in version 2.6 whereas in the latest version no precaching takes place and only the first route is cached on runtime.
The configuration for both cases is the same one:

workbox: {
    runtimeCaching: [
      { urlPattern: `${process.env.BACKEND_URL}/api/public/.*` }
    ]
}

gridsystem · 2020-05-22T14:41:52Z

I'm not sure if an issue I'm having is the same regression, but I have had to add the following workaround which seems contrary to the docs.

runtimeCaching: [
	{
        	urlPattern: '/*'
	},
        // then various CDNs
]

The relevant part of the docs.

offlinePage
(String) Enables routing all offline requests to the specified path. (Example: /offline.html)

Please note that enabling offlinePage will disable /.* caching (offline option) and will route all offline requests to the specified path.

Without the custom urlPattern, I do not see a /.* in sw.js. Instead I see

workbox.routing.registerRoute(new RegExp('/')...

I have not added an offlinePage. This implies that there is a missing default /.* rule?

igorjacauna · 2020-07-14T17:31:55Z

@pi0 I'm afraid this issue has to be reopened 😥

In the latest version (3.0.0-beta.20) the generated sw.js looks like this:

importScripts('https://cdn.jsdelivr.net/npm/workbox-cdn@4.3.1/workbox/workbox-sw.js')

workbox.setConfig({
  "debug": false
})

workbox.core.clientsClaim()
workbox.core.skipWaiting()

workbox.precaching.cleanupOutdatedCaches()

workbox.routing.registerRoute(new RegExp('http://localhost:8000/api/public/.*'), new workbox.strategies.NetworkFirst ({}), 'GET')
workbox.routing.registerRoute(new RegExp('/_nuxt/'), new workbox.strategies.CacheFirst ({}), 'GET')
workbox.routing.registerRoute(new RegExp('/'), new workbox.strategies.NetworkFirst ({}), 'GET')

I downgraded the @nuxtjs/pwa module to version 2.6 to see the following sw.js has been generated:

importScripts('/_nuxt/workbox.4c4f5ca6.js')

workbox.precaching.precacheAndRoute([
  {
    "url": "/_nuxt/12a3dce2a6e949590390.js",
    "revision": "8ea362e53faf6466c89d4eac3f533e2a"
  }
  // ... (other fragments)
], {
  "cacheId": "my-app",
  "directoryIndex": "/",
  "cleanUrls": false
})

workbox.clientsClaim()
workbox.skipWaiting()

workbox.routing.registerRoute(new RegExp('/_nuxt/.*'), workbox.strategies.cacheFirst({}), 'GET')
workbox.routing.registerRoute(new RegExp('/.*'), workbox.strategies.networkFirst({}), 'GET')

workbox.routing.registerRoute(new RegExp('http://localhost:8000/api/public/.*'), workbox.strategies.networkFirst({}), 'GET')

So as you'd expect all routes are working offline in version 2.6 whereas in the latest version no precaching takes place and only the first route is cached on runtime.
The configuration for both cases is the same one:

workbox: {
    runtimeCaching: [
      { urlPattern: `${process.env.BACKEND_URL}/api/public/.*` }
    ]
}

I'm having same problem with version 3.0.0-beta.20. For now, I had to downgrad to 2.6 to work.

I need to be precached and not in runtime caching.

Youhan · 2020-08-26T17:19:45Z

Having the same issue using v3.0.2.

I want to pre-cache some routes (if not all) so that even though the user may not have visited that route (page) while online, it would work offline.

Areskul · 2021-02-08T07:18:03Z

Same issue in 3.3.5

diegomr86 · 2021-02-19T18:18:40Z

I'm facing the same limitation (not problem). I configured nuxt like this:

    workbox: {
      offlineAnalytics: true,
      offlineStrategy: 'StaleWhileRevalidate',
    },

With network off, when I access a previously accessed route without it works fine. But when i access a route that I never entered it gives me the offline error. No problem, this is the expected behavior.
What @matthewpull, @ahus1 and myself whant is a place to define an array off routes (or all) that will be offline even if the user never opened that route.

I vote for re-opening this discussion.

Rigo-m · 2021-04-24T09:12:04Z

@pi0 any news on this?

I'd like to know as well if there is a strategy/configuration for nuxt pwa to be able to offline/precache a SSG website (all routes).

cioraneanu · 2021-06-11T19:40:54Z

I'm facing the same exact issue with unvisited routes not being cached.
I'm also using some dynamic routes(model/_id) and those never get cached... :/ Any ideas how to get around this?

baeteja · 2021-06-24T10:08:32Z

Same issue in 3.3.5, no news?

rvmourik · 2021-10-14T18:51:15Z

Is there been anyone who configured this with success? Tried several approaches, but still no luck.

RodrigoReyes-vw · 2022-04-13T19:37:45Z

same I cannot get it to work, I got the router to respond, but does not know what to do with the route

changemyminds · 2022-05-12T15:15:22Z

@RodrigoReyes-vw I have the same problem and fix it. You can see the issue. I hope it is useful to you.

pi0 closed this as completed in 76de33c Apr 2, 2018

pi0 reopened this Apr 2, 2018

manniL pushed a commit to manniL/pwa-module that referenced this issue Apr 4, 2018

feat(worbox): add offline option for making it optional (nuxt-communi…

bd308ec

…ty#59) Make all-inclusive NetworkFirst route registration optional. Fixes nuxt-community#24.

galvez closed this as completed Sep 21, 2018

akirarika mentioned this issue Jul 23, 2020

Only caches visited routes #306

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Only caches visited routes #24

Only caches visited routes #24

matthewpull commented Jan 4, 2018 •

edited by ghost

Loading

matthewpull commented Jan 4, 2018

ahus1 commented Mar 28, 2018

pi0 commented Apr 2, 2018

ahus1 commented Apr 2, 2018

ahus1 commented Sep 21, 2018

galvez commented Sep 21, 2018

pi0 commented Sep 22, 2018 •

edited

Loading

micbra commented May 13, 2020 •

edited

Loading

gridsystem commented May 22, 2020 •

edited

Loading

igorjacauna commented Jul 14, 2020 •

edited

Loading

Youhan commented Aug 26, 2020 •

edited

Loading

Areskul commented Feb 8, 2021

diegomr86 commented Feb 19, 2021

Rigo-m commented Apr 24, 2021 •

edited

Loading

cioraneanu commented Jun 11, 2021

baeteja commented Jun 24, 2021 •

edited

Loading

rvmourik commented Oct 14, 2021

RodrigoReyes-vw commented Apr 13, 2022

changemyminds commented May 12, 2022

Only caches visited routes #24

Only caches visited routes #24

Comments

matthewpull commented Jan 4, 2018 • edited by ghost Loading

matthewpull commented Jan 4, 2018

ahus1 commented Mar 28, 2018

pi0 commented Apr 2, 2018

ahus1 commented Apr 2, 2018

ahus1 commented Sep 21, 2018

galvez commented Sep 21, 2018

pi0 commented Sep 22, 2018 • edited Loading

micbra commented May 13, 2020 • edited Loading

gridsystem commented May 22, 2020 • edited Loading

igorjacauna commented Jul 14, 2020 • edited Loading

Youhan commented Aug 26, 2020 • edited Loading

Areskul commented Feb 8, 2021

diegomr86 commented Feb 19, 2021

Rigo-m commented Apr 24, 2021 • edited Loading

cioraneanu commented Jun 11, 2021

baeteja commented Jun 24, 2021 • edited Loading

rvmourik commented Oct 14, 2021

RodrigoReyes-vw commented Apr 13, 2022

changemyminds commented May 12, 2022

matthewpull commented Jan 4, 2018 •

edited by ghost

Loading

pi0 commented Sep 22, 2018 •

edited

Loading

micbra commented May 13, 2020 •

edited

Loading

gridsystem commented May 22, 2020 •

edited

Loading

igorjacauna commented Jul 14, 2020 •

edited

Loading

Youhan commented Aug 26, 2020 •

edited

Loading

Rigo-m commented Apr 24, 2021 •

edited

Loading

baeteja commented Jun 24, 2021 •

edited

Loading