vite-pwa / nuxt Goto Github PK

View Code? Open in Web Editor NEW

398.0 4.0 15.0 664 KB

Zero-config PWA Plugin for Nuxt 3

Home Page: https://vite-pwa-org.netlify.app/frameworks/nuxt

License: MIT License

Vue 8.26% TypeScript 90.23% JavaScript 1.52%

pwa nuxt workbox vue

nuxt's People

Contributors

Stargazers

Watchers

Forkers

tinylightbold zyyv mangadex-pub ice-hazymoon kkan0615 marcoscode404 eko2222 andrewbogdanovtss moyasky modbender selemondev ahmadbagwi djhan98 shawn-mty danielroe

nuxt's Issues

non-precached-url: non-precached-url :: [{"url":"index.html"}]

I'm having this issue.
I'm using nuxt 3. The website is a multipage website.
Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"index.html"}]
at E.createHandlerBoundToURL (http://localhost:3000/workbox-3625d7b0.js:1:13533)
at Object.createHandlerBoundToURL (http://localhost:3000/workbox-3625d7b0.js:1:15228)
at http://localhost:3000/sw.js:1:4222
at http://localhost:3000/sw.js:1:565

AutoUpdate - does not reload page automatically

I have a nuxt 3 app that i would like to get automatically updated when new version is available.

When i do following:

Deploy new version to Vercel.
Open the app via https://geoquester.com.

The following happens:
The old version is downloaded.

If i refresh the page with F5
then the new version is downloaded and shown, but only if the pwa was fast enough to download it before hitting F5.

Do i need to do any specific setup for this to work=?

This is my current config:

  pwa: {
    registerType: 'autoUpdate',
    manifest: {
      name: 'GeoQuestr',
      short_name: 'GeoQuestr',
      theme_color: '#0a1a1f',
      description: 'Build and play location based games.',
      background_color: '#0a1a1f',
      icons: icons.icons
    },
    workbox: {
      navigateFallback: '/',
      globPatterns: ['**/*.{js,css,html,ico,png,svg,gltf,bin}'],
      maximumFileSizeToCacheInBytes: 25097152
    }
  },

Bug: Doesn't work on fresh Nuxt app

Hello, I just created a brand new nuxt app and setup this package but no manifest.json is detected. Specifically I am using "nuxt": "^3.5.2" and "@vite-pwa/nuxt": "^0.1.0". I have setup vite-pwa before with sveltekit so I am somewhat familiar with the process, but I can't figure out why this wont work with nuxt?

Below is my config file:

import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  modules: ["@vite-pwa/nuxt"],
  pwa: {
    // devOptions: { enabled: true },
    manifest: {
      name: "T",
      short_name: "T",
      description: "T",
    },
  },
});

dev-sw doesn't seem to be available.

I've tried several ways, but none of them work.
I can't register in dev environment, a custom sw. When generating a new release, we were even able to produce the sw.js file. But I can't use the file in dev. In a fresh install, the same configs seem to work.

Failed to register a ServiceWorker for scope ('http://localhost:3000/app/')
with script ('http://localhost:3000/app/dev-sw.js?dev-sw'): The script has an unsupported MIME type ('text/html').

these are my settings.

import { precacheAndRoute, cleanupOutdatedCaches, createHandlerBoundToURL } from 'workbox-precaching';
import { registerRoute, NavigationRoute } from 'workbox-routing';
import { clientsClaim } from 'workbox-core'

self.skipWaiting();
clientsClaim();

// self.__WB_MANIFEST is default injection point
precacheAndRoute(self.__WB_MANIFEST)

// clean old assets
cleanupOutdatedCaches()

let allowlist
if (import.meta.env.DEV) {
  allowlist = [/^\/$/]
}

let denylist
if (import.meta.env.PROD) {
  denylist = [
    /^\/sw.js/,
    /^\/grapqhl/,
    /^\/manifest.webmanifest$/,
  ]
}

try {
  // to allow work offline
  registerRoute(new NavigationRoute(
    createHandlerBoundToURL('/'),
    { allowlist, denylist },
  ))
} catch (error) {
  console.warn('Error while registering cache route', { error });
}

Im adding manifest from nuxt.config

// public/manifest.webmanifest
{
  "name": "App name",
  "short_name": "App name",
  "description": "App descriptiom",
  "display": "minimal-ui",
  "start_url": "/",
  "icons": [
    {
      "src": "android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }, 
    {
      "src": "android-chrome-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#ffffff",
}

/config/pwa.js
{
  scope: '/',
  srcDir: './service-worker',
  filename: 'sw.js',
  strategies: 'injectManifest',
  manifest: false,
  client: {
    installPrompt: true,
    registerPlugin: true,
    periodicSyncForUpdates: 10,
  },
  injectManifest: {
    globPatterns: ['**/*.{js,json,css,html,txt,svg,png,ico,webp,woff,woff2,ttf,eot,otf,wasm}'],
    globIgnores: ['manifest.webmanifest'],
  },
  devOptions: {
    enabled: process.env.APP_DEV_PWA === 'true',
    type: 'module',
  },
}

nuxt 3 build and preview

PWA not working on prod.

Empty nuxt 3 app.
In app.vue added <VitePwaManifest />

Icon files in dir public/

nuxt.config.ts:

export default defineNuxtConfig({
  modules: ["@vite-pwa/nuxt"],

  pwa: {
    registerType: "autoUpdate",
    manifest: {
      name: "My Awesome App",
      short_name: "MyApp",
      description: "My Awesome App description",
      theme_color: "#ffffff",
      icons: [
        {
          src: "icon64.png",
          sizes: "64x64",
          type: "image/png",
        },
        {
          src: "icon144.png",
          sizes: "144x144",
          type: "image/png",
        },
        {
          src: "icon192.png",
          sizes: "192x192",
          type: "image/png",
        },
        {
          src: "icon512.png",
          sizes: "512x512",
          type: "image/png",
        },
      ],
    },
    devOptions: {
      enabled: true,
      type: "module",
    },
  },
});

on pnpm dev looks good.

pnpm build & pnpm preview

browser console info:
Manifest: Line: 1, column: 1, Syntax error.

Please help.

Automatically generates app icons with different sizes.

In nuxt 2 we have very flexible module(nuxt/pwa). I use them for create manifest.json and generate icons/favicons from one big icon. I realy like your new module, but lacks the ability to generate icons of different size and inject them to the DOM. There are will be very good to have this possibility in vite-pwa/nuxt module.

pwa install on phone

Hello, nuxt version 3.2.0, on mobile not working install function, on desktop it's ok.
maybe i'm doing something wrong?

App.vue

<template>
  <div>
    <VitePwaManifest />
    <div>welcome</div>
    <button @click="$pwa.install">Install</button>
  </div>
</template>

<script setup lang="ts"></script>

nuxt.config.js

pwa: {
    registerType: "autoUpdate",
    includeAssets: ["favicon.ico"],
    workbox: { navigateFallback: null },
    client: {
      installPrompt: true,
    },
    manifest: {
      name: "aaa",
      short_name: "aaa",
      description: "aaa",
      theme_color: "#ffffff",
      icons: [
        {
          src: "icon64.png",
          sizes: "64x64",
          type: "image/png",
        },
        {
          src: "icon144.png",
          sizes: "144x144",
          type: "image/png",
        },
        {
          src: "icon192.png",
          sizes: "192x192",
          type: "image/png",
        },
        {
          src: "icon512.png",
          sizes: "512x512",
          type: "image/png",
        },
      ],
    },
    devOptions: {
      enabled: true,
      type: "module",
    },
  },
});

require is not defined

Hi.
When using workbox in the dev environment (nuxi dev) on nuxt3, the following error occurred when registering ServiceWorker.

require is not defined

Corresponding error code

const {isNaN} = require('lodash-es');

I think this happens because the require function doesn't exist in the browser environment, is there a workaround?
Since the above code does not exist in .nuxt/dev-sw-dist/workbox-a0214893.js, it seems to be a transpile bug during nuxi dev.

New Issue with Nuxt 3.7 - [nuxt] Could not resolve id virtual:pwa-info

[nuxt] Could not resolve id virtual:pwa-info /path/to/project/locally

sw.js: The script has an unsupported MIME type ('text/html').

Hi,
As I have enabled the dev options for PWA, I can see Chrome's install button and I see there exists a service worker and everything looks fine. However, when I build and deploy it, I can see there's a request made in the networks tab asking for sw.js, but the Nuxt server returns a 404 page instead of the script. What's the problem?
Here's my nuxt.config.ts, irrelevant properties removed:

import vuetify from 'vite-plugin-vuetify'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  components: {
    global: true,
    dirs: ['~/components'],
  },
  ssr: false,
  routeRules: {
    '/**': { prerender: true },
    '/api/**': { static: false, cache: false },
  },
  nitro: {
    noExternals: false,
    preset: 'vercel',
  },
  pwa: {
    registerWebManifestInRouteRules: true,
    strategies: 'generateSW',
    injectRegister: 'auto',
    registerType: 'autoUpdate',
    workbox: {
      navigateFallback: '/home',
      navigateFallbackDenylist: [/\/api\/.*/],
    },
    client: {
      installPrompt: true,
      periodicSyncForUpdates: 20,
    },
    devOptions: {
      enabled: true,
      type: 'module',
    },
  },
})

Doesn't work in nuxt 3.2.0

This module doesn't generate manifest.json/manifest.webmanifest in production mode with nuxt 3.2.0 (Current latest version)

VitePWA only caches "/" and (as a possible result) only renders index (/) when running middleware code.

------------------------------
- Operating System: Windows_NT
- Node Version:     v18.16.0
- Nuxt Version:     3.6.5
- Nitro Version:    2.5.2
- Package Manager:  [email protected]
- Builder:          vite
- User Config:      pages, ssr, debug, dev, modules, pwa, app, vue, ignore
- Runtime Modules:  @nuxt/[email protected], @vite-pwa/nuxt
- Build Modules:    -
------------------------------

pwa: {
    registerType: "autoUpdate",
    manifest: {
      name: "HelpCenter",
      short_name: "HelpCenter",
      theme_color: "#35B05F",
      background_color: "#FFFFFF",
      icons: [
        {
          src: "/img/pwa-192x192.png",
          sizes: "192x192",
          type: "image/png",
        },
        {
          src: "/img/pwa-512x512.png",
          sizes: "512x512",
          type: "image/png",
        },
      ],
    },
      workbox: {
        navigateFallback: "/",
          globPatterns: ["**!/!*.{js,css,html,ico,png,jpg,jpeg,svg}"],
      },
    devOptions: {
      enabled: true,
      type: "module",
    },
  }

Since i've updated my nuxt version VitePWA/Nuxt acts very weird.

It only caches "/" instead of every (possible) route, spams alot of errors in console

Errors in console

As a result it also renders the index "/" whenever nuxt runs middleware code. resulting in flashes when navigating. Sometimes it even wont allow me to navigate to other pages. I see the url changing but before it even renders the page it returns to the index

Completly disbaling the plugin fixes these issues. I hope you'll take a look into it!

Bug fix: $pwa.isInstalled ref update for nuxt3. (it does not work now, but i have solution)

export default function usePWAState () {
  const c = new AbortController()
  const state = reactive({
    mode: 'browser'
  })

  state.mode = ['fullscreen', 'standalone', 'minimal-ui'].find(displayMode => process.client && window.matchMedia(`(display-mode: ${displayMode})`).matches) ?? 'browser'

  onMounted(() => {
    if (process.client) {
      for (const displayMode of ['fullscreen', 'standalone', 'minimal-ui']) {
        window.matchMedia(`(display-mode: ${displayMode})`).addEventListener('change', (e) => {
          state.mode = e.matches ? displayMode : 'browser'
        }, { signal: c.signal })
      }
    }
  })

  onUnmounted(() => {
    c.abort()
  })

  return computed(() => state)
}

Please, analyze that code in order to improve code of this PWA package at least for nuxt3. As you can see, this code sets state mode of pwa. By 'mode' I mean the place where is opened app. This is very important code as it is not static (as it is now). So whenever user switch from browser to app or vide-versa, my app will always see this by watch state.mode ref.

Version 0.0.6 doesn't work in Vercel.

Version 0.0.6 doesn't work in vercel with nuxt 3.2.3 (current latest version).
Works fine in localhost. But when deplyed in vercel, it doesn't work.
Doesn't generate sw,js (status 404)

Also invalid register time =>

[Bug] The classname of the page does not change based on the route

Bug

I'm having a serious bug where the classname of a page doesn't change based on the route

On the /about page, the class name should be about-page, but it is index-page

about.vue

<template>
  <div class="about-page">
    <div>Nuxt Vite PWA</div>
    <NuxtLink to="/">
      Home 1
    </NuxtLink>
  </div>
</template>

index.vue

<template>
  <div class="index-page">
    <div>Nuxt Vite PWA</div>
    <NuxtLink to="/about">
      About
    </NuxtLink>
  </div>
</template>

Other

No matter what page I visit, the result is always the content of the index page. Is this normal?

PreCache Strategy error.

Hi guys... i have this error in my NUXT 3 APP... Can you help me please?

workbox-5357ef54.js:2582 Uncaught (in promise) bad-precaching-response: The precaching request for 'http://localhost:3000/' failed with an HTTP status of 404.
at PrecacheStrategy._handleInstall (http://localhost:3000/workbox-5357ef54.js:2582:17)
at async PrecacheStrategy._handle (http://localhost:3000/workbox-5357ef54.js:2511:18)
at async PrecacheStrategy._getResponse (http://localhost:3000/workbox-5357ef54.js:2360:22)

Need clarification on $pwa properties

Hi all,

First, thank you for your time and for sharing this Nuxt module.
It would be great to clarify the meaning/usage of $pwa.

export interface PwaInjection {
  isInstalled: boolean
  showInstallPrompt: Ref<boolean>
  cancelInstall: () => void
  install: () => Promise<void>
  swActivated: Ref<boolean>
  registrationError: Ref<boolean>
  offlineReady: Ref<boolean>
  needRefresh: Ref<boolean>
  updateServiceWorker: (reloadPage?: boolean | undefined) => Promise<void>
  cancelPrompt: () => Promise<void>
  getSWRegistration: () => ServiceWorkerRegistration | undefined
}

I tried to understand by looking at the doc and the playground, but I can't get a full picture.
Here is what I understand so far, and some related questions.

isInstalled: true when PWA is installed on the device.
showInstallPrompt: This seems to be a state, but what is impacting its value?
cancelInstall: What does this method?
install: Install the PWA. What if called while already installed?
swActivated: state of the activation of the service worker.
registrationError: indicate if an error occurred during SW registration. How to get the error?
offlineReady: What does it mean exactly? What is impacting its value?
needRefresh: What does it mean exactly? What is impacting its value?
updateServiceWorker: Method to update SW when an update is pending. Is it related to needRefresh?
cancelPrompt: What does this method? Is it related to cancelInstall?
getSWRegistration: Get the SW registration.

Suggestions

May I suggest:

To add a sequence diagrams to the documentation showing at least install and update process (I can help with this once I understand better).
To improve the naming consistency (I can also help with this once the nomenclature is confirmed):
- ServiceWorker in place of sw or SW.
- 'is' or 'has' prefix for state.
- Clarify what is 'Prompt'.

Thanks in advance for your help.

offline not working

Hi,

When I enable the "offline" option, I receive an error message saying "You are not connected to the internet." When I disable the "offline" option and stop the project, I get the error message (failed)net::ERR_CONNECTION_REFUSED. What should I do to make it work in an offline mode?

repo: https://github.com/tepecam18/my-app

BaseUrl in App section of nuxt.config.ts and manifest.webmanifest

I have a Nuxt 3 project using Vite-Pwa-Nuxt plugin.
When I deploy the application on the domain root without a particular path, so with an empty baseUrl of the app (app section in nuxt.config.ts), the manifest.webmanifest file is generated in the public folder and it works correctly.

When I deploy the application on a path of the domain, for example myPath, so with baseUrl equal myPath, the manifest.webmanifest file is generated in the myPath subdirectory of the public folder and it does not work. The manifest is not found by the navigator.

What am I doing wrong ?

Nuxt build error after adding PWA module

Trying the build after adding the module with basic config like the one in the example repo, I get "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed", ( node v16 with yarn )

<--- Last few GCs --->

[85014:0x150008000]    63684 ms: Mark-sweep 2010.2 (2086.9) -> 1994.8 (2087.7) MB, 1612.3 / 0.0 ms  (average mu = 0.098, current mu = 0.025) allocation failure scavenge might not succeed
[85014:0x150008000]    65226 ms: Mark-sweep 2011.9 (2088.5) -> 1997.4 (2090.0) MB, 1481.2 / 0.0 ms  (average mu = 0.070, current mu = 0.040) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x104d79c84 node::Abort() [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
 2: 0x104d79e74 node::ModifyCodeGenerationFromStrings(v8::Local<v8::Context>, v8::Local<v8::Value>, bool) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
 3: 0x104ebe840 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
 4: 0x104ebe800 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
 5: 0x105041d1c v8::internal::Heap::GarbageCollectionReasonToString(v8::internal::GarbageCollectionReason) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
 6: 0x10504532c v8::internal::Heap::CollectSharedGarbage(v8::internal::GarbageCollectionReason) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
 7: 0x1050424e4 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
 8: 0x10503fe0c v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
 9: 0x10504bb84 v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
10: 0x10504bc18 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
11: 0x10501eaac v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
12: 0x105356bd0 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
13: 0x10566a08c Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
14: 0x10b0e0414 
15: 0x10ac71e68 
16: 0x10acaf5c8 
17: 0x10b9faef4 
18: 0x10b7a127c 
19: 0x10b7a0860 
20: 0x10acdfca0 
21: 0x10b1e2784 
22: 0x10ac8bd84 
23: 0x10acdfe40 
24: 0x10b193abc 
25: 0x10b81389c 
26: 0x10a5db550 
27: 0x1055fdd18 Builtins_InterpreterEntryTrampoline [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
28: 0x10562d314 Builtins_AsyncFunctionAwaitResolveClosure [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
29: 0x1056b2178 Builtins_PromiseFulfillReactionJob [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
30: 0x10561f6f4 Builtins_RunMicrotasks [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
31: 0x1055fb9e4 Builtins_JSRunMicrotasksEntry [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
32: 0x104fce4cc v8::internal::(anonymous namespace)::Invoke(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
33: 0x104fce900 v8::internal::(anonymous namespace)::InvokeWithTryCatch(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
34: 0x104fce9ec v8::internal::Execution::TryRunMicrotasks(v8::internal::Isolate*, v8::internal::MicrotaskQueue*, v8::internal::MaybeHandle<v8::internal::Object>*) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
35: 0x104ff1628 v8::internal::MicrotaskQueue::RunMicrotasks(v8::internal::Isolate*) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
36: 0x104ff1ebc v8::internal::MicrotaskQueue::PerformCheckpoint(v8::Isolate*) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
37: 0x104cc9c4c node::InternalCallbackScope::Close() [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
38: 0x104cc97c4 node::InternalCallbackScope::~InternalCallbackScope() [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
39: 0x104d7ce38 node::fs::FileHandle::CloseReq::Resolve() [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
40: 0x104d92190 node::fs::FileHandle::ClosePromise()::$_0::__invoke(uv_fs_s*) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
41: 0x104d765bc node::MakeLibuvRequestCallback<uv_fs_s, void (*)(uv_fs_s*)>::Wrapper(uv_fs_s*) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
42: 0x1055dc0c0 uv__work_done [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
43: 0x1055df85c uv__async_io [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
44: 0x1055f15a8 uv__io_poll [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
45: 0x1055dfcec uv_run [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
46: 0x104cca6d4 node::SpinEventLoop(node::Environment*) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
47: 0x104db3a90 node::NodeMainInstance::Run(int*, node::Environment*) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
48: 0x104db3770 node::NodeMainInstance::Run() [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
49: 0x104d4de38 node::Start(int, char**) [/Users/abderrahmane.badry/.nvm/versions/node/v16.18.1/bin/node]
50: 0x1b0227e50 start [/usr/lib/dyld]
error Command failed with signal "SIGABRT".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Service workers are not generated with static build

Currently, when I do a nuxt generate, the service worker is generated (sw.js and workbox file) in .output/public but remove after that during the generation process.

Configuration

export default defineNuxtConfig({
  modules: [
    '@vite-pwa/nuxt'
  ],
  pwa: {
    manifest: false,
    injectRegister: 'auto'
  }
})

[Feature Request] i18n manifest.json generation based on provided localized options

Current behavior:

At the moment Nuxt PWA module supports a single-dimensional set of properties that only assumes 1 possible language for generated manifest.

manifest: {
      name: 'Nuxt Vite PWA',
      short_name: 'NuxtVitePWA',
      theme_color: '#ffffff',
      icons: [
        {
          src: 'pwa-192x192.png',
          sizes: '192x192',
          type: 'image/png',
        },
        {
          src: 'pwa-512x512.png',
          sizes: '512x512',
          type: 'image/png',
        },
        {
          src: 'pwa-512x512.png',
          sizes: '512x512',
          type: 'image/png',
          purpose: 'any maskable',
        },
      ],
    },

How should it be

In order to properly reflect i18n nature of the application vite-pwa-plugin should support a multidimensional manifest object where each key will be related to the application locale:

manifest: {
      en: {
          name: 'Nuxt Vite PWA EN',
          short_name: 'NuxtVitePWA EN',
          ...
       },
       fr: {
          name: 'Nuxt Vite PWA FR',
          short_name: 'NuxtVitePWA FR',
          ...
       },
       es: {
           name: 'Nuxt Vite PWA ES',
          short_name: 'NuxtVitePWA ES',
          ...
       }
    },

Specifying manifest options in the above way should result in the generation of 3 manifest files:

en.manifest.json
fr.manifest.json
es.manifest.json

Next I, as a developer, will be able able to dynamically point to different file based on the currently selected locale using useHeade composable updating the link

<!-- If English is detected, the script will load this into the page -->
<link rel="manifest" href="/path.../en.manifest.json">

<!-- If French is detected, the script will load this instead -->
<link rel="manifest" href="/path.../fr.manifest.json">

<!-- If Spanish is detected, the script will load this instead -->
<link rel="manifest" href="/path.../es.manifest.json">

Bonus point

Integrating the above switching with additional options that would define the locale strategy might also be a good idea. e.g. one of the options might be:

pwa: {
   i18n: {
     strategy: 'route'
   }
}

this will assume the language detection should be handled based on the application route, which should also be a default option since this is the most common way for taking i18n on the web.

[Bug Report] missing types PwaInjection with nuxt

.nuxt/templates.pwa.client.74d38fec.ts:5:35 - error TS2307: Cannot find module '../src/types' or its corresponding type declarations.

5 import { type PwaInjection } from '../src/types'
                                    ~~~~~~~~~~~~~~


Found 1 error in .nuxt/templates.pwa.client.74d38fec.ts:5

How to reproduce

git clone https://github.com/antfu/vitesse-nuxt3
pnpm i
npm run typecheck

$pwa is always false

I followed https://vite-pwa-org.netlify.app/frameworks/nuxt.html along with issues in the repo, created assets using https://vite-pwa-org.netlify.app/assets-generator/ and read https://vite-pwa-org.netlify.app/guide/pwa-minimal-requirements.html. Also, check the example at https://vite-pwa-org.netlify.app/examples/nuxt.html -> https://github.com/vite-pwa/nuxt/tree/main/playground.

In my view-source:http://localhost:3000/ I can't see <link rel="manifest" href="/manifest.webmanifest"> or any other file related to PWA, such as favicon.

Additionally, I've deployed the app to https://ibstructure.com and the PWA works, but the $pwa is still false. It's really confusing when trying to validate during development (esp. on localhost with bad documentation/localhost-PWA problems) whether the app is PWA working.

[@vite-pwa/nuxt] TypeError: window.matchMedia is not a function

I use Nuxt 3 with Vitest (nuxt-vitest module) and when I run tests, I have this error repeatedmany times:

stderr | unknown test
[nuxt] error caught during app initialization TypeError: window.matchMedia is not a function
    at C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\.nuxt\templates.pwa.client.d26fd198.ts:18:29
    at C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:112:60
    at fn (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:156:44)
    at Object.runWithContext (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:3855:18)
    at callWithNuxt (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:161:24)
    at Object.runWithContext (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:32:29)
    at applyPlugin (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:112:39)
    at Module.applyPlugins (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:125:21)
    at initApp (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\entry.js:55:7)
    at Object.setup (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\vitest-environment-nuxt\dist\index.mjs:125:5)
[nuxt] error caught during app initialization TypeError: $localePath is not a function
    at C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@frontend\nuxt-layer-base\middleware\f24-auth.global.ts:70:57
    at C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\pages\runtime\plugins\router.js:133:26 {
  statusCode: 500,
  fatal: false,
  unhandled: false,
  __nuxt_error: true
}
[Vue warn]: Unhandled error during execution of setup function
  at <Error error= TypeError: window.matchMedia is not a function
    at C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\.nuxt\templates.pwa.client.d26fd198.ts:18:29
    at C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:112:60
    at fn (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:156:44)
    at Object.runWithContext (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:3855:18)
    at callWithNuxt (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:161:24)
    at Object.runWithContext (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:32:29)
    at applyPlugin (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:112:39)
    at Module.applyPlugins (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:125:21)
    at initApp (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\entry.js:55:7)
    at Object.setup (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\vitest-environment-nuxt\dist\index.mjs:125:5) >
  at <Error key=0 error= TypeError: window.matchMedia is not a function
    at C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\.nuxt\templates.pwa.client.d26fd198.ts:18:29
    at C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:112:60
    at fn (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:156:44)
    at Object.runWithContext (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:3855:18)
    at callWithNuxt (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:161:24)
    at Object.runWithContext (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:32:29)
    at applyPlugin (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:112:39)
    at Module.applyPlugins (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:125:21)
    at initApp (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\entry.js:55:7)
    at Object.setup (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\vitest-environment-nuxt\dist\index.mjs:125:5) >
  at <NuxtRoot>
[nuxt] error caught during app initialization SyntaxError: Need to install with `app.use` function
    at Module.createCompileError (file:///C:/Users/Jakub%20Schulz/Desktop/PRACA/SAT-TECH%20sp.%20z%20o.o/f24-admin/node_modules/@intlify/core-base/node_modules/@intlify/message-compiler/dist/message-compiler.mjs:54:19)
    at createI18nError (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\vue-i18n\dist\vue-i18n.runtime.mjs:97:34)
    at Module.useI18n (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\vue-i18n\dist\vue-i18n.runtime.mjs:2253:15)
    at Module.useLocalePath (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\vue-i18n-routing\dist\vue-i18n-routing.mjs:980:32)
    at Module.useLocalePath (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@nuxtjs\i18n\dist\runtime\composables.mjs:23:32)
    at setup (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@frontend\nuxt-layer-base\components\view\Error.vue:26:46)
    at callWithErrorHandling (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:156:18)
    at setupStatefulComponent (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7190:25)
    at setupComponent (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7151:36)
    at mountComponent (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:5555:7) {
  code: 18,
  domain: undefined
}

Workaround
When I disable this module and remove VitePwaManifest component from app.vue, tests works fine.

~/app.vue

~/nuxt.config.ts

export default defineNuxtConfig({
	// ...
	modules: [
		// ...
		process.env.NODE_ENV !== 'test' && ['@vite-pwa/nuxt', pwaOptions],
	],
});

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

With the latest version of nuxt 3.7.3, when using @vite-pwa/nuxt with this dependency, when going into the secondary route, I can't get in, and when I visit it, it automatically goes back to the home page.

For example: dxh.netlify.app/b or dxh.netlify.app/b/1

will go back to the home page. When developing locally, everything is fine. After releasing to production. I have this problem. You can refer to the following repository

https://github.com/dxhuii/dxh.me

{
  "private": true,
  "packageManager": "[email protected]",
  "scripts": {
    "build": "nuxi build",
    "dev": "nuxi dev",
    "dev:pwa": "VITE_PLUGIN_PWA=true nuxi dev",
    "start": "node .output/server/index.mjs",
    "typecheck": "vue-tsc --noEmit",
    "lint": "eslint .",
    "postinstall": "nuxi prepare",
    "generate": "nuxi generate",
    "start:generate": "npx serve .output/public"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^0.42.0",
    "@iconify-json/carbon": "^1.1.21",
    "@iconify-json/ri": "^1.1.12",
    "@iconify-json/twemoji": "^1.1.12",
    "@nuxt/devtools": "^0.8.3",
    "@nuxtjs/color-mode": "^3.3.0",
    "@pinia/nuxt": "^0.4.11",
    "@unocss/eslint-config": "^0.55.7",
    "@unocss/nuxt": "^0.55.7",
    "@vite-pwa/nuxt": "^0.1.1",
    "@vue-macros/nuxt": "^1.8.1",
    "@vueuse/nuxt": "^10.4.1",
    "eslint": "^8.49.0",
    "nuxt": "^3.7.3",
    "pinia": "^2.1.6",
    "typescript": "^5.2.2",
    "vue-tsc": "^1.8.8"
  }
}

Is it possible to disable the PWA/worker on certain routes?

I want to disable the PWA for certain routes where I do not need PWA functionality. Is that possible with this module?

No page is added to precache after visit

I'm not able to write the workbox sw-script by my self, therefor I am using generateSW.

I want the pages to be cached after use, so I can use them offline in my pwa.
But no page is added to workbox-precache after visit.
The service-worker is REDUNDANT.

My nuxt.config

 pwa: {
    strategies: 'generateSW',
    injectRegister: 'auto',
    registerType: 'autoUpdate',
    workbox: {
      navigateFallback: '/',
      globPatterns: ['**/*.{js,css,html,svg,ico,png}'],
      globIgnores: ['google*.html''],
      cleanupOutdatedCaches: true,
    },
    devOptions: {
      enabled: true,
      navigateFallback: '/'
    },
  },

Here is my deployment on github and Vercel

How do you send native notifications using this package?

The main reason I want to enable my app to be a PWA is native notifications, and this package doesn't seem to mention it anywhere :/

Is there any documentation on that?

expose service worker

Glob Pattern Error

Nuxt: 3.2.2
vite-plugin-pwa: 0.14.4
@vite-pwa/nuxt: 0.0.6

When I run the application with the nuxt dev command, I get a similar error:

 WARN  warnings
  Some items were passed to additionalManifestEntries without revisioning info. This is generally NOT safe. Learn more at https://bit.ly/wb-precache.
  - /

  One of the glob patterns doesn't match any files. Please remove or fix the following: {
  "globDirectory": "/Users/matvejmelishev/Desktop/example/client/.nuxt/dev-sw-dist",
  "globPattern": "**/*.{js,css,html}",
  "globIgnores": [
    "**/node_modules/**/*",
    "sw.js",
    "workbox-*.js"
  ]
}

But my configuration of the plugin with respect to global patterns is absolutely default

Better documentation regarding custom service workers

I'm trying to add push notifications to a nuxt 3 app that uses @vite-pwa/nuxt, however there is very little documentation on extending the service workers to allow for this.

The only official documentation I could find was this
However, the given repo doesn't use @vite-pwa/nuxt right now, siting that it needs to be added back upon release. Is this because this module doesn't support custom service-worker code?

There are also unanswered questions on stack-overflow pointing out the same issues

There is documentation regarding vite-pwa (not specific to nuxt), however the given configuration options do not seem to do anything when used in conjunction with @vite-pwa/nuxt and lead to errors within the code (this is discussed more in the stack-overflow question above).

Would it be possible to provide proper documentation regarding the official way of registering custom service-worker code?

Publishable APK

I have a website and I want most part of it in a mobile App.
Is it possible to create its PWA and publishable APK of the Nuxt 3 project using vite-pwa?
And is it possible to detect if it is on the web or running as App on Android?

Example is missing sw.js/dev-sw.js/dev-sw.js?dev-sw

Based on the logs I receive in my current project

[Vue Router warn]: No match found for location with path "/dev-sw.js?dev-sw"
[Vue Router warn]: No match found for location with path "/dev-sw.js"

and #54, #57, it'd be very beneficial to have the service worker file in the example. It'd clarify lots of doubts.

Not working on nuxt 3.3.1

My config

pwa: {
    registerType: "autoUpdate",
    manifest: {
      name: "Permadi",
      short_name: "Permadi",
      theme_color: "#004643",
      icons: [
        {
          src: "icon.png",
          sizes: "192x192",
          type: "image/png",
        },
        {
          src: "icon",
          sizes: "512x512",
          type: "image/png",
        },

        {
          src: "icon.png",
          sizes: "512x512",
          type: "image/png",
          purpose: "any maskable",
        },
      ],
    },
    workbox: {
      navigateFallback: "/",
      globPatterns: ["**/*.{js,css,html,png,svg,ico}"],
    },
  },

On Netilfy Lighthouse report

No manifest was fetched

200.html / 400.html - without file extension in service worker

Hello

I am new to nuxt and vite-pwa, so it may well be that I have a configuration error.

 n.precacheAndRoute(
      [
....
        { url: '200', revision: 'f017175f2273a0084e9bc17de70d165d' },
        { url: '404', revision: 'f017175f2273a0084e9bc17de70d165d' },

the created serviceworker file shows a precache for the files 200.html and 404.html. But these are not found and the worker aborts. If I add the entries with the .html everything runs.

my nuxt.config.ts

pwa: {
    injectRegister: 'script',
    //registerType: 'autoUpdate',
    //registerWebManifestInRouteRules: true,
    workbox: {
      //navigateFallback: '/',
      globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
      clientsClaim: true,
      skipWaiting: true,
    },
    installPrompt: true,
    periodicSyncForUpdates: 20,
    client: {
      installPrompt: true,
      periodicSyncForUpdates: 20,
    },
    devOptions: {
      enabled: true,
      type: 'module',
    },
    manifest: {
....
}
}

Service Worker Not being minified

https://stackblitz.com/edit/nuxt-starter-l1gvkq?file=nuxt.config.ts

Reproduction

yarn && yarn run build
code .output/public/sw.js stackblitz wont show and update .output directory? You need manually open it after each build

Info

strategies: 'injectManifest' will inline workbox utils but then it won't minify the service worker itself. With generateSW strategy, vite will minify both sw.js and workbox-*.js files

ERROR Cannot start nuxt: Cannot find package 'vite-plugin-pwa'

Getting below error:

ERROR Cannot start nuxt: Cannot find package 'vite-plugin-pwa' imported from /home/projects/nuxt-starter-zevnog/node_modules/@vite-pwa/nuxt/dist/module.mjs

at InternalError.get (https://nuxtstarterzevnog-al3j.w-credentialless.staticblitz.com/blitz.2913a9f2fedb71678a44d5a6b5e0b08a6f00d17f.js:6:292489)
at eval (file://node_modules/nuxi/dist/shared/nuxi.70a5067d.mjs:27:15129)
at Array.map ()
at Vu.formatArgs (file://node_modules/nuxi/dist/shared/nuxi.70a5067d.mjs:27:15100)
at Vu.formatLogObj (file://node_modules/nuxi/dist/shared/nuxi.70a5067d.mjs:27:51806)
at Vu.log (file://node_modules/nuxi/dist/shared/nuxi.70a5067d.mjs:27:15826)
at Object.log (file://node_modules/nuxi/dist/cli.mjs:85:21)
at _._log (file://node_modules/nuxi/dist/shared/nuxi.70a5067d.mjs:27:7823)
at r (file://node_modules/nuxi/dist/shared/nuxi.70a5067d.mjs:27:7384)
at _._logFn (file://node_modules/nuxi/dist/shared/nuxi.70a5067d.mjs:27:7775)
at _.eval [as error] (file://node_modules/nuxi/dist/shared/nuxi.70a5067d.mjs:27:6561)
at load (file://node_modules/nuxi/dist/chunks/dev.mjs:6829:37)
at async Object.invoke (file://node_modules/nuxi/dist/chunks/dev.mjs:6873:5)
at async _main (file://node_modules/nuxi/dist/cli.mjs:66:20)

after following steps:

npm i @vite-pwa/nuxt -D

nuxt.config.ts :

export default defineNuxtConfig({
modules: ['@vite-pwa/nuxt'],
pwa: {
/* your pwa options */
}
})

CODE :
https://stackblitz.com/edit/nuxt-starter-zevnog?file=nuxt.config.ts

Docs not work

Hi!

Not works:
https://vite-pwa-org.netlify.app/frameworks/nuxt

Warning after installation:

 WARN  Sourcemap for "virtual:nuxt:/<my route to app>/.nuxt/templates.pwa.client.038b569b.ts" points to missing source files

bad-precaching-response - url - manifest.webmanifest - 404

How do i get rid of bad-precaching-response for manifest.webmanifest?

Here is my repo and deployment

$pwa.showInstallPrompt always false?

I'm building a Nuxt 3 app and would like to show an install prompt if the user has not installed the PWA yet. From reading the docs, my understanding is that I could just check the value of $pwa.showInstallPrompt like the way elk does it to determine whether to show the prompt. However, it seems like the value is always false. What am I missing?

<template>
    ...
    <PwaInstallPrompt v-if="$pwa.showInstallPrompt"/>
    ...
<template>

Here's my pwa config in nuxt.config.ts.

pwa: {
    manifest: {
      name: 'Codashop',
      short_name: 'Codashop',
      start_url: '/?utm_source=pwa',
      icons,
      display: 'standalone',
      orientation: 'portrait',
      background_color: '#280031',
      theme_color: '#280031',
    },
    devOptions: { enabled: true, type: 'module' },
    client: {
      installPrompt: true,
    },
  }

urlPattern doesn't work as expected

I have this rule for one of runtimeCaching rules in config. If request is without query all works, but if I add query to request string - caching isn't working
{ urlPattern: '${WPJsonUrl}/posts', handler: 'StaleWhileRevalidate', method: 'GET', options: { cacheName: 'test-categories', expiration: { maxEntries: 1, maxAgeSeconds: 10 * 24 * 60 * 60, }, cacheableResponse: { statuses: [0, 200] }, }, },
I tryed to write string like ${WPJsonUrl}/posts.*, but nothing changed.
If string in browser request will be like /posts?page=1&per_page=7&_embed=true caching will not work=(
I think problem is that regex isn't working with the urlPattern property.
In my nuxt2 project urlPattern: ${WPJsonUrl}/posts worked fine

$pwa is of type 'unknown' type error

More in the screenshot above , any ideas how to resolve this ?

How to drop some nuxt runtime config into service worker context?

My app needs to make requests to the api. The api endpoint is set in a runtimeConfig variable that is inlined during assembly so it can be inlined in both context. How can I drop the config into service worker context?

Example is missing head section

As per https://vite-pwa-org.netlify.app/assets-generator/#example-using-minimal-preset the example in https://github.com/vite-pwa/nuxt/tree/main/playground is missing head configuraiton. I can't find any index.html file as it's suggested in the documentation, and it's nowhere in the nuxt.config.ts.

In addition to that, there's a misalignment in the nuxt.config.ts code when it comes to any/maskable

{
          src: 'pwa-512x512.png',
          sizes: '512x512',
          type: 'image/png',
          purpose: 'any maskable',
},

vs documentation suggesting 2 different references for that (which the generator is creating):

{
    src: 'pwa-512x512.png',
    sizes: '512x512',
    type: 'image/png',
    purpose: 'any'  
  },
  {
    src: 'maskable-icon-512x512.png',
    sizes: '512x512',
    type: 'image/png',
    purpose: 'maskable'
  }

Document useNuxtApp usage for TypeScript users

None of the documentation or examples demonstrate that const { $pwa } = useNuxtApp() must be used when lang="ts" is used otherwise $pwa will not typecheck.

Even though it's possible to use $pwa within Vue templates without useNuxtApp, it will cause a TypeScript error.

add $pwa types

How to get Runtime Caching of root "/", mixed with precache of assets.

In my Nuxt application I always SSR the home page, which has a constantly updating list of posts. I'd like to cache it at Runtime, so that if a user reloads while offline, they get the latest version they've seen. At the same time, I'd like most of the rest of my assets to be precached. I can't seem to get this to happen.

My config looks something like this:

export default defineNuxtConfig({
  nitro: {
   // Disabled, as I don't want to serve a prerendered page that could be days-stale:
   // prerender: {
   //   crawlLinks: false,
   //   routes: ['/'],
   // },
  },
  modules: ['@vite-pwa/nuxt'],
  pwa: {
    // Added scope/base mostly from browsing the Elk & Vitesse repos:
    scope: '/',
    base: '/',
    manifest: {   ...  },  // 
    injectRegister: 'auto',
    registerType: 'autoUpdate',
    // Disabled, since I don't want to prerender (but I might have misunderstood what this does):
    // registerWebManifestInRouteRules: true,
    workbox: {
      // Successfully precaches other assets:
      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
      // Try to Runtime Cache the home page:
      runtimeCaching: [{
        urlPattern: "/",
        handler: 'NetworkFirst',
      }]
      // Don't use navigationFallback because "/" isn't in our precache manfiest:
      // navigationFallback: '/'
    },
  },
})

If I uncomment the commented lines, I can get it working - however then I'm stuck with prerendering, and what I want is to have the client cache a SSR page. But when I try runtime caching, caching is flakey, because workbox gets a:

non-precached-url: non-precached-url :: [{"url":"index.html"}]

But if it does build the Cache, it's lacking the root. Here's the difference with prerendering and not-prerendering for my Application Cache:

With Prerender	Trying to Runtime Cache

17 entries (including "/")	16 entries (missing "/")

Is there something I'm missing?

PWA Module breaks Nuxt Devtools Module

I haven't gotten to the specific root of the issue, but using both the PWA module and the Devtools module results in the devtools module functionally breaking and entering a redirect loop. Disabling SW network intercept or removing the PWA module resolves the issue.

Broken:

Working:

Sometimes does not register service worker when deployed to Vercel

When i run lighthouse on my Nuxt 3 app that has been deployed to Vercel, the score will sometimes fail due to this "Does not register a service worker" issue:

Sometimes when refreshing the page and running lighthouse again it works fine:

It looks like
This is my config:

´´´
pwa: {
registerType: 'autoUpdate',
manifest: {
name: 'GeoQuestr',
short_name: 'GeoQuestr',
theme_color: '#0a1a1f',
description: 'Build and play location based games.',
background_color: '#0a1a1f',
icons: icons.icons
},
workbox: {
navigateFallback: '/',
globPatterns: ['**/*.{js,css,html,ico,png,svg,gltf,bin}'],
maximumFileSizeToCacheInBytes: 25097152
}
},
´´´

Any ideas why its not stable? Also, the asset downloads by the service worker is super slow, is this related to any throttling on vercel's side?