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

Question

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

Fiyuva opened this issue 10 months ago · comments

Fiyuva commented 10 months ago

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" }, }

Joaquín Sánchez · Answer 1 · Thu Oct 26 2023 03:59:00 GMT+0800 (China Standard Time)

@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 · Answer 2 · Fri Oct 27 2023 02:27:39 GMT+0800 (China Standard Time)

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

Joaquín Sánchez · Answer 3 · Fri Oct 27 2023 03:08:25 GMT+0800 (China Standard Time)

@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
      }]
    }
  }]
}

Joaquín Sánchez · Answer 4 · Fri Oct 27 2023 03:17:13 GMT+0800 (China Standard Time)

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

Fiyuva · Answer 5 · Fri Oct 27 2023 03:31:15 GMT+0800 (China Standard Time)

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

Joaquín Sánchez · Answer 6 · Fri Oct 27 2023 03:38:15 GMT+0800 (China Standard Time)

@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 · Answer 7 · Fri Oct 27 2023 03:42:52 GMT+0800 (China Standard Time)

can you see any errors in the code?

Joaquín Sánchez · Answer 8 · Fri Oct 27 2023 03:49:04 GMT+0800 (China Standard Time)

@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 · Answer 9 · Fri Oct 27 2023 03:57:29 GMT+0800 (China Standard Time)

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

Joaquín Sánchez · Answer 10 · Fri Oct 27 2023 03:59:48 GMT+0800 (China Standard Time)

@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 · Answer 11 · Fri Oct 27 2023 04:03:27 GMT+0800 (China Standard Time)

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

Joaquín Sánchez · Answer 12 · Fri Oct 27 2023 04:05:29 GMT+0800 (China Standard Time)

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

Fiyuva · Answer 13 · Fri Oct 27 2023 04:06:41 GMT+0800 (China Standard Time)

Thank you for everything :)