How to exclude a backend route ?

Question

How to exclude a backend route ?

alkanna opened this issue 2 years ago · 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',
          },
        ],
      },

Joaquín Sánchez · Answer 1 · Sat Jan 29 2022 03:43:27 GMT+0800 (China Standard Time)

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

Joaquín Sánchez · Answer 2 · Sat Jan 29 2022 03:49:57 GMT+0800 (China Standard Time)

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:

Joaquín Sánchez · Answer 3 · Sat Jan 29 2022 04:03:45 GMT+0800 (China Standard Time)

Joaquín Sánchez commented 2 years ago

Khiman Louer · Answer 4 · Sun Jan 30 2022 05:05:32 GMT+0800 (China Standard Time)

Thanks, this seems to do the trick !

Jeremiah LaBresh · Answer 5 · Wed May 11 2022 00:25:23 GMT+0800 (China Standard Time)

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

Marcus Spiegel · Answer 6 · Tue May 31 2022 01:00:59 GMT+0800 (China Standard Time)

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!

Joaquín Sánchez · Answer 7 · Tue May 31 2022 01:33:20 GMT+0800 (China Standard Time)

@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

Marcus Spiegel · Answer 8 · Tue May 31 2022 01:53:34 GMT+0800 (China Standard Time)

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

Joaquín Sánchez · Answer 9 · Sat Jun 18 2022 01:41:24 GMT+0800 (China Standard Time)

@mashpie @jlabresh1 @alkanna will be included on the new docs on Workbox: generateSW and Workbox: injectManifest entries:

EDIT: also included on FAQ https://deploy-preview-304--vite-plugin-pwa.netlify.app/guide/faq.html#exclude-routes

Joaquín Sánchez · Answer 10 · Mon Jun 20 2022 17:56:27 GMT+0800 (China Standard Time)

@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