kevinmarrec
Module not working and all crashed
When I install and use the nuxt-pwa module, all other modules stop working.
For example, in the screenshot the @nuxtjs/tailwindcss module stopped working.
Config
pwa: {
icon: {
fileName: 'favicon.webp',
splash: {
backgroundColor: DarkColor[600],
targetDir: '/',
devices: [],
},
},
workbox: {
enabled: true,
},
},
Logs
Nuxi 3.0.0 21:50:29
Nuxt 3.0.0 with Nitro 1.0.0 21:50:29
21:50:36
> Local: http://localhost:3000/
> Network: http://192.168.100.143:3000/
21:50:29
i Using html-validate to validate server-rendered HTML 21:50:39
i Using default Tailwind CSS file from runtime/tailwind.css nuxt:tailwindcss 21:50:41
WARN [PWA] Workbox is running in development mode 21:50:43
21:50:43
SEO Kit v0.4.14 • All-in-one SEO by @harlan_zw 21:50:43
└─ 💖 Like this package? Consider sponsoring me on GitHub https://github.com/sponsors/harlan-zw 21:50:43
21:50:43
i Tailwind Viewer: http://localhost:3000/_tailwind/ nuxt:tailwindcss 21:50:46
√ PWA icons and splash screens generated in 12862 ms 21:50:59
i Vite client warmed up in 6064ms 21:51:06
√ Nitro built in 1571 ms
Browser console
Same issue on my site I tried many times.
I am using nuxt tailwind for ui
@kaname-png @rahulkumarsingh73690 Is this happening when pairing with @nuxtjs/tailwindcss only ?
Also please share a reproduction repository or Stackblitz (https://stackblitz.com/)
In my project, this happens with only a tailwind or maybe daisyui. tailwindcss is not loading offline or online
Here is the complete browser log - https://goonlinetools.com/snapshot/code/#d0lmtj1np76gj7t6q9yezs
@rahulkumarsingh73690 Thank you for your feedback, could you share your repository if public or create a reproduction so I can reproduce it straight away and find a fix ? Cause I'm afraid I won't be able to debug it other way. Thanks.
Sorry my repo is private and I tried to figure out issue but I can't
If you have any public codesandbox template of PWA module then please share
@rahulkumarsingh73690
https://stackblitz.com/github/kevinmarrec/nuxt-pwa-module
You can directly edit the example folder which is a minimal app using the latest local version of this module.
Click on Fork and have some additions to reproduce the issue, then share it to me and I'll take a look !
@rahulkumarsingh73690 Do you have any updates on this ? With no reproduction for now as well as no news from the issue creator since 2 weeks, I may just close this issue in the next days.
@kevinmarrec Sorry, I can't provide a reproduction because of my busy schedule. I am trying now
@rahulkumarsingh73690 How have you been able to get these installability issues ?
I'm not able to see them 👇
Please check this repo - https://github.com/rahulkumarsingh73690/nuxt-pwa-bug
I am not sure but some css classes isn't working after applying pwa workbox true
@kevinmarrec
https://user-images.githubusercontent.com/37482171/217570203-be6b3f03-dc05-46a3-99ec-45d382ac2178.mp4
@rahulkumarsingh73690 I think this is simply caused by using Workbox in development, you should expect no issues if doing nuxi build + nuxi start/nuxi preview (production build), instead of running Workbox on nuxi dev.
I may repeat myself at some places but Workbox in development is not reliable with Nuxt/Vite dev server, so you can expect assets issues with the worker enabled in development.
EDIT: Tried your project, it just run fine with production build, so it's about using a Service Worker in development (which I don't recommend, it should be enabled only for testing purposes and not for daily development)
@rahulkumarsingh73690 Yes, it's described in https://github.com/kevinmarrec/nuxt-pwa-module#configuration, it's enabled for production by default, so you just need to remove pwa.workbox.enabled from your nuxt.config.ts.
export default defineNuxtConfig({ modules: ["@nuxtjs/tailwindcss", "@kevinmarrec/nuxt-pwa"], });
Correct?
@rahulkumarsingh73690 Yes. with last version of the module it should also delete the local service worker you had on localhost (before you needed to clear browser cache to totally remove the Service Worker that has been registered when enabled was true)
@kevinmarrec Is there any way to exclude some components from offline assets? My adsense ad is not working?
@rahulkumarsingh73690 The adsense is an external script right ? I'm wondering why is it trying to apply a StaleWhileRevalidate strategy on it, does this happen with extra options you gave to this module ? Is this happening when offline ?
@kevinmarrec Online and offline same error. I didn't changed anything used default configuration
@kevinmarrec Is there any way to exclude components from offline assets?
@rahulkumarsingh73690 Right now you can't exclude components from offline assets easily, you can use pwa.workbox.templatePath option to provide a custom Service Worker, copy https://github.com/kevinmarrec/nuxt-pwa-module/blob/main/templates/workbox/sw.js and change this section : https://github.com/kevinmarrec/nuxt-pwa-module/blob/bf937167c1012aba0e7d450524e8bbce6f9f22ac/templates/workbox/sw.js#L28-L40
@kevinmarrec Do you mean I need to disable the entire caching?
@rahulkumarsingh73690 No, you can copy the template, change only this part, you could do :
request.destination === 'manifest' ||
request.destination === 'style' ||
(request.destination === 'script' && !request.url.includes('adsbygoogle')) ||
request.destination === 'worker'
This would exclude the Google Ads script from the rule, and therefore not caching it while still caching everything else.
Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://0ab6d6bd.nuxt.pages.dev/') with script ('https://0ab6d6bd.nuxt.pages.dev/sw.js'): ServiceWorker script evaluation failed
When I tried to use custom sw.js - https://goonlinetools.com/snapshot/code/#05em17oul49i6i540xxlqbc
@rahulkumarsingh73690 I don't think your error is related to this change, there must be something else that triggers the failure