javascript - Angular Service worker với thông báo đẩy FCM

Trong ứng dụng web của tôi (sử dụng Angular4), tôi đang sử dụng "@angular/service-worker": "^1.0.0-beta.16" để tạo service worker và cũng sử dụng firebase-messaging-sw.js cho thông báo đẩy FCM, angular/service-worker chỉ tạo worker-basic.min.js trong bản build production. Bây giờ, làm thế nào để sử dụng hai service worker này cùng nhau??

Câu trả lời #1

Tôi có thể phản hồi về việc sử dụng đồng thời:

• sw-precache Service Worker (với mục đích lưu trữ tạm thời các tài nguyên tĩnh) được triển khai dưới dạng service-worker.js. Xem https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers

• Firebase Messaging Service Worker (nhằm mục đích xử lý thông báo đẩy web) được triển khai dưới dạng firebase-messaging-sw.js.

1. Phát triển: trong thư mục src:

• Tôi tạo một tập tin trống có tên service-worker.js. Tập tin thực sự sẽ được tạo ra sau quá trình build nhưng tập tin này phải tồn tại (dù trống) để tránh thông báo lỗi khi phục vụ với ng serve.
• Tôi tạo một tệp có tên firebase-messaging-sw.js với nội dung là: (thêm https:// trước cả hai www, stakoverflow giới hạn số lượng liên kết của tôi!)
  
  importScripts('www.gstatic.com/firebasejs/3.9.0/firebase-app.js'); importScripts('www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js'); firebase.initializeApp({ 'messagingSenderId': 'xxxxxxxxxxxx'/thay bằng của bạn! }); const messaging=firebase.messaging();
• Tôi tạo một tệp có tên global-sw.js. Đây là Service Worker mà bạn phải đăng ký trong index.html (hãy hỏi tôi cách làm nếu cần). Nội dung của global-sw.js là:
  
  importScripts('service-worker.js'); importScripts('firebase-messaging-sw.js');

2. Cập nhật .angular-cli.json: Để bao gồm những tệp đó trong thư mục dist trong tương lai của tôi (được tạo ra bằng quy trình build sản xuất), tôi cập nhật .angular-cli.json theo cách này: .angular-cli.json - trích xuất

3. Phiên bản sản xuất: Tôi chạy ng build -prod sau đó tôi tạo service-worker.js. Đối với tôi, cái này chỉ có thể được tạo sau quá trình build.

Câu trả lời #2

Chỉ cần thêm vào angular.json tệp mà bạn muốn trình biên dịch biết đến.

"assets": [
    "src/favicon.ico",
    "src/assets",
    "src/firebase-messaging-sw.js", // add this one
    "src/manifest.json" // this one also 
]

Cảm ơn https://medium.com/mighty-ghost-hack/angular-8-firebase-cloud-messaging-push-notifications-cc80d9b36f82