PWA學習筆記-5:用firebase做web push

PWA學習筆記-5:用firebase做web push

用到的資源

web push 推播功能,這陣子很常看到的一個功能,如果一進入網站,看到網站要求顯示通知的權限,就代表這個網站有用這功能:

要求顯示通知的權限
要求顯示通知的權限

那通常,很多網站UX設計不良,在使用者根本就還搞不清楚這網站是幹麻的情況下就跳通知,所以大部份都直接按封鎖了吧XD?

總之,在踩了幾個坑以後,終於完整的寫出了web push的功能。

完整是指會在桌機、安卓手機發出推播通知,並且點了會進到指定的頁面,同時在firebase儲存發送訊息的記錄。

本篇用到的資源如下:

資料庫:firebase realtime database
推播功能:firebase cloud messaging
js framework:Vue.js

web push是PWA一個很重要的功能,關於PWA,可以先參考之前寫的文章:

PWA學習筆記-1:cache、workbox基本使用
PWA學習筆記-2:workbox CLI
PWA學習筆記-3:workbox 參數
PWA學習筆記-4:manifest.json

下面幾段步驟會用到前3篇筆記的東西,就不再另外解釋。


取得FCM金鑰

本篇是用firebase的cloud messaging功能(以下稱FCM),去實作web push。所以第一步是要先在firebase上開一個專案。

以下截圖所用到的firebase專案之後會刪掉,各種金鑰最後都不會存在,純示範用。

開完專案後,要取得推播金鑰,有了金鑰才能始用FCM的功能。

首先進到firebase後台,點選齒輪後,再點選專案設定:

點選齒輪,再點專案設定
點選齒輪,再點專案設定

點擊Cloud Messaging:

點擊Cloud Messaging
點擊Cloud Messaging

頁面往下拉,會看到一個「網路設定」的區塊,有一個「產生金鑰組」的按金,按下去:

按下產生金鑰組
按下產生金鑰組

就會產生一組web push用的金鑰,先存下來,firebase config裡會用到:

存下推播憑證
存下推播憑證

新增manifest.json、firebase config

manifest.json

取得金鑰後,第二步就是新增一個manifest.json的檔案,檔案內容大概如下:

最重要的是這一行:

"gcm_sender_id": "103953800507"

這行一定要有,key、value是固定的,copy貼上就行。

firebase config

建立一個首頁的檔案index.html,在頁尾的部份引用firebase config。

firebase config一樣是後台有提供,點小齒輪,再點專案設定後,接著點代表web的那個按鈕:

點選web button
點選web button

就會出現config了:

firebase config
firebase config

copy以後貼到index.html,另外也一併貼上FCM的引用,整合後如下:

最後一行的:

messaging.usePublicVapidKey('XXXXXXXXXXXXXXXXXXXX');

XXX 就是要替換成第一步拿到的FCM金鑰。


取得使用者的token

簡單來說,web push 推播功能的流程如下:

  • 註冊service-worker → 向使用者要求允許通知權限 → 
  • FCM產生這個裝置的token → token寫進資料庫 →
  • 從後台使用web push → server發web push到裝置上 →
  • 裝置上的service worker接收 → service worker執行notification

token是每一個裝置會有的,之所以會以裝置為單位,而不是以使用者為單位,是因為每一個裝置都可以註冊service worker,而且每次存的token都會不同,所以一個使用者在桌機的chrome、fireox,或是安卓手機的chrome、firefox,都有不同的token。

假設王小明在桌機的chrome、firefox,都按下了允許通知,在安卓手機的chrome、firefox也按了允許通知,那當我們按下發送推播後,王小明就會在4個地方收到相同的通知。因為是用裝置來區分的。

IOS目前還不支援web push。


新增sw.js

用workbox新增一個sw.js檔案,把firebase的config放進去,程式碼如下:

如果推播裡要放公司的logo,那logo的圖檔就要寫進快取檔案的清單裡,到時推播才有圖檔可以顯示。


註冊sw.js、存cookies、存firebase

如果拿到的token不存在cookies裡,用cookies判斷是否拿過token,那使用者就會存到2組以上的token,在發推播時,就會收到相同的訊息多次。

當然,如果使用者清除了快取,就會有別種情況發生,最好的方式還是讓使用者登入會員後,再取得token,把token跟會員綁一起,就不會有奇奇怪怪的情形出現。

以下為js code:

裡面有一行很重要:

messaging.useServiceWorker(xxx);

這是這次踩到的坑。

如果沒寫這行,就會發現網站存了2個service worker,分別是firebase的,以及我們自己的。這行可以讓FCM只存我們註冊的sw.js,才可以在用FCM推播時,順利的執行推播及點擊後開啟指定的頁面。

成功的話,開啟index.html,在開發人員工具的Application → Service Workers,就會看見註冊了sw.js檔案:

註冊sw.js成功
註冊sw.js成功

註冊sw.js只能在https下,因此網域必須有SSL,不然會註冊失敗。

messaging.requestPermission()

這行會跟使用者要允許通知,使用者按下允許後,

messaging.getToken()

這行就會產生FCM的token,之後就是存進firebase跟cookies。

firebase上會看到以下:

firebase上存的token
firebase上存的token

之後只要跑個迴圈,就可以一個個去發送web push。


發送web push

這邊新增一個admin.html來當做發送web push的後台介面,直接用vue.js抓每個input的值。

web push admin demo
web push admin demo

web push如果要判斷成效,直接用google analytics的utm參數就可以了,所以後台欄位有給utm用的3個主要參數。

不含樣式的原始碼文末會附上github網址。

在發送web push時,還要填入伺服器的金鑰,這也是從firebase後台可以拿到。點小齒輪 → 專案設定 → Cloud Messaging,第一個「伺服器金鑰」的值就是了:

取得伺服器金鑰
取得伺服器金鑰

發送web push的js如下,寫在admin.html裡:

接收web push

接受web push有2種情況:

  1. 使用者正開啟官網頁面
  2. 使用者沒有開啟官網頁面

第一種情況,是在index.js下寫一個messaging.onMessage的function處理。

第二種情況,是在sw.js下寫一個messaging.setBackgroundMessageHandler的function處理。

使用者正開啟官網頁面

官網正開啟的狀況下,屬於js的notification功能,function範例如下:

payload就是傳來的值,點擊後要導到的頁面就用location.href來處理。

使用者沒有開啟官網頁面

使用者在上網,但沒有開啟官網的頁面,就是由之前註冊的sw.js處理,在sw.js加入以下:

click_action是點擊後要開啟的頁面網址,但要另外寫一個notificationclick來處理。

這邊踩了一個坑,如果按照一般順序來寫,會先寫了messaging.setBackgroundMessageHandler後,再寫notificationclick。然後就會發現,chrome上可以正常運作,但在firefox上怎麼點就是不會開啟頁面。

google了很久,才看到這篇:service worker notificationclick event doesn’t focus or open my website in tab

click_action是chrome用的,如果messaging.setBackgroundMessageHandler先寫了,那FCM就會全部接收web push的功能,就不會讓原生的notificationclick事件被運作,因此notificationclick得寫在前,讓原生事件運作後,再執行FCM的事件。


補充資源

有了發送、接收,基本上web push就可以順利運作了。

要注意的是web push只接受在https以下運行。

最後附上學習時參考的教學文,以及本篇的Github原始碼。

從建firebase就開始教學的(英文):Tutorial: Web Push notification using Firebase

建立 Service Worker Web Push Notification — (Firebase Push Notification實作紀錄)

Push Notification之成為訂閱用戶(Firebase實作)

Google官方教學的原始碼:Github

Google官方教學的功能示範:Notification Examples


PWA學習筆記系列


Summary
PWA學習筆記-5:用firebase做web push
Article Name
PWA學習筆記-5:用firebase做web push
Description
本篇大綱:用到的資源二、取得FCM金鑰三、新增manifest.json、firebase config、取得使用者的token、新增sw.js、註冊sw.js、存cookies、存firebase、發送web push、接收web push、補充資源
Augustus
Let's Write
Let's Write
Publisher Logo

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *