Thực hành thông báo PUSH với FCM + ServiceWorker

Tram Ho

Lý lịch

Một ServiceWorker đơn giản đã được xây dựng trong một dự án. Mặc dù dự án đã hoàn thành mà không kết hợp nhiều chức năng, tôi đã bị thu hút bởi từ thông báo PUSH và bắt đầu nghiên cứu độc lập. Tuy nhiên, vì điều này rất khó khăn, tôi nghĩ tôi nên ghi chú lại.

Điều kiện tiên quyết

  • Nó có thể không phải là cách chính thức để nhúng.
  • Nó có thể thay đổi trong tương lai! Tôi làm bản ghi nhớ này chỉ cho thời điểm này.
  • Để sử dụng ServiceWorker, cần phải truy cập trang bằng SSL.

Cấu trúc thư mục

Các bước

Tạo index.html

Mục đích của index.html là hiển thị trang và tải Javascript cần thiết. Trong trường hợp này, vì firebase được sử dụng, Javascript cần thiết để sử dụng firebase và quá trình xử lý để sử dụng serviceworker sẽ được đọc.

manifest.json

manifest.json đang được sử dụng để xác định tên của ứng dụng này. Tên tệp có vẻ không có ý nghĩa, nhưng nó phải được xác định theo định dạng json. Các mục được xác định bị bỏ qua, nhưng gcm_sender_id là một mục cần thiết cho thông báo PUSH bằng FCM. Giá trị này là 103953800507 và dường như được cố định trong thời điểm hiện tại. Tôi không biết tại sao, nhưng tôi sẽ sớm xem xét nó.

firebase-init.js

Không có đặc điểm kỹ thuật trong tên của firebase-init.js . Hiện tại, ý nghĩa của việc khởi tạo Firebase được bao gồm.

Có nhiều phần tôi không hiểu, nhưng theo tôi biết thì nó chạy như thế này. Nội dung của firebaseConfig có thể được lấy từ bảng điều khiển của firebase, vì vậy bạn có thể sao chép và dán.

Tuy nhiên, vì thông tin thu được từ sao chép và dán không bao gồm messagingSenderId , nên nó phải được thêm vào. Từ bảng điều khiển firebase, khi bạn chuyển sang nhắn tin trên đám mây, có một mục có tên là SenderID , vì vậy hãy sử dụng giá trị đó.

Ngoài ra, khóa được trao cho messaging.usePublicVapidKey cũng có được bằng cách tạo chứng chỉ đẩy web từ bảng điều khiển firebase.

app.js

Đây là quá trình để đăng ký ServiceWorker . Cụ thể, những điểm sau nên được áp dụng cẩn thận.

  • Trạng thái hỗ trợ ServiceWorker của trình duyệt
  • Yêu cầu người dùng cho phép thông báo
  • Nếu được phép, hãy đăng ký đăng ký thông báo

firebase-message-sw.js

firebase-messaging-sw.js là một tập lệnh chạy trong nền. Vì nó được đăng ký trong trình duyệt và chạy độc lập trong nền, nên cần mô tả tất cả các xử lý đọc Javascript cần thiết để sử dụng firebase.

Những điểm sau đây rất quan trọng.

  • Đăng ký một sự kiện khi nhận được thông báo PUSH
  • Đăng ký một sự kiện khi nhận được thông báo PUSH trong nền

Thông báo được tạo bằng cách gọi self.registration.showNotification . Vượt qua tiêu đề và các tùy chọn (văn bản, vv) làm đối số.

messageTitlemessageBody là các giá trị cố định, nhưng ban đầu chúng được lấy từ sự kiện và tải trọng và được tạo thành thông tin phù hợp. Nếu bạn thử "Gửi thông báo từ bảng điều khiển Firebase" và "Gửi thông báo bằng lệnh curl", bạn sẽ tìm thấy các trường để nhập tiêu đề và văn bản.

Kiểm tra

Gửi thông báo từ bảng điều khiển Firebase

Gửi thông báo từ bảng điều khiển Firebase Bạn có thể tạo thông báo bằng cách mở Cloud Messaging từ bảng điều khiển Firebase, do đó bạn có thể gửi thông báo bằng cách nhập tiêu đề và nội dung và đặt ứng dụng đích.

Gửi thông báo bằng lệnh curl

  • SERVERKEY được lấy từ bảng điều khiển Firebase.
  • DEVICETOKEN là đầu ra cho bảng điều khiển trình duyệt khi mã thông báo được mua bằng app.js hoặc firebase-init.js, vì vậy hãy sao chép nó.

Trình duyệt (Chrome)

Mở công cụ dành cho nhà phát triển, bạn có thể kiểm tra trạng thái của ServiceWorker trong tab Ứng dụng. Nếu nó không hoạt động, nhấn liên kết Unregister và tải lại trang. Khi nhận được thông báo, một trong những "sự kiện: đẩy", "onMessage" hoặc "backgroundMessage" sẽ được đẩy ra tab Console.

Nếu nó hoạt động chính xác, một hộp thoại thông báo sẽ xuất hiện ngay cả khi trình duyệt được thu nhỏ hoặc tab trang bị đóng.

Khác

Mặc dù tôi không hiểu chính xác, tôi đã có thể hiển thị thông báo ngay bây giờ. Ngoài ra, tôi sẽ kể những gì tôi đã lo lắng và những gì tôi đã đấu tranh.

messaging.setBackgroundMessageHandler hiếm khi được gọi.

Điều này cũng được mô tả trong tài liệu Firebase . Nếu có trường thông báo (thông báo) trong thông tin đã gửi, setBackgroundMessageHandler dường như không được gọi. Khi tôi sửa đổi "gửi thông báo bằng lệnh curl" đã đề cập ở trên và viết lại thông báo vào dữ liệu, setBackgroundMessageHandler đã được gọi.

hộp thoại thông báo sẽ được hiển thị khi ứng dụng web không ở trạng thái nền trước?

Tôi đã có một thời gian khó khăn để xác nhận hành vi này. Ở nơi đầu tiên, tôi không hiểu hành vi đúng là gì. Hộp thoại thông báo chỉ xuất hiện khi ứng dụng WEB không ở phía trước (Có lẽ cách hiểu này có thể sai). Và tôi không chắc trạng thái nào ở phía trước và trạng thái nào không, vì vậy tôi đã cố gắng làm cho nó rõ ràng không nằm ở phía trước, chẳng hạn như "cửa sổ thu nhỏ" hoặc "tab đóng".

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo