angular: Service Worker Push requestSubscription error on SAFARI 12

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

About this issue

  • Original URL
  • State: open
  • Created 5 years ago
  • Comments: 16 (4 by maintainers)

Most upvoted comments

It would be great to have this fixed, especially now when Safari iOS 16 supports push notifications.

@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

constructor(private injector: Injector) {
  if (this.isSwPushSupported()) {
    this.swPush = this.injector.get(SwPush, undefined);
  }
}