How to exclude a backend route ?

[alkanna]

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',
          },
        ],
      },

[userquin]

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/]
  }));

[userquin]

If I just refresh the page, the sw is not there:

If I go offline, then the sw will intercept the call when navigating but will not work on F5:

[userquin]

[alkanna]

Thanks, this seems to do the trick !

[jlabresh1]

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/]
  }));

This was very helpful, thank you

[mashpie]

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!

[userquin]

@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

[mashpie]

@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?

[userquin]

@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

[userquin]

@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

https://stackoverflow.com/a/56449689