nuxt-community / pwa-module

Zero config PWA solution for Nuxt.js
https://pwa.nuxtjs.org
MIT License
1.25k stars 173 forks source link

[Workbox] Error when using nuxt --hostname option & dev: true #394

Open lupas opened 3 years ago

lupas commented 3 years ago

We are running into an issue with nuxt-pwa (workbox) and the nuxt --hostname option on the nuxt command when the PWA/Workbox Module has its dev option set to true.

Example Code

Very simple example repo can be found here (only this branch): https://github.com/lupas/lupas-temp/tree/nuxt-pwa-hostname-issue

Reproduce Issue

  1. Create a nuxt app

  2. Install the PWA module with

    yarn add --dev @nuxtjs/pwa

  3. Add the PWA module to nuxt.config.js and set dev: true

    See https://pwa.nuxtjs.org/setup

  4. Add --hostname option to nuxt command in package.json

    See https://nuxtjs.org/faq/host-port/

  5. Start app and see error in Chrome Dev Tools:

    Error registering workbox: TypeError: Cannot read property 'addEventListener' of undefined
    at new Workbox (workbox-window.dev.es5.mjs?ae33:612)
    at _callee$ (workbox.js?148b:8)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:293)
    at Generator.eval [as next] (runtime.js?96cf:118)
    at asyncGeneratorStep (asyncToGenerator.js?c973:3)
    at _next (asyncToGenerator.js?c973:25)

Further Notes

Thanks a lot for any hints if there is something we can do to make this work.

agengdp commented 3 years ago

any update about this ?

stickypages commented 3 years ago

I am getting this as well, has there been any progress by chance?

BRIKSING commented 2 years ago

Waiting for resolving this problem!

cdeclerck commented 2 years ago

Always any solution ? Because i have this problem with production server

UPDATE While investigating I realised that the service worker is only available with an https connection (https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#setting_up_to_play_with_service_workers) If you want to test with an HTTP connection, just do this procedure on your Chrome (https://stackoverflow.com/questions/40696280/unsafely-treat-insecure-origin-as-secure-flag-is-not-working-on-chrome/53388534#53388534)