question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Workbox precaching network fallback cannot handle integrity

See original GitHub issue

Library Affected: workbox-precaching

Browser & Platform:

Google Chrome v103.0.5060.114 for Mac

Issue or Feature Request Description:

In service worker:

const manifest = self.__WB_MANIFEST;
precacheAndRoute(manifest, {});
cleanupOutdatedCaches();

Way to reproduce:

  1. Set SRI integrity in manifest
  2. load the website and wait for SW to precache all manifest entries and install
  3. Manually delete the cache storage in Application tab or clear storage in Chrome setting
  4. reload the website, it will fallback the network request here, because the cache item has been cleared: https://github.com/GoogleChrome/workbox/blob/4e80b585144ab16b2d251ff38e1a638289097214/packages/workbox-precaching/src/PrecacheStrategy.ts#L121
  5. You should see the SRI error, because the fetch didn’t use cors mode. (see https://github.com/whatwg/fetch/issues/583 for context)

Potential fix: when integrity is used, it should use cors mode to fetch the resource

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
jeffposnickcommented, Jul 14, 2022

Thanks for confirming. So it sounds like the analysis in https://github.com/GoogleChrome/workbox/issues/3096#issuecomment-1184451503 still applies.

0reactions
zlk89commented, Jul 14, 2022

@jeffposnick actually I was wrong, the failed request was made by importScripts() in a worker script, which always uses no-cors request. So the integrity actually comes from manifest, instead of the original request in this case.

Read more comments on GitHub >

github_iconTop Results From Across the Web

workbox-precaching - Chrome Developers
Easily precache a set of files and efficiently manage updates to files.
Read more >
Handle cache-misses by falling back to network (by default?)
And finally, workbox.routing 's default export has a registerNavigationRoute() method that only does a caches.match() without a fallback. In v2, ...
Read more >
Precaching pages with next-pwa - DEV Community ‍ ‍
While next-pwa allows you to precache JavaScript and CSS files out of the box, there is currently no easy way to precache pages....
Read more >
Precaching with Workbox - web.dev
Precaching makes it possible to serve cached files to the browser without going to the network. Use precaching for critical assets that your ......
Read more >
What's the right way to implement offline fallback with workbox
3- Catch errors and display the offline page, when there's no internet connection. /** * Handling Offline Page fallback */ this.addEventListener ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found