Runtime Errors in PWAs: Risk Surface and Mitigation

PWAs rely on static assets but can still fail at runtime when actual browser or device behavior diverges from expected capabilities. Runtime errors can originate from missing or unsupported JavaScript APIs, where bundlers and tooling may not guarantee that required polyfills exist in every target browser. Specific environments can also introduce issues, such as difficulties intercepting keydown events on mobile or problems with localStorage on Safari. Mitigation involves planning supported browsers and devices, tuning polyfills and tooling accordingly, and carefully evaluating third-party packages to ensure they do not skip polyfill steps, especially when they patch missing functionality using WebWorkers.

"PWAs can be resilient solutions thanks to their static asset nature, but they are not immune to runtime errors. When they occur, these errors can compromise data consistency or disrupt the user experience, thus the need for mitigation. So, How do Runtime Errors Come to Be? In general, we could say that somehow our program is failing our assumption and our expectation. But, what are those assumptions and expectations, you may ask. To discover them, we have to look at the very foundations of our program: functions and data."

"The first case involves a function, a missing function to be precise. Thanks to packages like caniuse-lite and Browserlist, it is possible to use cutting-edge JavaScript APIs while bundlers take care of the artifact size. However, this approach doesn't guarantee that there will be a polyfill in place when a browser hit your PWA. And when a not supported browser does hit your app, then it's when you have a runtime error. An unsupported JavaScript API runtime error."

"Even specific devices or browser versions present specific challenges. For example, on mobile, you may have troubles intercepting a keydown event, while on Safari, you may have troubles with the localStorage. So, how to mitigate? In these cases, the mitigation consists of planning ahead, listing browsers and devices you must support and tuning tools and polyfills accordingly. During investigation, take extra care with the packages you'll use as well."

"In particular, when the package patch missing functionality in the browser, like for PDF or Barcode reader, there is the risk these package will skip the polyfill step, using a WebWorker directly. // configure browserslist // in package.json { . . . "browserslist": [ "Chrome >= 120", "Safari >= 18", ] } // check browsers targeted ➜ npx browserslist"

Read at Adropincalm