Open sawa-ko opened 1 year ago
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
@kevinmarrec First, fix this in your example 👇🏻
@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 is this issue related to offline assets??
@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)
Are you sure? How to disable this module in dev
@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?
@kevinmarrec I am waiting for your response.
@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
No I am sure error in sw.js
Nuxt.config.js code - https://goonlinetools.com/snapshot/code/#40sxvtg9y5t469zw2e2b1p
@rahulkumarsingh73690 You're right, I was missing a closing bracket, I've updated by snippet above.
@kevinmarrec Page not found: /dev-sw.js?dev-sw error in dev when i am using custom sw.js
@kevinmarrec Is there any way to exclude all external script?
Google Analytics and Clarity is slatewhile
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
Logs
Browser console