Progressive Web Application Day07 — 好好用的推播訊息 Part 1 — 簡介

6 min readMar 31, 2018

在先前的章節中，介紹了許多讓 PWA 看起來與用起來和一般的 Web App 不太一樣的地方，接下來要介紹在之前，只有 Native App 才有的原生功能， Web App 如果也要的話，往往需要第三方服務的支援才能達成，這個功能就是：推播訊息。

因為推播有通知使用者的功用，因此當訂單狀態改變，或是有新的訊息時，可以即時的通知使用者，不需讓使用者時不時就進入應用程式查詢，讓應用程式用起來更加好用。

謎之聲：在進入此章節前，對於 Service Worker 需要有一定的認識，同時因為推播訊息會需要用到後端，所以也必須具備一些 NodeJS 的知識（後端是使用 NodeJS ，不過這部分並不是一定要使用 NodeJS）

流程介紹

在介紹整個推播流程前，需要先介紹一下這個流程裡面的角色。

Push Service

在整個推播流程中，有個問題需要解決：該如何知道訊息要送到哪個裝置？只要解決了這個問題後，產生推播訊息或是顯示通知，這些都不是太困難的問題。

為了解決這個問題，各家瀏覽器分別實作了一個服務，叫做： Push Service ，由於是各個瀏覽器分別實作，所以各個瀏覽器可能會有點不太一樣。在整個推播流程中， Push Service 主要的功能在於：把推播訊息送到正確的裝置上，以及讓 Browser 可以訂閱 Push Service ，用來接收推播訊息。

Browser

而 Browser 中的 Service Worker ，則是負責在背景接收來自 Push Service 的推播訊息，為什麼會選擇在 Service Worker 中接收呢？為什麼不是在頁面上？

這是因為推播訊息，在使用者未開啟應用程式時，也要能接收到推播訊息，因此必須透過 Service Worker ，可以在背景執行的特性，讓使用者即便未開啟應用程式，也能收到訊息。

另外， Browser 也負責通知該如何呈現，像是：標題、內容、圖標、震動……等。

Server

主要負責產生推播的訊息，但這個不見得是使用者，所看到的推播訊息，有可能只是讓 Browser 可以識別的內容，產生通知的部分還是由 Browser 來負責。

另外， Server 也必須要儲存 Browser 訂閱 Push Service 的訂閱資訊，與加密推播訊息內容。

流程介紹

首先，必須要先確保使用者已經同意顯示通知，如果使用者不允許顯示通知，即便後續的流程完成，也沒辦法正確的顯示通知，因此必須要先確認使用者的通知權限。

如果使用者的權限是 granted 或是 denied 都無法再次要求權限。

確認完使用者的權限後，就可以繼續接下來的流程。想要接收到推播訊息，就必須要訂閱 Push Service ，為什麼呢？前面有提過 Push Service 主要的功能在於：將推播訊息傳送到正確的裝置上。

Push Service 能夠傳遞推播訊息給正確的裝置，是因為透過 Browser 訂閱 Push Service 時， Push Service 能夠產生一組獨特，且屬於該裝置的 endpoint URL ， Push Service 會自動將裝置和該 endpoint URL 對應起來，因此只要有推播訊息傳送到該 endpoint URL ， Push Service 自然能夠將推播訊息傳給正確的裝置。