angular: FetchEvent.respondWith error iOS/iPadOS 16.4+

Any chance to see an official fix for this before the iOS 17 release next week?

@legege Have you used your workaround in production? Did you notice any drawbacks?

@gkalpak Sorry for bothering you but I saw you were active in similar topics (#26690 #26500), could you promote this to the angular team? It’s a pretty critical issue in my opinion since PWAs will stop working (at least it’s the case for the 2 I tested) with iOS17 next week

Workaround

I wrote a little script that adds the catch blocks to Angular’s service worker cache calls. It’s not tested thoroughly but it seems to work fine. Maybe it helps someone else.

package.json

  "scripts": {
    ...
    "postinstall": "node scripts/service-worker-workaround.js",
    ...
  },

scripts/service-worker-workaround.js

const fs = require('fs');
const path = require('path');

const ngswWorkerFilePath = path.join(__dirname, '..', 'node_modules', '@angular', 'service-worker', 'ngsw-worker.js');
let ngswWorkerFile = fs.readFileSync(ngswWorkerFilePath).toString();
const regExps = [
  [/await cache\.(match|put)\((.*)\)/gm, 'await cache.$1($2).catch((e) => console.log(e))'],
  [/this\.cache\.(delete|match|put)\((.*)\);/gm, 'this.cache.$1($2).catch((e) => console.log(e));'],
  [/this\.cache\.(delete|match|put)\((.*)\)\.then/gm, 'this.cache.$1($2).catch((e) => console.log(e)).then'],
];
for (const r of regExps) {
  console.log(`RegExp '${r[0].toString()}'`, ngswWorkerFile.match(r[0]));
  ngswWorkerFile = ngswWorkerFile.replace(r[0], r[1]);
}
fs.writeFileSync(ngswWorkerFilePath, ngswWorkerFile);

Currently angular.io still uses Angular 16.2 (so without any workarounds), so it isn’t a great repro example.

I’ve now a device with ios 17, I’ll try to do a more thorough investigation this week-end !

As far as i can tell the issue on Safari’s side was fixed with yesterday’s 17.2 release.

Looks like there is a fix in IOS 17.2 https://developer.apple.com/documentation/safari-release-notes/safari-17_2-release-notes

Fixed a cache miss bug in DOMCache that triggered service worker fetch errors. (115740959) (FB13188943)

Bug 261767 - REGRESSION (iOS 17): PWA startup “FetchEvent.respondWith received an error TypeError: Internal error”

@madmurl0c Thanks, I forgot about that, this is definitly was I was looking for !

I’ve open #51960 !

Will the workaround also be backported to LTS versions 14 and 15?

@gudvincent this is what I wrote to manage the service worker. Hopefully it’ll work.

In main.ts :

if (navigator.userAgent.includes("Version/17.0") || navigator.userAgent.includes("Version/17.1")) {
  navigator.serviceWorker.getRegistrations().then(function (registrations) {
    for (let registration of registrations) {
      registration.unregister();
    }
  });
}

In app.module.ts :

 ServiceWorkerModule.register('ngsw-worker.js', {
   enabled:
     !navigator.userAgent.toUpperCase().includes("LIKE MAC")
       ? true
       : ((navigator.userAgent.includes("Version/17.0") || navigator.userAgent.includes("Version/17.1")) ?
         false : true)
 })

Feel free to improve this code and share it.

Yes, it’s working now.

Does someone has tested iOS 17.2 ?

— Reply to this email directly, view it on GitHub https://github.com/angular/angular/issues/50378#issuecomment-1789612597, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADUJAGEKA5SBHGB5D2IKAALYCKUYBAVCNFSM6AAAAAAYIR4CHKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBZGYYTENJZG4 . You are receiving this because you are subscribed to this thread.Message ID: @.***>

There are several people who ask if it will be backported to Angular version 14 and 15, but no one answers. I will try to give some advice. “madmurl0c” script and postinstall solution will work for all versions. Just be aware where you put the script, otherwise correct the path so that it hits ngsw-worker.js:

const ngswWorkerFilePath = path.join(__dirname, '..', 'node_modules', '@angular', 'service-worker', 'ngsw-worker.js');

Maybe you will be able to run service-worker version 16.2.7 in Angular 14 and 15 applications, I don’t know, I haven’t tried. If you compare the servie-worker code from 14 to 16.2.7, there have been minor changes

npm install --save @angular/service-worker@16.2.7

Myself, I have copied Angular’s ngsw-worker.js and called it ngsw-worker-custom.js because I have added a lot of custom code to it. The downside with this solution is that I have to maintain the file myself. I want all the coolness that Angular is making. I’m doing catch for all cache operations for now so my iOS 17 users don’t see errors.

Be aware that you cannot fix a broken browser, in this case I think you can just ensure that your users do not see a white screen with the error message “FetchEvent.respondWith received an error TypeError: Internal error”. And maybe some caching will work…

Looking forward to seeing https://github.com/WebKit/WebKit/pull/18217 land in iOS…

This workaround to prevent that error has landed in 16.2.7. Please update if you have that issue !

cc @madmurl0c

I was facing the same problem today. Updating iOS to v17.2 worked for me. I’m using Angular v14.2.

It is on WebKit side, the rendering engine of Safari.

WebKit is an open source project that has identified and corrected the issue in their latest release.

It is Apple responsibility to include the updated version in Safari.

Since Safari updates with corresponding OS, we know from beta versions that iOS 17.2 (to be released) is including a version of Safari which relies on a corrected version of WebKit.

Hope that clarifies stuff.

Workaround: disable service worker on Safari versions that do not include the patch and trigger the bug. (By detecting corresponding OS version).

We need, a specific solution for these problems, I see everyone saying it works well but I don’t see specific articles, if 17.2 works, can versions below 17.2 work? or not

I think there is a misunderstanding due to alignment of angular versions with iOS versions. People are reporting that the fix of WebKit landed in the next release of safari from iOS 17.2. With that most likely all angular versions would work as before. The patches for this issue on angular side were more like catching the unhandled errors from the browser when crashing, but it was still not being able to use the service worker as before.

mounted 17.2-beta3 that solve the issue, in the meanwhile @tojacob solution works fine

I ended up non enabling service worker for ios 17. Lots of bugs

Because it is a webkit issue, not an Angular one.

Bug has been identified, resolved in webkit, and awaiting release in iOS.

Hi Folks, does anyone have any update about this? my current status is, the app is opening but still getting errors in the console

when a new version is deployed, the app keeps refreshing and doesn’t work anymore if I don’t reinstall it.

iOS: 17.1 Public Beta Angular: 16.2.8

@gmamisashvili Does the app load or do you get the “Safari can’t open the page error” ? @mifo111 Same question !

Exactly, it is the same error. And SwUpdate not working anymore in my case

Looks like 15.2 will get the fix, I got green lit by the team to open #51989 👍

I updated angular to 16.2.7 but still have the same issue. iOS 17.0.2.

@vuthaphai Update to 16.2.7 or look for this workaround on StackOverflow

Not sure if the angular team is even aware of this bug, do you have any idea how to contact them? Maybe we should create a new Issue (with a more specific title like “Urgent! iOS17 breaks PWAs”, this one still says iOS 16.4)? Don’t want to bother the team unnecessarily but this issue seems quite important

Thanks for sharing @Yang-LiYing. I’ve integrated your changes (plus logging) in a branch here to troubleshoot with latest version: https://github.com/legege/angular/tree/ios17-fetch-repro

I confirm this is “working” (workaround). So far, I’ve seen the error being caught at ERR9 and ERR12 (see service worker console), but I guess it can surface in other areas.

Not an easy one to fix…

I’m also experiencing this with all iOS 17 public beta to date. @Yang-LiYing Could you explain which error catching you’ve implemented?

An update to this issue, the white page error was caused by a bug on Apple’s side, which is fixed by version 16.5: https://bugs.webkit.org/show_bug.cgi?id=256219

The other error shown in de browser is still present, even on iOS 17 beta. An repro will be difficult because it seems to be a timing issue related to communicating with the browser cache. In some rare cases it seems the cache is not ready yet to communicate with causing the Angular or browser’s service worker to run into issues. Debugging is difficult because this happens before the application is loaded.

Looks like there is a fix in IOS 17.2 https://developer.apple.com/documentation/safari-release-notes/safari-17_2-release-notes

Fixed a cache miss bug in DOMCache that triggered service worker fetch errors. (115740959) (FB13188943)

I tested it on iOS 17.2 Public Beta and couldn’t reproduce the error. Seems like the issue is fixed in the next release - at least there is hope 😃

But is there an official information on the release date? And since this is such a critical bug why don’t they backport it to 17.1.X with a patch release?

Hello All

Anyone can explain to me exactly this issue is MacOS OR Safari OR Angular side ???

Why is this closed? This is causing problems for my users currently

I tested the angular.io webapp. Good news it’s a PWA. If we install it on an iPad with IOS 17, then we switch to Plane mode, and then we launch it, we have the error we are talking about on this issue. The good news is that there is an app to test (offline), and it is angular.io

@gmamisashvili Does the app load or do you get the “Safari can’t open the page error” ? @mifo111 Same question !

Exactly, it is the same error. And SwUpdate not working anymore in my case

Going back to 16.2.7 solves my issue with SwUpdate

@mifo111 I am also seeing some issues with SwUpdate. I went back to 16.2.7, but still have my update fail on iOS 17. Are you applying the postinstall fix, too?

Hi, I did not apply the postinstall fix yet. I think you need to reinstall the PWA after going back to 16.2.7. At least, that’s what helped me.

@gmamisashvili Does the app load or do you get the “Safari can’t open the page error” ? @mifo111 Same question !

Sometimes it’s blank screen, sometimes it has same can’t open page error

Quick update: the change that applies a workaround to avoid ServiceWorker crashing in Safari was released today in Angular v15.2.10, v16.2.8 and will also be available in upcoming v17.

@JeanMeche will the fix be available for Angular 15 as well ? Thanks for working on this issue !

Thanks for sharing @Yang-LiYing. I’ve integrated your changes (plus logging) in a branch here to troubleshoot with latest version: https://github.com/legege/angular/tree/ios17-fetch-repro

I confirm this is “working” (workaround). So far, I’ve seen the error being caught at ERR9 and ERR12 (see service worker console), but I guess it can surface in other areas.

Not an easy one to fix...

Sorry I don’t have access to any apple device in the upcoming days, but… If I understand it correctly you worked around “ERR9”, but “ERR12” is still not fixed.

This part is still missing in the official fix. I hope it works to find the issue 😃

The question was asked before, but hasn’t had an answer yet as far as I can tell:

Will the workaround also be backported to LTS versions 14 and 15?

@hardik047 Could be because the old service worker was still loaded.

@madmurl0c The workaround was merged and should land in the next patch version (16.2.7 should land tomorrow or thursday I believe)

Do you have no logs if you scroll down ?

No debug log is empty…

Since Safari is failing with an internal error, so I’d be inclined to say there is an issue on there side. If the framework did something wrong, there should be an explicit error.

Definitely, I agree, this looks like a Safari bug. The only thing that I’m saying that it seems that angular is doing something specific that triggers it, which likely means that it can be avoided.

Can one of you give us the content of the debug page ? Under /ngsw/state. (cf https://angular.io/guide/service-worker-devops#debugging-the-angular-service-worker)

I only have the issue with homescreen apps, and I can’t navigate at will in those. Since I switched my own PWA to workbox I cannot just add a hidden link there, either, so I’ll have to set up a test app that includes a link to /ngsw/state, and I don’t have enough time for that atm. I’ll look into it tonight, but maybe someone else can beat me to it 😏

I’ve notified the team, we will investigate that !

Just to sum up, I’ve seen multiple reports of that issue :

• https://stackoverflow.com/questions/77140732/angular-pwa-not-working-on-ios-service-worker-errors
• https://developer.apple.com/forums/thread/737827
• https://stackoverflow.com/questions/77143160/pwa-app-crashes-on-safari-after-ios-17-update
• https://www.reddit.com/r/PWA/comments/13ezla6/ios_164_cache_api_issues/

Just to caution: as far as I can tell, the workaround is not a fix — the app may still break if the device is offline and the browser cache has expired.

I have switched to workbox and can confirm that the worker generated by workbox works fine. Whatever triggers this bug, it must be specific to @angular/service-worker .

Has anybody tried updating @angular/service-worker package to the last vestion?