API Request URLs Open in New Tab Redirect to 404 Page

[IShinji]

I am using Nuxt.js for my project and I have encountered an issue where opening API request URLs in a new tab results in a 404 page. It appears that the service worker (SW) is intercepting the routing. However, if I perform a hard refresh, the page correctly returns the JSON data from the API.

Steps to reproduce:

1. Open an API request URL in a new tab.
2. Observe the 404 error page.
3. Perform a hard refresh on the new tab.
4. Observe the correct JSON data being returned.

Expected behavior:
When opening an API request URL in a new tab, it should directly return the JSON data without needing a hard refresh.

Current behavior:
Opening an API request URL in a new tab results in a 404 page until a hard refresh is performed.

Possible cause:
It seems the service worker might be intercepting the route and causing the 404 page issue.

How to fix:
Looking for suggestions on how to prevent the service worker from intercepting API request URLs or any other potential fixes for this issue.

Environment:
Nuxt.js version: 3.11.2
Browser: Chrome 124.0.6367.209
Operating System: MacOS 14.5
Thank you for your help!

[userquin]

You must:

• add all api calls and ssr pages to navigateFallbackDenylist regex array
• include a runtime caching with NetworkFirst o NetworkOnly strategy for those api calls and ssr pages with the handleDidError redirecting to the navigateFallback (or any other pages/url being precached)

Check this issue vite-pwa/sveltekit#65

[IShinji]

You must:

• add all api calls and ssr pages to navigateFallbackDenylist regex array
• include a runtime caching with NetworkFirst o NetworkOnly strategy for those api calls and ssr pages with the handleDidError redirecting to the navigateFallback (or any other pages/url being precached)

Check this issue vite-pwa/sveltekit#65

Thank you for the solution! I've implemented the changes based on your suggestions, and the issue is now resolved. Appreciate your help!