PWA app crashes on Safari after IOS 17 update

Question

My Angular app was working normally as a PWA on iphone, but after last ios17 update, the app crushes and even if I clear the cash on Safari it might work again for couple of minutes then the pwa shortcut for the website stops working when I close safari. sometimes while I'm testing the app I get this error

fetchevent.respondwith received an error type error: internal error

Distended

Answer 1

I am also experiencing the same issues as the OP. The issue seems to be related to Angular. We are also using Angular (16) with Ionic (6.5) in a PWA.

The issue seems to be triggered by this line in the Angular framework, which is in the Service Worker domain.

Update: I have tried setting installMode: "lazy" and updateMode: "lazy in Angular's ngsw-config.json. No difference.

Update 2: I have implemented a workaround from someone else which is currently working for our PWA: https://github.com/angular/angular/issues/50378#issuecomment-1716430091

Update 3: There is an incoming fix for WebKit: https://github.com/WebKit/WebKit/pull/18217

Basically, the service worker source from Angular is overwritten by a node task when installing the app in a CI environment. The changes that were needed are a catch after each Cache API call within the service worker.

Shanan

Answer 2

Same here, the error is: Cache API operation failed: Internal error PWA with Angular 14. Works on iOS16, after upgrading to 17 crashes on the second load (when trying to load the cache).

Update: When I run it on a simulator I get exactly the error that you write about. So same issue.

I tried upgrading to Angular 16 with SW 16, but it's the same issue. Works fine with IOS 16. Works if I disable the SW for IOS only. It can also be disabled per device from the Safari feature flags. But it seems like a bug in IOS/Safari 17.

Update: I stopped the service worker for IOS > 16. This solves the issue, but there will be no cache. In the other suggested workarounds, they suggest just catching the error and still no cache most likely.

app.modules.ts

ServiceWorkerModule.register('../ngsw-worker.js', {
  enabled: environment.production && !isIOS17orAbove()
}

I plan to remove this once there is a fix and advise customers to upgrade their OS.

Columbic

See my answer, a workaround has landed in 15.2.10 and 16.2.8 to prevent that error. (caching will still be breaking though until Safari fixes their issue) ; – Unwary

Answer 3

There's already an open issue related to this in Angular's GitHub repository but no response from the angular team so far, feel free to add more information on how to reproduce the issue.

Let's hope that apple fixes the issue, maybe upvote this issue? or report it at the WebKit Bugzilla.

Apomict

Answer 4

I've investigated this issue and it narrows down to a Safari bug that throws (for whatever reason) an "Internal Error" when accessing the cache.

The workaround has landed in 16.2.8. If you see that issue update to at least this version.

As of today, no fix has landed in v14/v15.

TLDR: Update to 15.2.10 or 16.2.8

---

Old answer :

There is a pending PR to add a workaround for the Safari bug.

Untils it gets merged and released you can add the workaround youself by editing /node_modules/@angular/service-worker/ngsw-worker.js and adding a try/catch statement to the AssetGroup.handleFetch method:

  let cachedResponse: Response|undefined;
  try {
    // Safari 16.4/17 is known to sometimes throw an unexpected internal error on cache access
    // This try catch is here as a workaround to prevent a failure of the handleFetch
    // See #50378
    cachedResponse = await cache.match(req, this.config.cacheQueryOptions);
  } catch (error) {
    throw new SwCriticalError(`Cache is throwing while looking for a match: ${error}`);
  }

This change will log an error in the /ngsw/state page when there is a cache issue.

You can persist this change in your repository using the patch-package package.

Warning: This fix is only a workaround for the internal error. It will not fix the caching since there is an issue with Safari. I would invite the users to report that issue to the Safari team.

Unwary

Answer 5

We have the same problem. We have created an easy-to-implement workaround.

We have modified the code generated by Angular for its service worker. The modification is minimal, we have captured the possible errors that may appear when the service worker tries to access the API Cache. Attached is the modified file, if you check the original angular file and the modified one, you will see that they are only a few lines.

When the build is generated in Angular we have used "Parcel" to add the modified file to the "outdir" generated by the framework. For now this works for us and we can work with IOS17.

Credits and idea from: https://github.com/Yang-LiYing/modify-the-ngsw-worker-js-example/blob/main/ngsw-worker.js

Id

Answer 6

There was a response earlier which gave a solution. Which I tried and it works. but the answer is no longer there so I put it back.

link : https://github.com/Yang-LiYing/modify-the-ngsw-worker-js-example if the code is no longer visible one day. I put it on my repository. link : https://github.com/d4nm0/ngsw-worker-js-example

you must replace the code of ngsw-worker.js after the build with that on the git link.

Anabranch