Module not working and all crashed

[sawa-ko]

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

[rahulkumarsingh73690]

Same issue on my site I tried many times.

I am using nuxt tailwind for ui

[kevinmarrec]

@kaname-png @rahulkumarsingh73690 Is this happening when pairing with @nuxtjs/tailwindcss only ?

Also please share a reproduction repository or Stackblitz (https://stackblitz.com/)

[rahulkumarsingh73690]

In my project, this happens with only a tailwind or maybe daisyui. tailwindcss is not loading offline or online

[rahulkumarsingh73690]

Here is the complete browser log - https://goonlinetools.com/snapshot/code/#d0lmtj1np76gj7t6q9yezs

[kevinmarrec]

@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.

[rahulkumarsingh73690]

Sorry my repo is private and I tried to figure out issue but I can't

[rahulkumarsingh73690]

If you have any public codesandbox template of PWA module then please share

[kevinmarrec]

@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 !

[kevinmarrec]

@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.

[rahulkumarsingh73690]

@kevinmarrec Sorry, I can't provide a reproduction because of my busy schedule. I am trying now

[rahulkumarsingh73690]

@kevinmarrec First, fix this in your example 👇🏻

[kevinmarrec]

@rahulkumarsingh73690 How have you been able to get these installability issues ?

I'm not able to see them 👇

[rahulkumarsingh73690]

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

[rahulkumarsingh73690]

@kevinmarrec

Nuxt.PWA.-.Google.Chrome.2023-02-08.20-42-16.mp4

[rahulkumarsingh73690]

@kevinmarrec is this issue related to offline assets??

[kevinmarrec]

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

Are you sure? How to disable this module in dev

[kevinmarrec]

@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.

[rahulkumarsingh73690]

export default defineNuxtConfig({
modules: ["@nuxtjs/tailwindcss", "@kevinmarrec/nuxt-pwa"],
});

Correct?

[kevinmarrec]

@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)

[rahulkumarsingh73690]

@kevinmarrec Is there any way to exclude some components from offline assets? My adsense ad is not working?

[rahulkumarsingh73690]

@kevinmarrec I am waiting for your response.

[kevinmarrec]

@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 ?

[rahulkumarsingh73690]

@kevinmarrec Online and offline same error. I didn't changed anything used default configuration

[rahulkumarsingh73690]

@kevinmarrec Is there any way to exclude components from offline assets?

[kevinmarrec]

@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 :

nuxt-pwa-module/templates/workbox/sw.js

Lines 28 to 40 in bf93716

	registerRoute(
	({ request }) =>
	request.destination === 'manifest' ||
	request.destination === 'style' ||
	request.destination === 'script' ||
	request.destination === 'worker',
	new StaleWhileRevalidate({
	cacheName: 'assets',
	plugins: [
	new CacheableResponsePlugin({ statuses: [200] })
	]
	})
	)

[rahulkumarsingh73690]

@kevinmarrec Do you mean I need to disable the entire caching?

[kevinmarrec]

@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.

[rahulkumarsingh73690]

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

[kevinmarrec]

@rahulkumarsingh73690 I don't think your error is related to this change, there must be something else that triggers the failure

[rahulkumarsingh73690]

No I am sure error in sw.js

Nuxt.config.js code - https://goonlinetools.com/snapshot/code/#40sxvtg9y5t469zw2e2b1p

[kevinmarrec]

@rahulkumarsingh73690 You're right, I was missing a closing bracket, I've updated by snippet above.

[rahulkumarsingh73690]

#58 Is changing the code in sw.js to make auto-update possible? If possible please suggest changes here https://goonlinetools.com/snapshot/code/#05em17oul49i6i540xxlqbc (fork and change)

[rahulkumarsingh73690]

@kevinmarrec Page not found: /dev-sw.js?dev-sw error in dev when i am using custom sw.js

[rahulkumarsingh73690]

@kevinmarrec Is there any way to exclude all external script?

Google Analytics and Clarity is slatewhile