feat: add SSR workbox support #66
Conversation
| ? eval(`() => ({ | ||
| urlPattern: ({ url, sameOrigin }) => sameOrigin && url.pathname.match(${regex}), | ||
| handler: 'NetworkFirst', | ||
| options: { |
There was a problem hiding this comment.
add purge on quota error
| }, | ||
| plugins: [{ | ||
| handlerDidError: async () => Response.redirect(${JSON.stringify(offlinePage)}, 302), | ||
| cacheWillUpdate: async ({ response }) => response.status === 200 ? response : null |
There was a problem hiding this comment.
prevent error here (response can be null/undefined when offline)?
cacheWillUpdate: async ({ response }) => response?.status === 200 ? response : null
| && options.strategies !== 'injectManifest' | ||
|
|
||
| const ssrPages: NuxtPage[] = [] | ||
| let nitroOptions: NitroOptions | undefined | ||
| nuxt.hook('nitro:init', (nitro) => { |
There was a problem hiding this comment.
maybe we can just remove the configuration here and configure the options in vite:extendConfig hook
|
This PR is too complex to be solved automatically, the runtime caching should be included by the user, there are a lot of configuration that can be included, for example:
|
|
we should use https://github.com/unjs/unrouting to extract dynamic routes patterns/paths /cc @danielroe 🙏 @BobbieGoede (sorry for the ping ❤️ ) |
|
@userquin Hi, just to confirm, does this mean that offline support isn't currently available when using nuxt generate (with SSR enabled by default)? That would explain why I can't get offline support on my statically generated site |
|
No, the problem is about SSR pages where you cannot add those routes to the sw precaching manifest, that's, a page refresh on any SSR page when offline will show the default browser offline page. This PR will try to add a custom runtime caching for SSR pages to avoid the browser offline page; we need to store SSR pages in a new cache to allow work when offline (won't work if the user doesn't navigate to those pages previously): the runtime caching will require to "parse" SSR pages adding the corresponding "regex" to the runtime caching to allow workbox intercept and cache the SSR pages content. |
|
ok thanks for these explanations. |
Check if there is some error when installing the sw, if you share in a new issue/discussion your configuration and the url I can check it |
Thanks, the offline feature of my app is working but only for "/" page. Not the "/foo" and "/bar". I need to first visit them online, and only after it can work in offline mode. with There's a way to directly make all page work in offline mode ? pwa: {
registerType: 'autoUpdate',
workbox: {
navigateFallback: "/",
globPatterns: ['**/*.{js,css,html,png,PNG,svg,jpg,JPG,jpeg}'],
}, |
|
Did you remove/unregister the sw and the storage when switching between prerender and SSR app? You may have the old sw there, try using private browsing. |
Yes pre-rended pages is not availabe offline even on fresh restart, sw and storage removed |
|
Can you share the repo or some url where I can check it? Or just provide a minimal reproduction 🙏 EDIT: check if you're going offline before the sw is ready (the sw should be green in the devtools, that's, installed and activated once sw precaching downloaded) I'm testing settings pages with elk.zone and seems to be working, maybe we need to review Nuxt hooks, from time to time there are small breaking changes for the integration: for context check https://github.com/vite-pwa/nuxt/blob/main/src/utils/module.ts#L309-L338 offline elk.zone settings page
Can you confirm you're using the Nuxt PWA integration instead just the PWA plugin? |
This PR includes support for SSR Pages via custom runtime caching plugins using NetworkOnly or NetworkFirst handler:
denylistentry with exact match, if includes dynamic route the plugin will include a wildcard regex insteadTo run the playground, from root:
nr dev:preview:build.We need to:
somepath-[someparam]routeRules: vitesse-nuxt3 is usingprerenderand Elk is usingrouteRulesinsteadprerender(traverse all pages applying therouteRulesmatch to include/exclude them, maybe creating and using a radix3 router?)The PR using
evalto generate the runtimeCaching entry per route since we need to provide a few parameters, maybe we can use another approach.┌───────────────────┬──────────────────┬───────────────────────────────────────────────┐ │ (iteration index) │ Key │ Values │ ├───────────────────┼──────────────────┼───────────────────────────────────────────────┤ │ 0 │ '/hi/:id()' │ { exp: /^\/hi\//, dynamic: true } │ │ 1 │ '/list' │ { exp: /^\/list$/, dynamic: false } │ │ 2 │ '/list/example2' │ { exp: /^\/list\/example2$/, dynamic: false } │ │ 3 │ '/list/example' │ { exp: /^\/list\/example$/, dynamic: false } │ │ 4 │ '/list/:id()' │ { exp: /^\/list\//, dynamic: true } │ └───────────────────┴──────────────────┴───────────────────────────────────────────────┘