precacheAndRoute may cause an infinite loop on Webpack's HMR

[mxmauro]

Library Affected: workbox-precaching Browser & Platform: All browsers

Description:

I'm creating a PWA application from scratch with React and Webpack, no third-party frameworks like Next.JS.

As recommended, added precacheAndRoute(self.__WB_MANIFEST); into my service worker script.

Problem:

If Hot Module Reload is configured on Webpack, self.__WB_MANIFEST includes some of the .hot-update.json files, used by Webpack to detect if something has changed.

The first time, you won't notice anything bad but, if you restart webpack and refresh the page, the precached code will try to look for an outdated hot update file. Because 404 is returned, webpack dev server executes a full page reload causing this event to be repeated for ever.

Workaround:

Removing the call to precacheAndRoute fixes the issue.

Expected solution:

I believe removing hot update JSON entries from __WB_MANIFEST is the correct solution.