Progressive Web Application Dynamic Route Problem with vite-pwa-nuxt in nuxt3 #79

Fiyuva · 2023-10-25T19:31:17Z

my pwa code is as follows. I need your help on a few issues.

Problem 1-) Precaching error;

workbox Precaching did not find a match for /video/fa.mp4

Problem 2-) No route error; workbox No route found for: /video/fa.mp4

Problem 3-) I cannot access the dynamic route. When I try to access it, it redirects to the home page. Why?

Problem 4-) When I refresh the page, it redirects to the home page.

Thanks

pwa: { useCredentials: true, registerType: "autoUpdate", includeAssets: [ "apple-touch-icon.png", "android-chrome-192x192.png", "android-chrome-512x512.png", "favicon.ico", "favicon-16x16.png", "favicon-32x32.png", "mstile-150x150.png", "safari-pinned-tab.svg", ], manifest: { name: "Find Your Virtual Assistance", short_name: "Fiyuva", description: "Fiyuva is a platform that provides quality service to its customers in many sectors.", theme_color: "#110F0F", start_url: process.env.BASE_URL, id: "/", scope: process.env.BASE_URL, orientation: "any", icons: [ { src: "/img/pwa/android-chrome-192x192.png", type: "image/png", sizes: "192x192", form_factor: "narrow" }, { src: "/img/pwa/android-chrome-512x512.png", type: "image/png", sizes: "512x512" }, { src: "/img/pwa/android-chrome-512x512.png", type: "image/png", sizes: "512x512", purpose: "any" }, { src: "/img/pwa/android-chrome-512x512.png", type: "image/png", sizes: "512x512", purpose: "maskable" }, ], display_override: ["fullscreen", "minimal-ui", "standalone"], shortcuts: [ { name: "Home Page", url: "/", description: "Home Page", icons: [ { src: "/img/pwa/android-chrome-96x96.png", sizes: "96x96", type: "image/png", purpose: "any", }, ], }, { name: "Sectors", url: "/sectors", description: "Sectors Page", icons: [ { src: "/img/pwa/android-chrome-96x96.png", sizes: "96x96", type: "image/png", purpose: "any", }, ], }, { name: "About", url: "/about", description: "About Page", icons: [ { src: "/img/pwa/android-chrome-96x96.png", sizes: "96x96", type: "image/png", purpose: "any", }, ], }, { name: "Contact", url: "/contact", description: "Contact Page", icons: [ { src: "/img/pwa/android-chrome-96x96.png", sizes: "96x96", type: "image/png", purpose: "any", }, ], }, { name: "Login", url: "/login", description: "Login Page", icons: [ { src: "/img/pwa/android-chrome-96x96.png", sizes: "96x96", type: "image/png", purpose: "any", }, ], }, { name: "Register", url: "/register", description: "Register Page", icons: [ { src: "/img/pwa/android-chrome-96x96.png", sizes: "96x96", type: "image/png", purpose: "any", }, ], } ], protocol_handlers: [ { protocol: "mailto", url: process.env.BASE_URL + "/newEmail?to=%s", }, ], }, workbox: { globPatterns: ['**/*.{js,ts,css,scss,png,webp,svg,mp4,vue}'], navigateFallback: "/" }, devOptions: { enabled: true, type: "module" }, }

The text was updated successfully, but these errors were encountered:

userquin · 2023-10-25T19:59:00Z

@Fiyuva

Check this draft PR: #66

Problem 1 and 2:
Add mp4 extension to your pwa options: check this entry https://vite-pwa-org.netlify.app/guide/static-assets.html#globpatterns
If the mp4 files are huge, workbox-build will show a warning about the size and will exclude any mp4 file exceeding the max size from the precache manifest. To solve the problem check this entry: https://vite-pwa-org.netlify.app/guide/faq.html#missing-assets-from-sw-precache-manifest.

Problem 3 and 4:
You need to exclude any dynamic route from being intercepted by the sw: there is a controller that will redirect to the navigate fallabck page (/). Use navigateFallbackDenylist to exclude all dynamic routes and add a custom cache in your pwa runtime caching options with NetworkFirst or NetworkOnly depending on your needs (for example, if a dynamic route can only work when online, you need to use NetworkFirst). Check this issue in SvelteKit PWA integration plugin: vite-pwa/sveltekit#65 (comment)

Fiyuva · 2023-10-26T18:27:39Z

Problem 1 and 2: mp4 extension is added for globpattern and the video is 1.85 mb and yet it doesn't work. mp4 route: /video/a.mp4

Problem 3 and 4:

For example;

I am trying to access localhost:3000/verify/email/142412421 (142412421 is a random token. )

How can I code it? Can you help me? Thanks

userquin · 2023-10-26T19:08:25Z

@Fiyuva

Problem 1 and 2:
You should put mp4 files in public folder

Problem 3 and 4:
Since you need connectivity, you should use NetworkOnly handler, add this to your pwa options:

workbox: {
  /* 
     Adding the regex will prevent the offline controller to intercept this url.
     If missing, then will always redirect to navigateFallback url (default is /) on page refresh (offline or online).
  */
  navigateFallbackDenylist: [/^\/verify\/email\/.*/i],
  /* 
    This handler will send the request to the backend without caching the response (cacheWillUpdate).
    When offline, the request to the backend will fail and will redirect to /error page (handlerDidError).
  */
  runtimeCaching: [{
    urlPattern: ({ url, sameOrigin }) => sameOrigin && url.pathname.match(/^\/verify\/email\/.*/i),
    handler: 'NetworkOnly',
    options: {
      matchOptions: {
        ignoreVary: true,
        ignoreSearch: true
      },
      plugins: [{
        handlerDidError: async () => Response.redirect('/error', 302),
        cacheWillUpdate: async () => null
      }]
    }
  }]
}

userquin · 2023-10-26T19:17:13Z

upps both regex are wrong, should be /^\/verify\/email\/.*/i (don't extract the regex to a variable)

Fiyuva · 2023-10-26T19:31:15Z

I will give a lot of details to express myself much more clearly.

Problem 1-) I have many dynamic pages like the URLs below. I cannot access any of these pages.

/verify/email/214214

/verify/password/412412

/refund/412421 exc.

Problem 2-) It doesn't matter if it is dynamic or static, when I refresh the page on any URL, it sends it to the home page. How can I fix this?

Question 3-) There are folders such as css, scss in the Assets folder, img and video in the public folder and they are full. Almost all of them give errors. The error example is as follows.

Note: The code you posted did not work for me.

Thanks

pwa: {
    useCredentials: true,
    registerType: "autoUpdate",
    includeAssets: [
      "apple-touch-icon.png",
      "android-chrome-192x192.png",
      "android-chrome-512x512.png",
      "favicon.ico",
      "favicon-16x16.png",
      "favicon-32x32.png",
      "mstile-150x150.png",
      "safari-pinned-tab.svg",
    ],
    manifest: {
      name: "Find Your Virtual Assistant",
      short_name: "Fiyuva",
      description:
        "Fiyuva is a platform that provides quality service to its customers in many sectors.",
      theme_color: "#110F0F",
      start_url: process.env.BASE_URL,
      id: "/",
      scope: process.env.BASE_URL,
      orientation: "any",
      icons: [
        {
          src: "/img/pwa/android-chrome-192x192.png",
          type: "image/png",
          sizes: "192x192",
          form_factor: "narrow"
        },
        {
          src: "/img/pwa/android-chrome-512x512.png",
          type: "image/png",
          sizes: "512x512"
        },
        {
          src: "/img/pwa/android-chrome-512x512.png",
          type: "image/png",
          sizes: "512x512",
          purpose: "any"
        },
        {
          src: "/img/pwa/android-chrome-512x512.png",
          type: "image/png",
          sizes: "512x512",
          purpose: "maskable"
        },
      ],
      display_override: ["fullscreen", "minimal-ui", "standalone"],
      shortcuts: [
        {
          name: "Home Page",
          url: "/",
          description: "Home Page",
          icons: [
            {
              src: "/img/pwa/android-chrome-96x96.png",
              sizes: "96x96",
              type: "image/png",
              purpose: "any",
            },
          ],
        },
        {
          name: "Sectors",
          url: "/sectors",
          description: "Sectors Page",
          icons: [
            {
              src: "/img/pwa/android-chrome-96x96.png",
              sizes: "96x96",
              type: "image/png",
              purpose: "any",
            },
          ],
        },
        {
          name: "About",
          url: "/about",
          description: "About Page",
          icons: [
            {
              src: "/img/pwa/android-chrome-96x96.png",
              sizes: "96x96",
              type: "image/png",
              purpose: "any",
            },
          ],
        },
        {
          name: "Contact",
          url: "/contact",
          description: "Contact Page",
          icons: [
            {
              src: "/img/pwa/android-chrome-96x96.png",
              sizes: "96x96",
              type: "image/png",
              purpose: "any",
            },
          ],
        },
        {
          name: "Login",
          url: "/login",
          description: "Login Page",
          icons: [
            {
              src: "/img/pwa/android-chrome-96x96.png",
              sizes: "96x96",
              type: "image/png",
              purpose: "any",
            },
          ],
        },
        {
          name: "Register",
          url: "/register",
          description: "Register Page",
          icons: [
            {
              src: "/img/pwa/android-chrome-96x96.png",
              sizes: "96x96",
              type: "image/png",
              purpose: "any",
            },
          ],
        }
      ],
      protocol_handlers: [
        {
          protocol: "mailto",
          url: process.env.BASE_URL + "/newEmail?to=%s",
        },
      ],
    },
    workbox: {
      globPatterns: ['**/*.{js,ts,css,scss,png,webp,svg,mp4,vue}'],
      navigateFallback: "/",
      navigateFallbackDenylist: [/^\/verify\/email\/.*/i],
      runtimeCaching: [{
        urlPattern: ({ url, sameOrigin }) => sameOrigin && url.pathname.match(/^\/verify\/email\/.*/i),
        handler: 'NetworkOnly',
        options: {
          matchOptions: {
            ignoreVary: true,
            ignoreSearch: true
          },
          plugins: [{
            handlerDidError: async () => Response.redirect('/error', 302),
            cacheWillUpdate: async () => null
          }]
        }
      }]
    },
    devOptions: {
      enabled: true,
      type: "module"
    },
  },

Examples of errors I receive are as follows.

workbox No route found for: /_nuxt/assets/css/Shared/sf.css?vue&type=style&index=0&src=e1198cb5&scoped=e1198cb5&lang.css
workbox-5357ef54.js:62 workbox Precaching did not find a match for /_nuxt/assets/css/Shared/wp.css?vue&type=style&index=1&src=e1198cb5&scoped=e1198cb5&lang.css
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/assets/css/Shared/wp.css?vue&type=style&index=1&src=e1198cb5&scoped=e1198cb5&lang.css
workbox-5357ef54.js:62 workbox Precaching did not find a match for /_nuxt/assets/css/footer.css?vue&type=style&index=0&src=04e04d11&scoped=04e04d11&lang.css
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/assets/css/footer.css?vue&type=style&index=0&src=04e04d11&scoped=04e04d11&lang.css
workbox-5357ef54.js:62 workbox Precaching did not find a match for /_nuxt/pages/sectors.vue
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/pages/sectors.vue
workbox-5357ef54.js:62 workbox Precaching did not find a match for /_nuxt/pages/about.vue
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/pages/about.vue
workbox-5357ef54.js:62 workbox Precaching did not find a match for /_nuxt/pages/contact.vue
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/pages/contact.vue
workbox-5357ef54.js:62 workbox Precaching did not find a match for /_nuxt/components/AppCpf.vue
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/components/AppCpf.vue
workbox-5357ef54.js:62 workbox Precaching did not find a match for /_nuxt/assets/css/pageimg.css?vue&type=style&index=0&src=10b9b775&scoped=10b9b775&lang.css
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/assets/css/pageimg.css?vue&type=style&index=0&src=10b9b775&scoped=10b9b775&lang.css
workbox Precaching did not find a match for /_nuxt/components/About/FiyuvaDesc.vue
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/components/About/FiyuvaDesc.vue
workbox-5357ef54.js:62 workbox Precaching did not find a match for /_nuxt/components/Home/MainSectors.vue
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/components/Home/MainSectors.vue
workbox-5357ef54.js:62 workbox Precaching did not find a match for /_nuxt/components/Home/ThreeBoxes.vue
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/components/Home/ThreeBoxes.vue
workbox-5357ef54.js:62 workbox Precaching did not find a match for /_nuxt/components/Home/WorkWithUs.vue
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/components/Home/WorkWithUs.vue
workbox-5357ef54.js:62 workbox Precaching did not find a match for /_nuxt/components/AppDeneme.vue
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/components/AppDeneme.vue
workbox-5357ef54.js:62 workbox Precaching did not find a match for /_nuxt/components/Home/CustomerComments.vue
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/components/Home/CustomerComments.vue
workbox-5357ef54.js:62 workbox Precaching did not find a match for /_nuxt/components/AppAds.vue
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/components/AppAds.vue
workbox-5357ef54.js:62 workbox Precaching did not find a match for /_nuxt/components/Shared/AppScrollToTop.vue
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/components/Shared/AppScrollToTop.vue
workbox-5357ef54.js:62 workbox Precaching did not find a match for /_nuxt/components/Shared/AppWpContact.vue
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/components/Shared/AppWpContact.vue
workbox-5357ef54.js:62 workbox Precaching did not find a match for /_nuxt/components/Shared/AppFooter.vue
workbox-5357ef54.js:62 workbox No route found for: /_nuxt/components/Shared/AppFooter.vue

userquin · 2023-10-26T19:38:15Z

@Fiyuva seems you have a sw installed, remove it from dev tools, these logs seems to be in dev mode, on dev server any entry in workbox is ignored, to test the pwa try running the build + preview: devOptions.enabled = true is for testing web manifest and custom sw logic when using injectManifest strategy: push notifications, web shared target api...

EDIT: don't add scss, vue and ts extensions, once you build your app there will be only js and css assets

Fiyuva · 2023-10-26T19:42:52Z

can you see any errors in the code?

userquin · 2023-10-26T19:49:04Z

@Fiyuva

use id: process.env.BASE_URL,
remove includeAssets: add ico and svg to workbox.globPatterns. If you want to add only those listed in current includeAssets add a new entry in workbox.globPatterns per includeAssets (copy/paste the list entries)
form_factor: "narrow" in manifest.icons, not sure if this is good, I need to check the docs
check https://github.com/vite-pwa/assets-generator, you're using the same icon for any and maskable icon

Fiyuva · 2023-10-26T19:57:29Z

I removed includeAssets and added ico and svg to workbox.globPatterns

If you want to add only those listed in current includeAssets add a new entry in workbox.globPatterns per includeAssets (copy/paste the list entries)

What do u mean in this sentence? I didn't understand well. Can you give me basic example

userquin · 2023-10-26T19:59:48Z

@Fiyuva
If you have 200 svg files in public folder, maybe you only want to add to the sw precache safari-pinned-tab.svg:

globPatterns: ['**/*.{js,css,png,webp,mp4}', 'safari-pinned-tab.svg'],

If you add svg to the list, then all svg icons will be included. Try build your app and check the sw.js file (add mode: 'development') to the pwa options, check the end of the sw.js file.

Check also this entry: https://vite-pwa-org.netlify.app/guide/cookbook.html

Fiyuva · 2023-10-26T20:03:27Z

if i want to add some png, jpg, ico and exc. files i will add them like this right?

userquin · 2023-10-26T20:05:29Z

yes: search globPatterns here https://developer.chrome.com/docs/workbox/reference/workbox-build/ => https://github.com/isaacs/node-glob#glob-primer

Fiyuva · 2023-10-26T20:06:41Z

Thank you for everything :)

Fiyuva closed this as completed Oct 26, 2023

userquin mentioned this issue Nov 2, 2023

workbox runtimeCaching set networkOnly strategy fails when url with search parameters vite-pwa/vite-plugin-pwa#589

Closed

This was referenced Nov 13, 2023

Using the latest nuxt, accessing a secondary or tertiary route forces me back to the home page, trouble looking at it. #64

Closed

bfcach not working and manually change of url reload index-page - from anywhere vite-pwa/vite-plugin-pwa#593

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Progressive Web Application Dynamic Route Problem with vite-pwa-nuxt in nuxt3 #79

Progressive Web Application Dynamic Route Problem with vite-pwa-nuxt in nuxt3 #79

Fiyuva commented Oct 25, 2023

userquin commented Oct 25, 2023

Fiyuva commented Oct 26, 2023 •

edited

Loading

userquin commented Oct 26, 2023 •

edited

Loading

userquin commented Oct 26, 2023 •

edited

Loading

Fiyuva commented Oct 26, 2023 •

edited by userquin

Loading

userquin commented Oct 26, 2023 •

edited

Loading

Fiyuva commented Oct 26, 2023

userquin commented Oct 26, 2023

Fiyuva commented Oct 26, 2023

userquin commented Oct 26, 2023 •

edited

Loading

Fiyuva commented Oct 26, 2023 •

edited

Loading

userquin commented Oct 26, 2023 •

edited

Loading

Fiyuva commented Oct 26, 2023

Progressive Web Application Dynamic Route Problem with vite-pwa-nuxt in nuxt3 #79

Progressive Web Application Dynamic Route Problem with vite-pwa-nuxt in nuxt3 #79

Comments

Fiyuva commented Oct 25, 2023

userquin commented Oct 25, 2023

Fiyuva commented Oct 26, 2023 • edited Loading

userquin commented Oct 26, 2023 • edited Loading

userquin commented Oct 26, 2023 • edited Loading

Fiyuva commented Oct 26, 2023 • edited by userquin Loading

userquin commented Oct 26, 2023 • edited Loading

Fiyuva commented Oct 26, 2023

userquin commented Oct 26, 2023

Fiyuva commented Oct 26, 2023

userquin commented Oct 26, 2023 • edited Loading

Fiyuva commented Oct 26, 2023 • edited Loading

userquin commented Oct 26, 2023 • edited Loading

Fiyuva commented Oct 26, 2023

Fiyuva commented Oct 26, 2023 •

edited

Loading

userquin commented Oct 26, 2023 •

edited

Loading

userquin commented Oct 26, 2023 •

edited

Loading

Fiyuva commented Oct 26, 2023 •

edited by userquin

Loading

userquin commented Oct 26, 2023 •

edited

Loading

userquin commented Oct 26, 2023 •

edited

Loading

Fiyuva commented Oct 26, 2023 •

edited

Loading

userquin commented Oct 26, 2023 •

edited

Loading