U4 2.0 新特性 —— Web Push

10月13日，2017 雲棲大會 UC 開放服務專場論壇成功舉辦，在現場我們發布了 U4 內核 2.0 版本，新版本的升級完整支持最新的 PWA，其中最大的亮點在於 U4 2.0 是國內首家支持 Web Push 的瀏覽器內核。如何接入 Web Push，提高用戶活躍與粘性，我們來了解下接入的技術文檔。

本文檔主要面向開發者，介紹 Web Push 在 UC 瀏覽器的整個接入流程，包括以下內容：

1. 申請 UCCM (UC Cloud Messaging) 項目
2. 訂閱消息推送 (前端)
3. 推送消息 (服務端)
4. 最佳實踐

在接入成本方面：

• 前端部分提供 UCCM JS SDK 業務可以快速接入
• 服務端目前只需要業務管理用戶及訂閱 token 的映射關係，在推送消息能取出來即可

另外，Web Push 功能需要特定版本的 UC 瀏覽器支持，前期業務合作可以按郵件申請的方式，我們會提供支持 Web Push 的包給到合作夥伴，正式版本預計在 12 月份發布。

一、申請 UCCM 項目

業務接入方需要提供以下信息

• 業務名稱：提供業務全稱、英文簡稱
• 負責人：提供郵箱，可以多人
• 接入域名：可以多個，必須支持 https

這步主要是拿到 sender_id,server_key，前期接入郵件申請，後續申請流程逐步加到開放平台。其中 sender_id 用於前端 SDK 初始化參數，server_key 用於推送消息時的認證。

業務接入方可以發送業務名稱、負責人、以及接入域名到郵箱 uc-web-dev@service.alibaba.com。

二、訂閱消息推送

1. service worker

主要內容：準備 Web Push 註冊腳本，用來註冊 service worker。

新建文件，文件名為 messaging-sw.js，放到站點根路徑: /messaging-sw.js

註冊腳本模板如下

// load JS SDKimportScripts("https://img.ucweb.com/s/uae/g/0n/uccm/1.0.1/index.js");const messaging = uccm.messaging({ messagingSenderId: "your_sender_id"});// 3. when recieved only data payload (notofication null)messaging.setBackgroundMessageHandler((payload, event) => { // Call event.stopImmediatePropagation() // to avoid "This site has been updated in the background." if null == payload.notification event.stopImmediatePropagation();});

2. 頁面 JS SDK 初始化

主要內容：頁面 JS SDK 初始化，得到 messaging 實例。

2.1 載入 JS SDK

<script src="//i1.wp.com/img.ucweb.com/s/uae/g/0n/uccm/1.0.1/index.js"></script>

2.2 載入腳本後，得到 window.uccm 對象，傳入 messagingSenderId 執行 uccm.messaging() 得到 messaging 實例

var messaging = uccm.messaging({ messagingSenderId: "your_sender_id"});

3. 獲得消息通知許可權

messaging.requestPermission().then(function() { // 授權成功}).catch(function(error) { // 授權失敗，用戶拒絕 console.log(":^(", error);});

4. 獲取 registration token

messaging.requestPermission().then(function() { messaging.getToken() .then(function(currentToken) { // 這裡拿到 registration token // 上傳 token 及一些業務數據（用戶、設備）到自己的後台 // token 在推送消息時用到 }).catch(function(err) { console.log(":^(", err); });}).catch(function(error) { console.log(":^(", error);});

匯總

<script> (function () { // Detect if env is OK var isHttps = location.protocol === "https:"; var webPushSupported = ( "serviceWorker" in navigator && "PushManager" in window && "Notification" in window && "fetch" in window && ServiceWorkerRegistration.prototype.hasOwnProperty("showNotification") && PushSubscription.prototype.hasOwnProperty("getKey") ); if(!isHttps || !webPushSupported){ return; } // Load JS SDK var importScript = (function (oHead) { function loadError(oError) { throw new URIError("The script " + oError.target.src + " is not accessible."); } return function (sSrc, fOnload) { var node = document.createElement("script"); node.async = true; oHead.appendChild(node); node.src = sSrc; node.onerror = loadError; if (typeof fOnload === "function") { node.onload = fOnload; } } })(document.head || document.getElementsByTagName("head")[0]); importScript("https://img.ucweb.com/s/uae/g/0n/uccm/1.0.1/index.js", function () { // Get an messaging instance var messaging = uccm.messaging({ messagingSenderId: "your_sender_id" }); // Request permission messaging.requestPermission().then(function () { messaging.getToken() .then(function (currentToken) { // Send subscription token to your server // something like ajax.send(currentToken) }).catch(function (err) { console.log(":^(", err); }); }).catch(function (error) { console.log(":^(", error); }); /** * Monitor message * 分以下兩種情況 * 1. 發送 data 消息會以廣播的形式發送到頁面 * 2. 發送 notification 時，如果有頁面在前台，頁面會收到廣播消息，否則默認會彈系統提醒 */ messaging.onMessage( function(payload) { // code something here }); // Callback fired if token once updated. messaging.onTokenRefresh(function () { messaging.getToken() .then(function (refreshedToken) { // update subscription token }) .catch(function (err) { console.log("Unable to retrieve refreshed token ", err); }); }); }); })();</script>

三、推送消息

消息類型

• 通知消息 (notification)
• 數據消息 (data)

消息推送示例

推送只有 notification 的 payload

curl "https://uccm.ucweb.com/uccm/send" -H "Authorization: key=${your_server_key}" -H "Content-type: application/json" -d "{ "to": "iuBvoobOXOGpTN0akLcdV1NHPsuHm4rDOkF4nqAqhNQ","notification": {"title":"Rock PWAs","body": "Welcome!","click_action": "https://pwa.rocks","icon":"https://ae01.alicdn.com/kf/HTB11xzZPFXXXXaTXXXX760XFXXXu.png"}}"

推送只有 data 的 payload

curl "https://uccm.ucweb.com/uccm/send" -H "Authorization: key=${your_server_key}" -H "Content-type: application/json" -d "{ "to": "iuBvoobOXOGpTN0akLcdV1NHPsuHm4rDOkF4nqAqhNQ","data": {"name":"Rock PWAs", "action":"do something"}}"

推送包含 notification & data 的 payload

curl "https://uccm.ucweb.com/uccm/send" -H "Authorization: key=${your_server_key}" -H "Content-type: application/json" -d "{ "to": "iuBvoobOXOGpTN0akLcdV1NHPsuHm4rDOkF4nqAqhNQ","notification": {"title":"Rock PWAs","body": "Welcome!","click_action": "https://pwa.rocks","icon":"https://ae01.alicdn.com/kf/HTB11xzZPFXXXXaTXXXX760XFXXXu.png"},"data": {"name":"Rock PWAs", "action":"do something"}}"

四、需要關注的一些指標

• 訂閱轉化率=同意PV／彈窗PV
• 消息到達率
• 消息點擊率
• 活躍用戶是否上升
• 網站轉化率

五、最佳實踐

• what makes a good notification

最新使用文檔，請訪問： 文檔中心 | UC 開放平台