How to exclude a backend route ?
alkanna opened this issue · comments
I have been successfully using this very basic approach : https://vite-plugin-pwa.netlify.app/guide/generate.html
However, since I have deployed this to production, I have an issue with a route that is supposed to be handled by the load balancer, and then distributed to another service than my SPA.
Currently, if I navigate to /backoffice on my SPA, the service worker seems to be picking up the GET request :
Is there an option to exclude some routes and make then network only ?
I searched a bit on other issues here and found this option, but I don't know if this would be relevant to my case :
workbox: {
runtimeCaching: [
{
handler: 'NetworkOnly',
urlPattern: /\/backoffice\/.*\/*/,
method: 'GET',
},
],
},
You can try adding that route to the navigateFallbackDenylist
on workbox
plugin option (I test it on vue-router
examples with the hi
route, the route is not being intercepted by the sw):
// vite.config.ts
VitePWA({
// other options
workbox: {
navigateFallbackDenylist: [/^\/backoffice/]
}
}),
Previous option will generate this entry on your sw (you must deal with offline support for excluded routes):
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
denylist: [/^\/backoffice/]
}));
Thanks, this seems to do the trick !
You can try adding that route to the
navigateFallbackDenylist
onworkbox
plugin option (I test it onvue-router
examples with thehi
route, the route is not being intercepted by the sw):// vite.config.ts VitePWA({ // other options workbox: { navigateFallbackDenylist: [/^\/backoffice/] } }),Previous option will generate this entry on your sw (you must deal with offline support for excluded routes):
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), { denylist: [/^\/backoffice/] }));
This was very helpful, thank you
yes, very helpful!
@userquin may I propose to add a section to docs, like "How to connect pwa to your backend api". I'd guess this is a very common use case for a lot of us, that didn't study workbox docs.
I don't remember any situation where I had to configure denylist
in vue2 projects using @vue/cli-plugin-pwa
. So actually, with that background, the implicit fallback to /index.html was new to me. To be honest I still don't know whether this is a workbox or vite-pwa default. Please feel free to say "RTFM", if I missed that... :)
Thanks for your work!
@mashpie PR welcome
Should also include the option when using custom sw, using the denylist entry on the navigation route.
I use it a few days ago on vitest docs to exclude the New action for stackblitz
@userquin I'd like to, but I am afraid, that my knowledge of assumptions and internals of vite-plugin-pwa is far too limited.
Still playing with runtimeCaching
options, which I can't get to work the way I understand docs (https://developer.chrome.com/docs/workbox/modules/workbox-strategies/ & https://vite-plugin-pwa.netlify.app/workbox/generate-sw.html#background-sync)
workbox: {
// navigateFallbackDenylist: [/^\/api/]
runtimeCaching: [
{
handler: 'NetworkFirst',
urlPattern: /^\/api/,
// method: 'POST'
// options: {
// backgroundSync: {
// name: 'myQueueName',
// options: {
// maxRetentionTime: 24 * 60
// }
// }
// }
}
]
}
but this never hits my backend... not per GET nor per POST - shouldn't it?
@mashpie @jlabresh1 @alkanna will be included on the new docs on Workbox: generateSW
and Workbox: injectManifest
entries:
- https://deploy-preview-304--vite-plugin-pwa.netlify.app/workbox/generate-sw.html#exclude-routes
- https://deploy-preview-304--vite-plugin-pwa.netlify.app/workbox/inject-manifest.html#exclude-routes
EDIT: also included on FAQ
https://deploy-preview-304--vite-plugin-pwa.netlify.app/guide/faq.html#exclude-routes
@mashpie sorry for late response, you should include the method, if still not working file an issue on workbox repo, this plugin is just a wrapper for workbox