search

vite-pwa / nuxt

Zero-config PWA Plugin for Nuxt 3
https://vite-pwa-org.netlify.app/frameworks/nuxt
MIT License
454 stars 22 forks source link

API Request URLs Open in New Tab Redirect to 404 Page #136

Closed IShinji closed 6 months ago

IShinji commented 6 months ago

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 commented 6 months ago

You must:

Check this issue https://github.com/vite-pwa/sveltekit/issues/65

IShinji commented 6 months ago

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!