[Bug] No service worker detected

[Baroshem]

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

  pwa: {
    manifest: {
      name: 'Test',
      short_name: 'Test'
    },
    workbox: {
      enabled: true
    }
  },

[kevinmarrec]

Hey ! Are you using last version ? Cause I fixed a regression regarding a similar issue in v0.2.1 :)

[Baroshem]

Hey, I downloaded the version 3 hours ago so not sure if that was the last one I will check it out!

[kevinmarrec]

Are you maybe using custom Nuxt baseURL ?

[Baroshem]

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

[kevinmarrec]

@Baroshem Let me know, and if your project is public we can debug from your repository

[Baroshem]

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?

[Baroshem]

Here is the branch with added pwa module and the error appears -> https://github.com/Baroshem/nuxt-shopify-tailwind/tree/feat/pwa

[kevinmarrec]

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

[Baroshem]

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"
  }
}

[Baroshem]

You can test it by basically removing everything and it will still not work. I tested it on all major browsers

[kevinmarrec]

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 :

• The event is fired before it adds the event listener
• Something prevents the event to be fired

[kevinmarrec]

@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

[Baroshem]

@kevinmarrec

Reading this comment was a rolercoaster of dramatic action switches :D

Awesome that you fixed it! ❤️

[Baroshem]

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

[kevinmarrec]

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

[Baroshem]

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

[Baroshem]

I have also removed all other modules in the application and it still does not work :(

[kevinmarrec]

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

[kevinmarrec]

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

[Baroshem]

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.

[kevinmarrec]

@Baroshem Thanks, I'll have a try when I get the time.

[Baroshem]

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

[kevinmarrec]

@Baroshem I see. I'll try to debug this asap.

[kevinmarrec]

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

[kevinmarrec]

This also works in your project branch when using yarn generate.

[kevinmarrec]

I have it available in Sources tab :

[Baroshem]

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

[kevinmarrec]

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

[Baroshem]

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]

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

[Baroshem]

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

[kevinmarrec]

Alright, thanks !