Activities

TheYorkshireDev

TheYorkshireDev posted a new bug report

pwa-module •

bug Service Worker not registered when hosting in S3 but is Locally

Version

v3.0.0-beta.16

Reproduction link

http://I-can-pass-a-link-privately-to-my-testing-bucket-for-debugging.com

Steps to reproduce

  1. Generate a new nuxtJS app: npx create-nuxt-app
  2. Add PWA support: npm i @nuxtjs/pwa and ['@nuxtjs/pwa', { icon: false }], to the config file as outline in https://pwa.nuxtjs.org/setup.html
  3. Generate static files: npm run generate
  4. Upload to S3 and enable static web hosting
  5. Visit web hosting endpoint and open Chrome developer tools
  6. Navigate to the "Application" tab to see service worker not registered

What is expected ?

I would expect the service worker to be registered when navigating to the "Application" tab in Chrome dev tools. I would also expect running an audit on the "Audits" tab to return a identification of the app as a PWA.

What is actually happening?

Chrome displays the following message on the Application tab in developer tools: "Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest"

If I locally go into the dist/ folder and run python -m SimpleHTTPServer 8080 to create a local webserver and navigate to localhost:8080 the service worker IS registered and everything is working.

Additional comments?

When I run a NuxtJS PWA app locally the service worker is registered and Chrome lighthouse verifies the app is a PWA, however when I upload the same files to S3 and visit the endpoint, the service worker is not registered and therefore there is no PWA support. For some reason the generated js files are not registering the service worker on S3.

I suspect it is related to the pwa-module because the one of the generated JavaScript files from running npm run generate has the line which should register the service worker but it does not. Snippet of the function which is from a minified file so may not be very useful:

function L() {
            return (L = Object(o.a)(regeneratorRuntime.mark(function t() {
                var e, r, o;
                return regeneratorRuntime.wrap(function(t) {
                    for (; ; )
                        switch (t.prev = t.next) {
                        case 0:
                            if (!(!1 in navigator)) {
                                t.next = 2;
                                break
                            }
                            throw new Error("serviceWorker is not supported in current browser!");
                        case 2:
                            return t.next = 4,
                            n.e(4).then(n.bind(null, 149));
                        case 4:
                            return e = t.sent,
                            r = e.Workbox,
                            o = new r("/sw.js",{
                                scope: "/"
                            }),
                            t.next = 9,
                            o.register();
                        case 9:
                            return t.abrupt("return", o);
                        case 10:
                        case "end":
                            return t.stop()
                        }
                }, t)
            }))).apply(this, arguments)
        }
MaximeScibetta

MaximeScibetta posted a new bug report

pwa-module •

bug Add to home screen is disable when add importScripts : nuxt.config.js

Version

v3.0.0-beta.16

Reproduction link

https://webapp.letsgocity.be/

Steps to reproduce

When I add the following code in my nuxt.config.js file

workbox:{ importScripts: ['firebase-messaging-sw.js'] }

The " Add to home screen " dialog isn't showing in my PWA, when I delete this line all work fine…

Anyone have solution ?

What is expected ?

The " Add to home screen " dialog isn't showing in my PWA, when I delete this line all work fine..

What is actually happening?

When I add the following code in my nuxt.config.js file

workbox:{ importScripts: ['firebase-messaging-sw.js'] }

The " Add to home screen " dialog isn't showing in my PWA, when I delete this line all work fine…

Anyone have solution ?

MaximeScibetta

MaximeScibetta posted a new question

pwa-module •

Add to home screen is disable when add importScripts : nuxt.config.js

When I add the following code in my nuxt.config.js file

workbox:{ importScripts: ['firebase-messaging-sw.js'] }

The " Add to home screen " dialog isn't showing in my PWA, when I delete this line all work fine…

Anyone have solution ?

skyrpex

skyrpex posted a new question

pwa-module •

Can I host the workbox JS file?

There's the workboxURL option, but AFAIK I'd need to manually copy the current Workbox JS file into my static/ directory (forcing me to maintain it and having it included in my repository). Is there a way to just include it in the build, like the rest of the JS files in my project?

marvinhuebner

marvinhuebner posted a new question

pwa-module •

Disable icons or manifest or overwrite them

I'm currently working on a project where I have very strict CI requirements. Unfortunately it's not enough for me to have just one icon as source.

Is there a way to completely disable the generation of the manifest.json and the icons so that i can write them manually?

mdawar

mdawar posted a new question

pwa-module •

How to add plugins for routes in the new Workbox configuration?

Currently on the workbox module documentation page, there's an example for adding custom runtimeCaching items:

workbox: {
   runtimeCaching: [
     {
       urlPattern: 'https://my-cdn.com/posts/.*',
       strategyOptions: {
         cacheName: 'our-cache',
         cacheExpiration: {
           maxEntries: 10,
           maxAgeSeconds: 300
         }
       }
     }
   ]
}

I'm using the latest 3.0 beta package and the strategyOptions doesn't seem to be working especially the cacheExpiration and other plugins options, as per the examples on the official workbox documentation, plugins in the 4.0+ version are added using constructors like this:

workbox.routing.registerRoute(
  new RegExp('/images/'),
  new workbox.strategies.CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 20,
      }),
    ],
  })
);

I have checked the code on Github for the generating the service worker, JSON.stringify is used to pass the options defined in strategyOptions:

workbox.routing.registerRoute(new RegExp('<%= r.urlPattern %>'), new workbox.strategies.<%= r.handler %> (<%= JSON.stringify(r.strategyOptions || {}) %>)

My question is how can I pass the plugins options like it's done on the workbox documentation?

And why not use the workbox webpack plugin to create the service worker instead of creating a service worker template?

Thank you.

jasonmccallister

jasonmccallister posted a new question

pwa-module •

How to change the prefix to service worker file

We are building our application with NuxtJS and PWA and it has been awesome so thank you for the hard work and making our lives super simple!

However, there is one issue that I have been unable to resolve. In our integration environment we are in a subdirectory (e.g. domain.com/some-app). We have updated the Nuxt assets to account for the /some-app in the nuxt.config.js, but we are unable to find the documentation or determine how to change the path for the sw.js file that is generated.

Can you provide some insight or point us to the right direction?

AndrejHafner

AndrejHafner posted a new question

pwa-module •

App version not changing on deploy

Hi!

We're having a problem when using nuxt/pwa-module when deploying a new version of the app. Although there is a connection to the internet, the client is caching the previous version of the app, thus the users are not getting the new version unless they clear site cache. Our only custom caching strategies are for fonts.

Does anyone have the solution to this problem? We're using version 3.0.0-beta.16.

Thank you!

chabib

chabib posted a new question

pwa-module •

How to cache all page from start?

Suppose we have 3 pages: home, list, and detail.
Home page has link to list page, so list page will be smart prefetched by nuxt.
But detail page won't.
I want every page is prefetched even if user just open home page.
The use case is for internal app that only limited amount of user will access.
We use firebase firestore with offline mode, so we have no problem with data layer.

gyarasu

gyarasu posted a new question

pwa-module •

How to precache nuxt bundle files on v3?

In v2.6.0, bundle files are added for precache(precacheAndRoute) in sw.js by default as below.

workbox.precaching.precacheAndRoute([
  {
    "url": "https://cdn.nuxtjs.org/0392146f2d6284.js",
    "revision": "028b52e95a28bb08c34ad092c99422ab8f"
  },
], {
  "cacheId": "sample",
  "directoryIndex": "/",
  "cleanUrls": false
})

I've updated the pwa-module for v3.
I guess the behavior is changed. precacheAndRoute is empty by default now.

// --------------------------------------------------
// Precaches
// --------------------------------------------------

// Precache assets

How do I add bundle files to precacheAndRoute on v3?

Thanks.

P4sca1

P4sca1 posted a new question

pwa-module •

PWA not working offline

After adding the app to the home screen (on iOS), the PWA works just fine.
However when taking down the nuxt web server, the PWA just displays the Bad Gateway error and does not render the cached content.
So the offline support is not working at all.

Workbox config:

workbox: {
  cleanupOutdatedCaches: true,
},

Is there anything that I'm missing or is this a bug in the pwa module?

eertmanhidde

eertmanhidde posted a new question

pwa-module •

How to use ogImage

I'm trying to figure out how to use the ogImage tag in the meta module. in https://pwa.nuxtjs.org/modules/meta.html#ogimage it says you can use a string. Most common thing to do here for me is place an image in the /static folder and use a string that locates to that image. This however doesn't work. An image URL from the internet does work.

Am I trying somethings that isn't even meant to work that way? Because I can't figure it out how to use it. It would be nice if someone could help me :)

siberiadev

siberiadev posted a new question

pwa-module •

PWA doesn't work with data I get from request in SPA mode

I don't know is it normal behavior of pwa module that it doesn't work in spa mode with data I get from axios request?
Same time other static feature and functions work fine in PWA without wifi.
But when I try to open page with data from axios without wifi it gives me an error.

SuperRun

SuperRun posted a new question

pwa-module •

The problem about the file added into the cache storage
  1. When I go to another page using "to=/userStart" for example
  2. Then I check the "Cache Storage" only several js files and images added into cache
  3. When I refresh the page, the files in the "Cache Storage" will be added more(such as HTML and other js files)
  4. The code as bellow
workbox.routing.registerRoute(new RegExp('/_nuxt/(?!.*(__webpack_hmr|hot-update))'), new workbox.strategies.CacheFirst ({}), 'GET')
workbox.routing.registerRoute(new RegExp('/(?!.*(__webpack_hmr|hot-update))'), new workbox.strategies.NetworkFirst ({}), 'GET')
fmoessle

fmoessle posted a new question

pwa-module •

Error: Cannot find module 'jimp'
filrak

filrak posted a new feature request

pwa-module •

idea [RFC] ATHS component

What problem does this feature solve?

As a follow up to discussion I had with @pi0 and @Atinux I would like to propose a small DX enhancement for PWA module in a form of PWA components.

An example of such component would be ATHS component which I would like to start with.

Currently the ATHS banner that is shown by Chrome has a lot of limitations (especially when it comes to design) and can't be spawned again after dissmision which is a undesirable behavior for (probably) anyone that builds a PWA. Another problem is lack of common ATHS flow across browsers.

Proposed solution is a soft opt-in component responsible for ATHS behavior. It will handle catching the native beforeinstallprompt event, preventing default banner from being shown and passing the native prompt() event into a scoped slot so developers have more control over ATHS flow and the way it looks.

Having it handled in a 3rd party component will also help with promoting good practices and being up to date with web standards.

Please let me know what do you think about this idea @pi0 ;)

What does the proposed changes look like?

Example usage could look more or less like this:

<add-to-home-screen v-slot="addToHomeScreen"> <button @click="addToHomeScreen">Add to Home Screen</button> </add-to-home-screen>

OfekA

OfekA posted a new question

pwa-module •

Update SW on route change and also refresh page when detecting an update?

Is there a way to do the following - update the Service Worker on route change and also refreshing the page automatically when detecting an update?

sheldonWan

sheldonWan posted a new question

pwa-module •

cannt read property 'emit' of undefined

when i run the projiect, i got a problem at @nuxtjs/icon/index.js :104:26 , the hook can not read

kstadler

kstadler posted a new feature request

pwa-module •

idea Compatibility with Workbox Webpack InjectManifest Plugin

What problem does this feature solve?

If I'm not mistaken it is currently neither possible to dynamically add assets bundled by webpack to the preCache with out of the box Nuxt PWA features nor is it possible to integrate the Worbox Webpack InjectManifest Plugin (https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin).
It would be great if either of those two options would be implemented, to allow pre-caching files dynamically generated by webpack.

mauxtin

mauxtin posted a new feature request

pwa-module •

idea Restrict the pages that the "Add to Home Screen" dialog is showing

What problem does this feature solve?

I'd like to display the dialog only in homepage. I believe this is good UX for the user.