Workbox strategies uncaught no-response

[riso348]

Version

v3.0.0-beta.14

Reproduction link

https://jsfiddle.net/

Steps to reproduce

workbox-strategies.prod.js:1 Uncaught (in promise) no-response: no-response :: [{"url":"https://XXXX/admin/advertisements/create"}] at a.makeRequest (https://cdn.jsdelivr.net/npm/[email protected]/workbox/workbox-strategies.prod.js:1:2145)

@ workbox-core.prod.js:1makeRequest @ workbox-strategies.prod.js:1

What is expected ?

Caught error or page load at least

What is actually happening?

The webpage at https://XXXX/admin/advertisements/create might be temporarily down or it may have moved permanently to a new web address. ERR_FAILED

Additional comments?

I have this error at soma of my subpages while using PWA. How can i help, or send you something more to prevent this error. When i try to refresh the page, there is a Chrome error ERR_FAILED

_{This bug report is available on Nuxt community (#c126)}

[Syrou]

Got the same thing happening in our code.

[AndrewBogdanovTSS]

Same thing here

[edlgg]

Same here. Is there anything I can do to fix it?

[sts-ryan-holton]

Same problem, currently using 3.0.0-beta.16

[MSkred]

Same problem, currently using 3.0.0-beta.16

[pi0]

This is not probably a bug related to PWA module but Workbox itself. Please provide a reproduction so at least we have a way to investigate more. same here is not a way to help to resolve, unfortunately.

Please note that if this error happening for making a request to 3rd party domain: https://developers.google.com/web/tools/workbox/guides/handle-third-party-requests

[isaumya]

I am also facing the exact same issue on my project. Honestly, there is no way to reproduce this error. I test my site like crazy all the time. So, often I open my site on a chrome incognito window with the dev tools open and console or network tab opened and then I load my site. In this scenario, many times it loads without that error and some time in the console I have that error which is being thrown by sw.js. I mean if I go to the Application tab in the dev tools, select Service Worker from the left, I can see 1 red cross beside sw.js when I click on that it takes me to the console and show me that error.

The crazy thing is if I do a soft or hard refresh of that page, that error is no longer there and I have no idea when it will come back again. If you want I can share my site URL if that what you need.

[andrew-boyd]

We're seeing this issue too. A lighthouse audit of our site seems to trigger the error reliably. Lighthouse logs an error under "Best Practices" saying that errors were logged to the console.

url: …workbox/workbox-strategies.prod.js (cdn.jsdelivr.net) description: no-response: no-response :: [{"url":"https://www.wearebraid.com/"}] at a.makeRequest (https://cdn.jsdelivr.net/npm/[email protected]/workbox/workbox-strategies.prod.js:1:2145)

Our site is being hosted via now.sh and all content / file requests should be local (no 3rd-part CDN for images currently).

[phartikainen]

Same issue here, shows with Lighthouse audit

[dchernokur]

Error is consistently triggered by LightHouse in chrome devtools.

• Generate new nuxt project as SPA and with PWA module
• Deploy to now.sh with https://github.com/nuxt/now-builder added
• Run lighthouse audit and see the error in "Best Practices" report

It's preventing me from hitting perfect 100's score 😭

[petrovnn]

Same problem

[ghost]

I'm not sure, but placing '@nuxtjs/pwa' at the end (the last index) of "modules" array in nuxt.config.js solved the problem for me.

can someone confirm?

[petrovnn]

@jbty

It does not work for me :(

Even if you comment out the modules or put @nuxtjs/pwa in the first place.

But in the early stages of development, there was no error.

[ghost]

@petrovnn it's strange, since i update this line it's worked for me. ( it seems that nuxt / pwa is not active in dev mode by default see here), you use nuxt/pwa only on production mode (if dev option is false)

here is the list of the other manipulations that I made:

• Uninstall and delete app cache from windows
• Clear all browsing data from chrome
• Delete .nuxt, dist folder and sw.js and run " generate"

my config: pwa: { workbox: {}, meta: { theme_color: '#000000', lang: 'fr', ogHost: 'https://sdsedsgwewergwg.com/', nativeUI: true }, icon: {}, manifest: { name: 'frfrfrfrfg.fr', lang: 'fr', display: 'standalone' } },

I hope it will help

I take this opportunity to say that it would be magic if there were more examples of using options in the documentation or even a complete tutorial

EDIT : the error reappeared, I do not understand what this is. If I update the page of my pwa the error disappears but it persists during the first load of my pwa :(

[ch99q]

Been getting the same error too when running trough Lighthouse in my browser.

So I trough it maybe was something with the way chrome runs the audit, and when I tried using https://web.dev/measure/

The problem seem to have disappeared.

[AndrewBogdanovTSS]

@ch99q it's caused by the fact that Chrome is cleaning the previous data before new audit so all your new users will get this error. You can test it yourself by clearing cache and hard resetting the page

[ch99q]

@AndrewBogdanovTSS I realized my answer was incorrect the second I pressed 'comment', it was more running away from the problem. You are completely correct and it should be fixed so the users don't experience the issue.

[kevinmarrec]

Easy Reproduction

1) Go on a website using PWA module (https://lichter.io, https://marrec.io) 2) Clear site data (includes service workers) 3) Go on website -> Works 4) Go offline & refresh -> See error in console + unreachable website 5) Go online & refresh -> Works 6) Go offline & refresh -> Works

Note : If you refresh twice while being online, the issue won't show up when going offline, which means the issue is related to Workbox Offline Strategy.

Google Lighthouse Audits has an offline check after an online one, that's why the audit faces this error too.

[qmolab]

I had the same issue, my SW.js file was stock and looked like so:

importScripts('https://cdn.jsdelivr.net/npm/[email protected]/workbox/workbox-sw.js')

// -------------------------------------------------- // Configure // --------------------------------------------------

// Set workbox config workbox.setConfig({    "debug": false })

// Start controlling any existing clients as soon as it activates workbox.core.clientsClaim()

// Skip over the SW waiting lifecycle stage workbox.core.skipWaiting()

workbox.precaching.cleanupOutdatedCaches()

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

// Precache assets

// -------------------------------------------------- // Runtime Caching // --------------------------------------------------

// Register route handlers for runtimeCaching workbox.routing.registerRoute(new RegExp('/_nuxt/'), new workbox.strategies.CacheFirst ({}), 'GET') workbox.routing.registerRoute(new RegExp('/'), new workbox.strategies.NetworkFirst ({}), 'GET')

I manually added the following to the bottom of the file:

workbox.routing.setCatchHandler(({url, event, params}) => {    const strategy = new workbox.strategies.NetworkFirst({networkTimeoutSeconds: 10});    return strategy.handle({       request: new Request(url),    });

And it no longer throws an error, at the expense of double downloading the first page a new user gets when first visiting the website / after clearing browser data. If your pages aren't too large, than this may be effective, though it is definitely not satisfactory. It is interesting to note here that the NetworkFirst workbox strategy does not throw errors. The CacheFirst strategy, on the other hand, does throw an error when it cannot find the resource in either cache or the network, which makes me think there is a problem registering the regex routes, though that seems unreasonable. My page speed did not change when using this hack, so it is viable for me for the time being.

[sefrem]

Hey. I had the same error. Following this StackOverflow response, I changed the caching strategy from CacheFirst to StaleWhileRevalidate and now everything works fine. As it appears the problem is that CacheFirst strategy doesn't work with opaque responses.

[AndrewBogdanovTSS]

@sefrem could you provide an example of your nuxt.config.js? I can't find an option where caching strategy can be set

[sefrem]

@AndrewBogdanovTSS I'm not using nuxt actually. I just change caching strategies i use in my service worker file sw.js.

[ninest]

Are there any fixes? I'm on ^3.0.0-0, and sometimes I get the error sometimes I don't:

The FetchEvent for "https://mywebsite.com/" resulted in a network error response: the promise was rejected.

workbox-strategies.prod.js:1 Uncaught (in promise) no-response: no-response :: [{"url":"https://mywebsite.com/"}]
    at a.makeRequest (https://cdn.jsdelivr.net/npm/[email protected]/workbox/workbox-strategies.prod.js:1:2145)

When I do get the error, the PWA doesn't work at all (the service worker seems to have an error), and the website doesn't work offline

When I don't get the error, everything works fine, and the site loads offline around 75% of the time. I'm not able to reproduce this reliably.

[AndrewBogdanovTSS]

It would be great if someone could provide at least a workaround for this issue. Maybe caching strategy could help, but it seems there is no way to change it via module's settings or at least I didn't find anything regarding such option in the documentation

[neiromendez]

Hi all, I would like handle the workbox lifecycle to notify when an update is available, when a user is offline or a installation is available, using vue cli pwa is easy but with nuxt I don't find any about this.. If someone can help I'll appreciate it.

[AndrewBogdanovTSS]

@neiromendez use discord channel, this is not the place for such requests

[kevinmarrec]

Hi everyone, I'm getting you some some updates today :

From my new investigation, there are two different issues which lead to a common error. Both seem distinct though, and I got a fix for one of them.

Error (giving back context)

Issue 1 : Lighthouse Best Practices test failing

You may have encountered the latter console error during the test, which makes you not able to hit 100 score in Best Practices Lighthouse section.

Good news: I found how to fix it., this is due to this line : https://github.com/nuxt-community/pwa-module/blob/dev/lib/workbox/templates/sw.js#L19.

All you need is to set workbox.clientClaim module option to false.

Issue 2 : Offline may not be totally working

You can check my comment made in April : https://github.com/nuxt-community/pwa-module/issues/176#issuecomment-618314637

This is due to something related to offline strategy, for which I don't have a fix yet. Any help or thoughts about this second issue is more than appreciated :)

[AndrewBogdanovTSS]

@kevinmarrec I tried your suggestion - it made no effect on lighthouse - error is still here, lowering the score https://take.ms/ylVlv

[Kayoshi-dev]

Hello!

I'm facing the same problem, has anyone found a workaround?

[hjujah]

Tried everything and having still the same issue... Any workaround?