angular - Angular firebase - 获取脚本时收到错误的 HTTP 响应代码 (404)。（消息传递/失败的服务工作者注册）

Question

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { MessagingService } from './core/services/messaging.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'adminPanel-theme';
  message: any;

  constructor(private messagingService: MessagingService,
    private router: Router) { }

  ngOnInit(): void {
    this.messagingService.requestPermission();
    this.messagingService.receiveMessage();
    this.message = this.messagingService.currentMessage;
    console.log(this.message,'message');
  }
}

firebase.messaging-sw.js（在 src 中）

importScripts('https://www.gstatic.com/firebasejs/8.3.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.3.0/firebase-messaging.js');
firebase.initializeApp({
  apiKey: "*******",
  authDomain: "*******",
  databaseURL: "*******",
  projectId: "*******",
  storageBucket: "*******",
  messagingSenderId: "*******",
  appId: "*******"
});
const messaging = firebase.messaging();

消息服务.ts

import { Injectable } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { BehaviorSubject } from 'rxjs';
import { catchError } from 'rxjs/internal/operators/catchError';
import { of } from 'rxjs/internal/observable/of';
import { tap } from 'rxjs/internal/operators/tap';
import { CommonNotificationService } from './common-notification.service';

@Injectable()

export class MessagingService {

  currentMessage = new BehaviorSubject(null);
  constructor(private angularFireMessaging: AngularFireMessaging,
    private commonNotificationService: CommonNotificationService) {
    this.angularFireMessaging.messages.subscribe(
      (_messaging: AngularFireMessaging) => {
        _messaging.onMessage = _messaging.onMessage.bind(_messaging);
        _messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
      })
  }

  requestPermission(): void {
    this.angularFireMessaging.requestToken.subscribe(
      (token) => {
        localStorage.setItem('webNotificationToken', token);
        this.commonNotificationService.setWebNotificationToken(token);
      },
      (err) => {
        console.error('Unable to get permission to notify.', err);
      }
    );
  }

  receiveMessage(): void {
    this.angularFireMessaging.messages.subscribe(
      (payload) => {
        console.log('new message received. ', payload);
        this.currentMessage.next(payload);
      });
  }

manifest.json（在 src 中）

{
    "gcm_sender_id": "******"
}

我为此尝试了多种解决方案，但仍然遇到相同的错误。我早些时候得到了令牌，但突然它停止工作，我收到了这个错误。给出了解决方案，但没有一个有效。有人可以提出一些建议吗？

错误 - 无法获得通知权限。FirebaseError：消息：我们无法注册默认服务工作者。使用脚本 ('http://localhost:4200/firebase-messaging-sw.js') 为范围 ('http://localhost:4200/firebase-cloud-messaging-push-scope') 注册 ServiceWorker 失败：获取脚本时收到错误的 HTTP 响应代码 (404)。（消息传递/失败的服务工作者注册）。

标签： angulartypescriptfirebase