Repository navigation
Service Worker Push requestSubscription error on SAFARI 12 #27889
Description
🐞 bug report
Affected Package
The issue is caused by package @angular/service-worker
Is this a regression?
I don't know
Description
The swPush requestSubscription break on SAFARI browser
🔬 Minimal Reproduction
import { Optional, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { SwPush } from '@angular/service-worker';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
import { PushNotification } from './notification';
@Injectable({
providedIn: 'root'
})
export class NotificationService {
constructor(
private http: HttpClient,
@Optional() private swPush: SwPush
) { }
activate(): Observable<void> {
return Observable.create((observer) => {
this.swPush.requestSubscription({
serverPublicKey: environment.webPush.publicKey
}).then((subscription: PushSubscription) => {
this.http.post(`${environment.serverUrl}/subscription`, subscription).subscribe(() => {
observer.next();
observer.complete();
}, (err) => {
observer.error(err);
});
}).catch((err) => {
console.log(err): // => Here an error occurs on Safari : TypeError: undefined is not an object (evaluating 't.subscribe')
observer.error(err);
});
});
}
sendNotification(notification: PushNotification): Observable<void> {
return this.http.post<void>(`${environment.serverUrl}/notification`, notification);
}
messages(): Observable<PushNotification> {
return <Observable<PushNotification>>this.swPush.messages;
}
}🔥 Exception or Error
TypeError: undefined is not an object (evaluating 't.subscribe')
🌍 Your Environment
Angular Version:
Angular CLI: 7.1.4
Node: 8.11.3
OS: darwin x64
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.11.4
@angular-devkit/build-angular 0.11.4
@angular-devkit/build-optimizer 0.11.4
@angular-devkit/build-webpack 0.11.4
@angular-devkit/core 7.1.4
@angular-devkit/schematics 7.1.4
@angular/cdk 7.2.0
@angular/material 7.2.0
@angular/pwa 0.11.4
@ngtools/webpack 7.1.4
@schematics/angular 7.1.4
@schematics/update 0.11.4
rxjs 6.3.3
typescript 3.1.6
webpack 4.23.1
AND :
"@angular/service-worker": "~7.1.0",
Anything else relevant?
This issue is on Safari browser Version 12.0.2 (13606.3.4.1.4)
Activity
gkalpak commentedon Jan 3, 2019
This is similar to #25781. It seems that on some browsers that otherwise support ServiceWorkers,
ServiceWorkerRegistration#pushManagercan be (under certain circumstances?) undefined.As a work-around, you could do one of the following:
this.swPush.subscription.pushManageris supported before trying to subscribe (e.g.'PushManager' in windowor'pushManager' in ServiceWorkerRegistration.prototypeor(await navigator.serviceWorker.getRegistration()).pushManager).Interestingly, MDN gives contradicting info on browser support, claiming that
window.PushManageris not supported on Safari butServiceWorkerRegistration#pushManageris supported on Safari 😕In any case, I think it makes sense to handle this more gracefully in
@angular/service-worker(e.g. throw a more descriptive error ifpushManageris not defined). Leaving this open as a feature request for that.robinComa commentedon Jan 3, 2019
Hello @gkalpak thanks for quick reply !
This workaround is to avoid the error on console, exact ? You mean that @ angular/service-worker cannot be used with the latest version of Safari? (this is the only way to do a PWA on IOS) 😞
robinComa commentedon Jan 3, 2019
Another thing : @angular/service-worker is not on the ng version result list
gkalpak commentedon Jan 3, 2019
No, you can use
@angular/service-worker, but if Safari does not (always?) supportPushManager, then you can't use Push notifications on Safari. (You can still use the rest of the SW features.)This sounds like an issue for https://github.com/angular/angular-cli (although it may be intentional).
robinComa commentedon Jan 3, 2019
Ok I understand for the Safari case, do you know if Chrome on IOS will works for push notification in the future ?
@angular/service-worker doesn't implement this kind of notification ?
I create an issue on cli for the ng version "issue"
gkalpak commentedon Jan 3, 2019
I am pretty confident that both Chrome and Safari will fully support push notifications (at some point).
No idea what this is (or even if it is different than regular notifications - the content seems outdated too).
robinComa commentedon Jan 3, 2019
Ok thanks for informations about support of push notification on IOS Chrome and Safari :-)
This is the official page of Safari push notification (the last link was a demo that's work when you open the site with safari) :
gkalpak commentedon May 26, 2020
I wonder if this is still an issue (it's been ~1.5year - maybe this has been fixed on latest Safari).
2 remaining items
zedL commentedon Nov 7, 2020
I also stated to use push notifications with Angular 10. "undefined is not an object (evaluating 't.getSubscription')" exeption is still there.
zedL commentedon Nov 7, 2020
yansokalau commentedon Dec 30, 2020
any update on this? does anyone have workarounds?
cghislai commentedon Apr 19, 2021
@yansokalau There are workarounds suggested above, but as far as I can tell, the bug is in the SwPush constructor, and injecting it in a service constructor in your app will trigger it. However, you an use angular Injector, and obtain an instance after checking it is supported by the browser. Something like
genevpd commentedon Jun 27, 2022
It would be great to have this fixed, especially now when Safari iOS 16 supports push notifications.
hernays commentedon Nov 2, 2022
Hello my friends , not solutions in the topic?
Hola amigos alguna solucion para Este tema me funciona Bien en todos Las plataformas Menos en safari - iphone
twmobius commentedon Jan 22, 2024
Are there any updates to this? It appears that this issue still exists on angular 16, which comes up on mobile Safari versions 16.6 and 17.2
JeanMeche commentedon Aug 29, 2025
With #63364 we've announced that the service-worker package in now in maintenance mode and will not receive feature PRs and feature requests.
The message is also visible here: https://angular.dev/ecosystem/service-workers
angular-automatic-lock-bot commentedon Sep 29, 2025
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.