Closed Baroshem closed 2 years ago
Hey ! Are you using last version ? Cause I fixed a regression regarding a similar issue in v0.2.1 :)
Hey, I downloaded the version 3 hours ago so not sure if that was the last one I will check it out!
Are you maybe using custom Nuxt baseURL
?
I havent changed anything. My version of Nuxt is rc3, my nuxt.config.ts contains kodules declaration and publicRuntimeConfig declaration for GraphQL client. I will try to debug it today and will let you know :)
@Baroshem Let me know, and if your project is public we can debug from your repository
Hey @kevinmarrec
I tried to include the module here -> https://github.com/Baroshem/nuxt-shopify-tailwind
I added the module as per instructions and observed the issue I mentioned in the bug. I have not submitted the code with this change yet but will do that in few clicks on a separate branch.
Can this issue be caused by the fact that I have some files in the public
directory?
Here is the branch with added pwa module and the error appears -> https://github.com/Baroshem/nuxt-shopify-tailwind/tree/feat/pwa
@Baroshem Thanks, I'll have a closer look tomorrow.
Could you try to remove ssr: false
in the meantime to see if it can be related ? Thanks !
EDIT: I can't really test your repository without having Shopify-ready environment, is there a way you are able to reproduce the issue without Shopify ?
Hey, I have actually removed all modules except for yours and whole html section and just left the pwa config and it still does not work
My nuxt config
import { defineNuxtConfig } from "nuxt";
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
// ssr: false,
modules: ["@kevinmarrec/nuxt-pwa"],
pwa: {
workbox: {
enabled: true
}
},
// runtimeConfig: {
// public: {
// "graphql-client": {
// clients: {
// default: {
// host: process.env.SHOPIFY_DOMAIN,
// token: {
// name: "X-Shopify-Storefront-Access-Token",
// value: process.env.SHOPIFY_STOREFRONT_TOKEN,
// type: null,
// },
// retainToken: true,
// },
// },
// },
// },
// },
});
package.json
{
"name": "nuxt-shopify-tailwind",
"author": "Baroshem",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview"
},
"devDependencies": {
"@nuxtjs/tailwindcss": "^5.1.2",
"nuxt": "3.0.0-rc.3"
},
"dependencies": {
"@kevinmarrec/nuxt-pwa": "^0.2.2",
"nuxt-graphql-client": "^0.0.32"
}
}
You can test it by basically removing everything and it will still not work. I tested it on all major browsers
Alright, thanks, I reproduced it.
It seems that this window event listener is never trigerred : https://github.com/kevinmarrec/nuxt-pwa-module/blob/aa01db1679eee3141d8576b24a62b3779f99960e/src/runtime/workbox/plugin.ts#L8
I'm wondering what is causing this to happen, most likely it can be two things :
@Baroshem Even if something strange seems to happened with Nuxt 3 when opt-in the router (using pages
folder), I think I need to implement the worker registration in another way to fix this.
EDIT: This can't be fixed yet, it sounds that Vue Router makes window load
events fired before Nuxt 3 plugin.
EDIT2: Found a fix, will be shipped in v0.3.0
@kevinmarrec
Reading this comment was a rolercoaster of dramatic action switches :D
Awesome that you fixed it! ❤️
@kevinmarrec
Sorry to bother, but I am still experiencing the same issue (even on version 0.3.0). Everything apart from the Service Worker seems to be generated correctly.
@Baroshem Could you check, in your html code on http://localhost:3000
, if you can find the following injected script : https://github.com/kevinmarrec/nuxt-pwa-module/blob/30f0e61a1515715762acf211a44db1b3fcf00bb2/src/workbox.ts#L33-L38
You should find a <script>
in your HTML that should register the worker.
I have it
I can see the sw.js file in the .nuxt/pwa/sw.js
But it is not available in the sources tab in browser
When I check the navigator.serviceWorker it is there but it is almost empty with a promise pending
I have also removed all other modules in the application and it still does not work :(
@Baroshem Could you try removing pages
folder if you have one, and just use app.vue
? Cause I remember of an issue where adding routing feature (enabled with presence of pages
) could make this happening.
Ultimately, could you please create a repository with minimal reproduction. Just a public github project where the issue occurs, so I can debug from that and help you faster :)
Sure, you can try this one -> https://github.com/Baroshem/nuxt-shopify-tailwind/tree/feat/pwa
I removed the code that required some environment variables so you should be able to just clone it and run it easily.
@Baroshem Thanks, I'll have a try when I get the time.
@kevinmarrec
When I removed the pages dir it started working. But it should not be like that as majority of the Nuxt projects will have a pages directory :(
Do you have any fix/workaround to make it work?
@Baroshem I see. I'll try to debug this asap.
@Baroshem
Using yarn build
then node .output/server/index.mjs
and navigating to http://localhot:3000 works for me.
I'm going to have a try with yarn generate
as the issue may come from here if you use it, but nuxt 3 static generation is quite experimental AFAIK.
This also works in your project branch when using yarn generate
.
I have it available in Sources tab :
Ok thanks!
However it does not work when just running yarn dev right? Because when I delete all pages, it works even without yarn build
You are right, it won't work in dev when having pages
folder, most likely cause an internal Nuxt weird behavior.
I think it's when using layouts, cause it seems to work on dev with pages folder when not using layouts, could you confirm that ?
/cc @danielroe @pi0
Thank you @kevinmarrec then! It solves my issue. Huge kudos to you for keeping up with my issues 😄
If you ever need to test it again, I have left the code on https://github.com/Baroshem/nuxt-shopify-tailwind/tree/feat/pwa-test branch as I want to use feat/pwa for my next video :)
@kevinmarrec What exactly solved the issue then ?
EDIT: I've been testing some behaviors using custom layouts, it still seem to entirely work on dev
, so please let me know what was the issue you had in your project that was causing the behavior, in case it happens to someone else, thanks !
It wont be that easy :D
Basically the issue was that the service worker was not generating. After I run the yarn build it started to work. I dont know it it is a vite cache deps or something else but now it works like a charm.
I think your explanation would be sufficient to fix the issue in the future :)
You can maybe include this issue and the result of it in some kind of FAQ section
Alright, thanks !
Hey,
Thanks for this module!
I have a question regarding the service worker as it does not seem to be registered by default.
My nuxt.config.ts