FetchEvent.respondWith error iOS/iPadOS 16.4+

[jcbvm]

Which @angular/* package(s) are the source of the bug?

service-worker

Is this a regression?

Yes

Description

I run an Angular application with version 14.2, and I encouter problems with Safari on iPhones and iPads running 16.4 or higher.
The issue I'm having is that my application sometimes (really sometimes) shows the white page of death and sometimes Safari shows the Error: 'FetchEvent.respondWith received an error: TypeError: Internal error' without any further information. The app uses the angular service worker (for PWA support) and from what I have read on earlier issues with this kind of error, it might be cache related. Reloading the page solves this issue.

I'm really clueless at the moment how I can even work around this problem.

EDIT:

I was able to reproduce it on angular.io after a lot of refreshes on my Mac:

(Message is in dutch, saying it can't load the page)

So it seems like there is some bug with the service worker in combination with Safari in general.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

FetchEvent.respondWith received an error: TypeError: Internal error

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.2.11
Node: 16.10.0
Package Manager: npm 7.24.0
OS: win32 x64

Angular: 14.2.7
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.11
@angular-devkit/build-angular   14.2.11
@angular-devkit/core            14.2.11
@angular-devkit/schematics      14.2.11
@angular/cdk                    14.2.5
@angular/cli                    14.2.11
@schematics/angular             14.2.11
rxjs                            7.5.7
typescript                      4.7.4

Anything else?

No response

[AMO-brandon]

We have also encountered this issue. We are on angular 13, any ETA on a fix?

[AMO-brandon]

bump

[Yang-LiYing]

We also encountered the same error message while accessing the PWA application of Angular 14 on an iPhone 17 device. During the debugging process, we noticed that the error might be related to issues with the Cache API invocation. Therefore, we addressed this problem by making modifications to the ngsw-worker.js file, adding error catching or reject callbacks to the part of the code that handles Cache API calls. As a result, we were able to resolve the issue. However, we acknowledge that this might not be the optimal solution and is just one approach we tried. We hope this feedback provides some additional insights for consideration.

Angular CLI: 14.2.10
Node: 16.19.0
Package Manager: npm 8.19.3
OS: win32 x64

Angular: 14.2.12
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.10
@angular-devkit/build-angular   14.2.10
@angular-devkit/core            14.2.10
@angular-devkit/schematics      14.2.10
@angular/cdk                    14.2.7
@angular/cli                    14.2.10
@schematics/angular             14.2.10
ng-packagr                      14.2.2
rxjs                            6.6.7
typescript                      4.8.4

This is the error we captured during the service worker runtime.

Cache API operation failed: Internal error
Unhandled Promise Rejection: NetworkError: A network error occurred

[davisriska]

I'm also seeing this error on safari(16.6 (18615.3.12.11.2)) after updating from 16.3 (18614.4.6.1.6) where I didn't get this error. Anyone know a workaround for this? I'm getting this on a production environment so my ass is on fire for this.

For me it happens right after an auth mechanism which is similar to oauth with redirects. And when the redirect happens to my app it shows the FetchEvent.respondWith ..... If the page is opened by user typing it in the browser, it loads fine.

Node: 16.20.0
Package Manager: npm 9.6.6
OS: linux x64

Angular: 15.2.9
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, material-luxon-adapter, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.8
@angular-devkit/build-angular   15.2.8
@angular-devkit/core            15.2.8
@angular-devkit/schematics      15.2.8
@angular/cli                    15.2.8
@schematics/angular             15.2.8
rxjs                            7.8.1
typescript                      4.8.4```

[davisriska]

We also encountered the same error message while accessing the PWA application of Angular 14 on an iPhone 17 device. During the debugging process, we noticed that the error might be related to issues with the Cache API invocation. Therefore, we addressed this problem by making modifications to the ngsw-worker.js file, adding error catching or reject callbacks to the part of the code that handles Cache API calls. As a result, we were able to resolve the issue. However, we acknowledge that this might not be the optimal solution and is just one approach we tried. We hope this feedback provides some additional insights for consideration.

Angular CLI: 14.2.10
Node: 16.19.0
Package Manager: npm 8.19.3
OS: win32 x64

Angular: 14.2.12
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.10
@angular-devkit/build-angular   14.2.10
@angular-devkit/core            14.2.10
@angular-devkit/schematics      14.2.10
@angular/cdk                    14.2.7
@angular/cli                    14.2.10
@schematics/angular             14.2.10
ng-packagr                      14.2.2
rxjs                            6.6.7
typescript                      4.8.4

This is the error we captured during the service worker runtime.

Cache API operation failed: Internal error
Unhandled Promise Rejection: NetworkError: A network error occurred

Could you possibly give some guidance on what you changed in ngsw-worker.js?

[JeanMeche]

Looks like there is network error. You should investigate what this error is.

Also, without a repro this is not actionnable on our side.

[davisriska]

Looks like there is network error. You should investigate what this error is.

Also, without a repro this is not actionnable on our side.

Got any guidance on how would I go about debugging this? Haven't worked with service workers. Just general direction I have to move in to figure out is fine also.

Also what do you mean by a network error? I have network requests with 404/401 as responses. Would those be the issue?
EDIT: Checked if the 404 was the issue, but that's not the case. So I guess you meant something else.

[jcbvm]

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.

[davisriska]

This is as far as I have gotten now.

[legege]

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

[diegoperezitx]

Im also having this problem this in safari 17 beta in desktop, and iOS 17 developer beta, it fails to retrieve the cache with "Cache API operation failed internal error" and then on reload "FetchEvent.respondWith received an error: TypeError: Internal error"

it happens consistently after force closing safari in iOS 17 with the site open, when you open safari, it tries to load the site and fails.
I also reproduced it on edge browser on iOS 17.

Reproduced it with angular 15 and 16, I assume its a change/bug in webkit

[Yang-LiYing]

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

Here is the modified version of @angular/service-worker@14.2.12 ngsw-worker.js. You can see what changes were made "After" by checking the Git commit history.
https://github.com/Yang-LiYing/modify-the-ngsw-worker-js-example

[legege]

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...

[madmurl0c]

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);

[elgerm]

We get a lot of complaits from users with this error now, since more and more are updating to IOS 17.

[DirtyHairy]

I have the same issue with https://github.com/cloudpilot-emu/cloudpilot-emu . I have included a variant of the hack suggested above that patches all relevant calls to the cache API to swallow errors, and it papers over the worst fallout: the app now loads reliably again.

However this is not a fix, it seems that the worker still fails to serve some cached assets. Running the app without an internet connection does not work reliably and fails on resources that have not been previously accessed and loaded into the browser cache (or that have expired).

Some observations that may help in finding a workaround for what clearly seems to be a Safari bug:

• The app loads fine the first after a reboot, and it also loads fine if the browser cache has expired (10 minutes in my case)
• Reloading the page after a few seconds works most of the time
• Another PWA of mine has no issues. This PWA does not use angular, but is written in Elm and uses Workbox to generate a worker. This may indicate that it may be possible to avoid triggering this bug.

[cfgi-lul]

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

[mscbpi]

Yes, it's the same.

Looks like also only angular's service worker are causing trouble, pointing out something wrong with angular.

An empty app with service worker behaves the same with iOS / Safari 17.

[DirtyHairy]

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 .

[MichelFR]

Now that IOS 17 is out, im encountering this problem all over the place.
Tested with a minimal angular project, still happening.

[dstapp]

Same here. Workaround from @madmurl0c seems to help for now but I guess it should be clear that this basically breaks all production Angular PWAs to a degree that customers will complain as soon as they update to iOS 17...

[DirtyHairy]

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.

[madmurl0c]

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

[DirtyHairy]

I don't know how to draw attention to this issue, but if it is mission critical you can switch to workbox - workers generated by workbox seem to work fine.

[MichelFR]

I also think that it's kinda of a dealbreaker. PWAs are completely unusable on iOS. This should be addressed as fast as possible.

[BenLune]

Yes I confirm

[wlisesrivas]

I think this is still happening, and it's random.
I'm trying to update my app (v14) to the latest version of Angular and btw it is too annoying

[BenLune]

Did you test it on IOS 17.2 beta version ?

[wlisesrivas]

The lastest iOS version for my is 17.1.1 so far on iPhone 15 Pro Max, but I'll finish upgrading Angular this weekend.

[danielsogl]

I can confirm that this issue still exists in the latest iOS 17.1.1 release and also with the later Angular 17 release.

[webdeveloperninja]

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

[flolovebit]

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

[vfa-tienld]

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

[marcelpotirnac]

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.

[moon-web75]

Hello All

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

[mscbpi]

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).

[moon-web75]

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).

@mscbpi Thanks for explaining, got it

[gudvincent]

@mscbpi Thanks for your explanation. Do you have any resource, piece of code or advice on how to disable / register conditionnally the service worker on Angular ?

[Elanor-L]

@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.

[luckygro]

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 :)

[StefanNedelchev]

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?

[janniemeyer]

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

[joaopaulichi]

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

[StefanNedelchev]

I also confirm - the clients using my app reported that the issue is gone after updating to iOS 17.2

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}