Comments (19)
@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.
from pwa-module.
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.
from pwa-module.
@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/[email protected]/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/.*` }
]
}
from pwa-module.
Same issue in 3.3.5, no news?
from pwa-module.
@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/[email protected]/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.
from pwa-module.
@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).
from pwa-module.
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.
from pwa-module.
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.
from pwa-module.
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?
from pwa-module.
@RodrigoReyes-vw I have the same problem and fix it. You can see the issue. I hope it is useful to you.
from pwa-module.
It is worth noting that I have my application set up as a single page app (SPA)
from pwa-module.
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.
from pwa-module.
#59 should fix it.
from pwa-module.
@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.
from pwa-module.
@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.
from pwa-module.
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?
from pwa-module.
Same issue in 3.3.5
from pwa-module.
Is there been anyone who configured this with success? Tried several approaches, but still no luck.
from pwa-module.
same I cannot get it to work, I got the router to respond, but does not know what to do with the route
from pwa-module.
Related Issues (20)
- How to test the installation and download of local localhost:3000 with chrome browerοΌ HOT 2
- Error: ENOENT: no such file or directory, open '/tmp/build_c0584bd6/static/sw.js'
- Can't detect new builds locally HOT 3
- Can I set related_applications and prefer_related_applications to the manifest? HOT 1
- Is there way to replace the pwa icon that has already been added before?
- runtimeCaching urlPattern and pagesURLPattern only accept strings HOT 1
- Blank page when opening the application as PWA on mobile HOT 1
- Is this project dead? HOT 1
- Any way to use custom urls prefix for icons or `build.publicPath`?
- [h3] [unhandled] next is not a function (Nuxt/Bridge - Nitro 6.0.0) HOT 9
- How to add required properties HOT 2
- works with Nuxt 3 HOT 8
- PWA doesn't work offline
- how to generate multiple manifest files?
- If start_url exists in the manifest.json, precaching will always add start_url path, can it be changed to configurable?
- short_name uses package.json name by default instead of manifest name
- How can I cache post requests?
- Change formatting for h3 errors, like [nuxt] [request error] [fatal] [404]
- 301 issues with special characters
- why does not PWA update when a new version of the website is available? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pwa-module.