開放網路上的推播通知

Matt Gaunt

如果您詢問內部開發人員 網頁推播通知一律會顯示在最前面。

推播通知可讓使用者選擇接收網站的即時更新 讓您透過自訂的吸睛內容,有效地再次吸引這群人。

自 Chrome 42 版起,Push APINotification API 適用於 開發人員。

Chrome 中的 Push API 需仰賴多種不同技術,包括 網頁應用程式資訊清單Service Worker。 在這篇文章中,我們會逐一介紹這些技術,但這裡只列出最基本的 開始傳遞推送訊息如要進一步瞭解 還整合了資訊清單的其他功能,以及 Service Worker 的離線功能 請點選上方連結

我們也會看看日後的 Chrome 版本中,會加入 API 哪些項目。 最後則是常見問題

實作 Chrome 的推送訊息功能

本節說明支援推送作業時必須完成的每個步驟 訊息傳送功能

註冊 Service Worker

您可能需要讓 Service Worker 實作推送訊息, 在網路上。原因是當收到推送訊息時 瀏覽器可以啟動 Service Worker,在沒有 並指派事件,方便您決定如何處理 推送訊息。

以下範例說明如何在網頁應用程式中註冊 Service Worker。時間 註冊順利完成,我們會呼叫 initialiseState() 我們稍後會再說明

var isPushEnabled = false;



window.addEventListener('load', function() {
    var pushButton = document.querySelector('.js-push-button');
    pushButton.addEventListener('click', function() {
    if (isPushEnabled) {
        unsubscribe();
    } else {
        subscribe();
    }
    });

    // Check that service workers are supported, if so, progressively
    // enhance and add push messaging support, otherwise continue without it.
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
    .then(initialiseState);
    } else {
    console.warn('Service workers aren\'t supported in this browser.');
    }
});

按鈕點擊處理常式會訂閱或取消訂閱使用者來推送郵件。 isPushEnabled 是全域變數,可直接追蹤 訊息目前已訂閱或尚未訂閱。系統會在整個 程式碼片段

然後,我們會先確認系統已支援 Service Worker,再註冊 service-worker.js 檔案,其中包含處理推送訊息的邏輯。我們在這裡 只是告訴瀏覽器這個 JavaScript 檔案是 Service Worker 代表我們網站

設定初始狀態

在 Chrome 中啟用和停用的推送訊息使用者體驗範例。

註冊 Service Worker 後,我們必須設定 UI 狀態。

使用者通常也預期有一個簡單的使用者介面,可用於啟用或停用網站的推送訊息。 不論進行任何變更,都會反映最新的現況。在其他 如果您的網站啟用了推送訊息功能,請先離開 一週後,您的使用者介面應醒目顯示推送訊息已經啟用。

請參閱這份文件中的使用者體驗指南。 本文將著重在技術層面

在這個階段,您可能會認為只能處理兩個狀態 啟用或停用不過,該區域還有其他狀態 顯示您需要納入考量的通知

醒目顯示在 Chrome 中推送的各種注意事項和狀態的圖表

在啟用按鈕之前,我們必須檢查幾個 API 如果一切都受支援,我們可以啟用使用者介面,並將初始狀態設為 指出是否已訂閱推送訊息。

這些檢查大多會導致使用者介面停用,因此 將初始狀態設為停用避免造成混淆 網頁的 JavaScript 相關錯誤,例如無法擷取 JS 檔案 或使用者停用了 JavaScript

<button class="js-push-button" disabled>
    Enable Push Messages
</button>

在初始狀態下,我們可以執行如 initialiseState() 方法 (即註冊 Service Worker 後)。

// Once the service worker is registered set the initial state
function initialiseState() {
    // Are Notifications supported in the service worker?
    if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
    console.warn('Notifications aren\'t supported.');
    return;
    }

    // Check the current Notification permission.
    // If its denied, it's a permanent block until the
    // user changes the permission
    if (Notification.permission === 'denied') {
    console.warn('The user has blocked notifications.');
    return;
    }

    // Check if push messaging is supported
    if (!('PushManager' in window)) {
    console.warn('Push messaging isn\'t supported.');
    return;
    }

    // We need the service worker registration to check for a subscription
    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // Do we already have a push message subscription?
    serviceWorkerRegistration.pushManager.getSubscription()
        .then(function(subscription) {
        // Enable any UI which subscribes / unsubscribes from
        // push messages.
        var pushButton = document.querySelector('.js-push-button');
        pushButton.disabled = false;

        if (!subscription) {
            // We aren't subscribed to push, so set UI
            // to allow the user to enable push
            return;
        }

        // Keep your server in sync with the latest subscriptionId
        sendSubscriptionToServer(subscription);

        // Set your UI to show they have subscribed for
        // push messages
        pushButton.textContent = 'Disable Push Messages';
        isPushEnabled = true;
        })
        .catch(function(err) {
        console.warn('Error during getSubscription()', err);
        });
    });
}

以下簡要說明這些步驟:

  • 我們檢查 ServiceWorker 註冊中是否提供 showNotification 原型否則我們無法顯示來自服務工作人員的通知 當系統傳送推送訊息時,就會觸發這個事件。
  • 我們會檢查目前的 Notification.permission,確保其不屬於 "denied"。權限遭拒代表你無法顯示通知 直到使用者在瀏覽器中手動變更權限為止。
  • 如要檢查是否支援推送訊息功能,我們會檢查 PushManager 是否為 可用在視窗物件中
  • 最後,我們使用 pushManager.getSubscription() 檢查是否已 讀者人數完成後,我們會將訂閱詳細資料傳送至 ,以確保我們擁有正確的資訊,並設定使用者介面,以指出 推送訊息功能已啟用本單元將介紹 已存在於訂閱物件中

請等到 navigator.serviceWorker.ready 解決後,再檢查是否有 以及啟用推送按鈕,因為該按鈕只能在服務後啟用 工作站處於活躍狀態,您可以實際訂閱推送訊息。

下一步是處理使用者要啟用推送訊息的時機。 必須先建立 Google Developer Console 專案 並在資訊清單中加入一些參數 使用 Firebase 雲端通訊 (FCM)。 舊稱 Google 雲端通訊 (GCM)。

在 Firebase Developer Console 中建立專案

Chrome 使用 FCM 處理推送訊息的傳送和傳送作業;然而,如要 使用 FCM API,您必須在 Firebase 開發人員控制台設定專案。

下列步驟僅適用於 Chrome、Opera for Android 和 Samsung 使用 FCM 的瀏覽器。本文稍後會討論此問題在其他瀏覽器中的運作方式。

建立新的 Firebase 開發人員專案

如要開始作業,請在 https://console.firebase.google.com/ 建立新專案 請點選「建立新專案」

新增 Firebase 專案螢幕截圖

新增專案名稱、建立專案,系統就會將您帶往專案 儀表板:

Firebase 專案首頁

在這個資訊主頁中,按一下頂端專案名稱旁的齒輪圖示 並點選「專案設定」

Firebase 專案設定選單

按一下設定頁面中的「雲端通訊」分頁。

Firebase 專案雲端通訊選單

此頁麵包含推送訊息的 API 金鑰,稍後我們會使用這個金鑰 以及傳送者 ID,我們需要填入 Web App 資訊清單中的 專區。

新增網頁應用程式資訊清單

為進行推送,我們需要新增含有 gcm_sender_id 欄位的資訊清單檔案。 才能成功推送訂閱只有 Chrome、Opera for Android 和 Samsung 瀏覽器,都能夠使用 FCM / GCM。

這些瀏覽器在訂閱使用者時會使用 gcm_sender_id 開啟 FCM 應用程式。也就是說,FCM 可以識別使用者的裝置,並 確認您的寄件者 ID 與對應的 API 金鑰相符,且使用者 您的伺服器傳送推送訊息給他們。

以下是超簡單的資訊清單檔案:

{
    "name": "Push Demo",
    "short_name": "Push Demo",
    "icons": [{
        "src": "images/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
        }],
    "start_url": "/index.html?homescreen=1",
    "display": "standalone",
    "gcm_sender_id": "<Your Sender ID Here>"
}

您必須將 gcm_sender_id 值設為寄件者 ID 您的 Firebase 專案。

將資訊清單檔案儲存至專案後 (manifest.json 即可派上用場) ),並在 HTML 原始碼中加上下列標記 頁面。

<link rel="manifest" href="/manifest.json">

如果您未以這些參數新增網站資訊清單,就會收到例外狀況 您在嘗試訂閱使用者推送訊息時,發生錯誤 "Registration failed - no sender id provided""Registration failed - permission denied"

訂閱推送訊息

資訊清單設定完成,現在可以返回網站 JavaScript。

如要訂閱,您必須呼叫 subscribe() 方法, PushManager 物件, 讓您透過 ServiceWorkerRegistration

這會要求使用者授予來源傳送推送的權限 通知。如果沒有這項權限,就無法成功

如果 promise 傳回 subscribe() 方法解析時,系統會針對 PushSubscription 物件,其中會包含端點

您必須在伺服器上儲存各個端點的 endpoint ,因為稍後您會需要他們傳送推送訊息。

以下程式碼會訂閱使用者推送訊息:

function subscribe() {
    // Disable the button so it can't be changed while
    // we process the permission request
    var pushButton = document.querySelector('.js-push-button');
    pushButton.disabled = true;

    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    serviceWorkerRegistration.pushManager.subscribe()
        .then(function(subscription) {
        // The subscription was successful
        isPushEnabled = true;
        pushButton.textContent = 'Disable Push Messages';
        pushButton.disabled = false;

        // TODO: Send the subscription.endpoint to your server
        // and save it to send a push message at a later date
        return sendSubscriptionToServer(subscription);
        })
        .catch(function(e) {
        if (Notification.permission === 'denied') {
            // The user denied the notification permission which
            // means we failed to subscribe and the user will need
            // to manually change the notification permission to
            // subscribe to push messages
            console.warn('Permission for Notifications was denied');
            pushButton.disabled = true;
        } else {
            // A problem occurred with the subscription; common reasons
            // include network errors, and lacking gcm_sender_id and/or
            // gcm_user_visible_only in the manifest.
            console.error('Unable to subscribe to push.', e);
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
        }
        });
    });
}

你的網頁應用程式已準備好接收推送訊息,不過沒有任何訊息 更新作業將會開始,直到您將推送事件接聽程式新增到 Service Worker 檔案為止。

Service Worker 推送事件監聽器

收到推送訊息時 (我們會說明如何傳送推送訊息 下一個部分的訊息),則是「推送事件」 服務工作處理程序,您將需要 顯示通知

self.addEventListener('push', function(event) {
    console.log('Received a push message', event);

    var title = 'Yay a message.';
    var body = 'We have received a push message.';
    var icon = '/images/icon-192x192.png';
    var tag = 'simple-push-demo-notification-tag';

    event.waitUntil(
    self.registration.showNotification(title, {
        body: body,
        icon: icon,
        tag: tag
    })
    );
});

此程式碼會註冊推送事件監聽器,並顯示 預先定義的標題、內文、圖示和通知標記 這個範例中的一個細微差異是 event.waitUntil() 方法。這個方法需要 承諾並擴充 事件處理常式的生命週期 (也可以視為保留服務 才能正常運作),直到承諾 已設定; 在這個案例中,傳遞至 event.waitUntil 的承諾為傳回的 Promise 出發地:showNotification()

通知標記的作用和 識別專屬通知 ID。如果我們傳送兩則推送訊息到 短暫延遲並顯示通知 相同標記,瀏覽器會顯示第一則通知,並以 收到推送訊息時發出的第二則通知

如果您想要一次顯示多則通知,請使用不同的標記,或是 未加入任何代碼 我們稍後會查看更完整的通知範例,說明如何在本研究室中 張貼。我們現在要來保持流程簡單,看看傳送推送訊息是否會顯示 這則通知。

傳送推送訊息

我們已訂閱推送訊息,服務工作人員已準備好顯示 以便透過 FCM 傳送推送訊息。

這項功能僅適用於使用 FCM 的瀏覽器。

當您將 PushSubscription.endpoint 變數傳送至伺服器時, 因此 FCM 的端點它在網址結尾有參數 是 registration_id

端點範例如下:

https://fcm.googleapis.com/fcm/send/APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP

FCM 網址為:

https://fcm.googleapis.com/fcm/send

registration_id 會是:

APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP

這僅適用於使用 FCM 的瀏覽器。在一般瀏覽器中 您只須取得端點 並以標準方式呼叫該端點 任何網址都會正常運作

也就是說,您必須在伺服器上檢查端點 是 FCM。如果是,請擷取 Registration_id。如果想用 Python 執行這個動作 可以執行以下動作:

if endpoint.startswith('https://fcm.googleapis.com/fcm/send'):
    endpointParts = endpoint.split('/')
    registrationId = endpointParts[len(endpointParts) - 1]

    endpoint = 'https://fcm.googleapis.com/fcm/send'

取得註冊 ID 後,即可呼叫 FCM API。個人中心 可以在這裡找到 FCM API 參考文件

呼叫 FCM 時需要注意的幾個重點如下:

  • 值為 key=&lt;YOUR_API_KEY&gt;Authorization 標頭 必須在呼叫 API 時設定,其中 &lt;YOUR_API_KEY&gt; 是 Firebase 專案的 API 金鑰。
    • FCM 會使用 API 金鑰找出適當的傳送者 ID,請確認 使用者已授予專案權限,最後 確認伺服器的 IP 位址已加入許可清單。
  • 適當的 Content-Type 標頭 (application/jsonapplication/x-www-form-urlencoded;charset=UTF-8取決於您 以 JSON 或表單資料的形式傳送資料。
  • registration_ids 的陣列 - 這些是 從使用者的端點擷取

請務必參閱說明文件 瞭解如何透過伺服器傳送推送訊息 但如果想快速瞭解服務工作處理程序 cURL 傳送推送訊息至瀏覽器。

替換 &lt;YOUR_API_KEY&gt;&lt;YOUR_REGISTRATION_ID&gt; 加入自己的程式碼,並從終端機執行。

您應該會看到一則美觀的通知:

    curl --header "Authorization: key=<YOUR_API_KEY>" --header
    "Content-Type: application/json" https://fcm.googleapis.com/fcm/send -d
    "{\"registration_ids\":[\"<YOUR_REGISTRA>TION_ID\"]}"
Android 版 Google Chrome 的推送訊息範例。

開發後端邏輯時,請記得 Authorization 標頭和 POST 主體的格式是 FCM 端點的專屬格式,因此偵測 端點適用於 FCM,且有條件地新增 POST 主體的標頭和格式。 針對其他瀏覽器 (未來可能還會有 Chrome),您需要安裝 網路推送通訊協定

缺點是目前在 Chrome 中實作 Push API 的方式 無法透過推送訊息傳送任何資料不對,什麼都不。這是因為 因此,在日後實作時,酬載資料必須新增到您的 伺服器才會傳送至推送訊息傳遞端點透過這種方式端點 任何推送服務供應商,因此無法輕鬆查看 推送訊息。這麼做也能防範其他安全漏洞,例如不良 HTTPS 憑證和中間人攻擊的驗證機制 伺服器和推送供應程式不過,由於系統尚未支援這種加密機制 在此期間,您必須執行擷取,取得 填入通知

更完整的推送事件範例

目前為止,我們看到的通知內容相當基本 而且截至範例為止 只涵蓋實際用途並不容易

事實上,大多數使用者想從伺服器取得某些資訊其實是想從伺服器取得的資訊。 再顯示通知系統可能會將資料填入 通知標題,以及含有具體資訊的訊息,或進一步 並快取部分網頁或資料,這樣當使用者點選通知時, 只要開啟瀏覽器, 目前無法使用網路。

在下列程式碼中,我們從 API 擷取部分資料,將回應轉換為 物件,並用於填入通知。

self.addEventListener('push', function(event) {
    // Since there is no payload data with the first version
    // of push messages, we'll grab some data from
    // an API and use it to populate a notification
    event.waitUntil(
    fetch(SOME_API_ENDPOINT).then(function(response) {
        if (response.status !== 200) {
        // Either show a message to the user explaining the error
        // or enter a generic message and handle the
        // onnotificationclick event to direct the user to a web page
        console.log('Looks like there was a problem. Status Code: ' + response.status);
        throw new Error();
        }

        // Examine the text in the response
        return response.json().then(function(data) {
        if (data.error || !data.notification) {
            console.error('The API returned an error.', data.error);
            throw new Error();
        }

        var title = data.notification.title;
        var message = data.notification.message;
        var icon = data.notification.icon;
        var notificationTag = data.notification.tag;

        return self.registration.showNotification(title, {
            body: message,
            icon: icon,
            tag: notificationTag
        });
        });
    }).catch(function(err) {
        console.error('Unable to retrieve data', err);

        var title = 'An error occurred';
        var message = 'We were unable to get the information for this push message';
        var icon = URL_TO_DEFAULT_ICON;
        var notificationTag = 'notification-error';
        return self.registration.showNotification(title, {
            body: message,
            icon: icon,
            tag: notificationTag
        });
    })
    );
});

同樣值得,強調 event.waitUntil() 會承諾 結果卻傳回 showNotification() 的承諾,表示 只有在非同步 fetch() 呼叫完成後,事件監聽器才不會結束,且 即可查看通知

且即使發生錯誤,系統也會顯示通知。這是 因為若是沒有收到,Chrome 就會顯示其一般通知。

使用者點擊通知時開啟網址

當使用者點選通知時,系統會分派 notificationclick 事件 服務工作處理程序中。在您的處理常式中,您可以採取適當動作。 例如將焦點移至分頁或開啟具有特定網址的視窗:

self.addEventListener('notificationclick', function(event) {
    console.log('On notification click: ', event.notification.tag);
    // Android doesn't close the notification when you click on it
    // See: http://crbug.com/463146
    event.notification.close();

    // This looks to see if the current is already open and
    // focuses if it is
    event.waitUntil(
    clients.matchAll({
        type: "window"
    })
    .then(function(clientList) {
        for (var i = 0; i < clientList.length; i++) {
        var client = clientList[i];
        if (client.url == '/' && 'focus' in client)
            return client.focus();
        }
        if (clients.openWindow) {
        return clients.openWindow('/');
        }
    })
    );
});

此範例將瀏覽器焦點放在網站來源的根目錄, 現有的相同來源分頁 (如果有的話),或開啟新的分頁。

此外,您也可以參閱這個網頁的說明文章,瞭解可以利用 Notification API 進行哪些操作。

取消訂閱使用者的裝置

在訂閱使用者的裝置之後,他們也可以接收推送訊息,不過要如何 取消訂閱?

取消訂閱使用者裝置的主要必要步驟是 上的 unsubscribe() 方法 PushSubscription 物件,並從伺服器中移除該端點 (只是 卻無法接收推送訊息)。以下程式碼 就是以下示例:

function unsubscribe() {
    var pushButton = document.querySelector('.js-push-button');
    pushButton.disabled = true;

    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // To unsubscribe from push messaging, you need get the
    // subscription object, which you can call unsubscribe() on.
    serviceWorkerRegistration.pushManager.getSubscription().then(
        function(pushSubscription) {
        // Check we have a subscription to unsubscribe
        if (!pushSubscription) {
            // No subscription object, so set the state
            // to allow the user to subscribe to push
            isPushEnabled = false;
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
            return;
        }

        var subscriptionId = pushSubscription.subscriptionId;
        // TODO: Make a request to your server to remove
        // the subscriptionId from your data store so you
        // don't attempt to send them push messages anymore

        // We have a subscription, so call unsubscribe on it
        pushSubscription.unsubscribe().then(function(successful) {
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
            isPushEnabled = false;
        }).catch(function(e) {
            // We failed to unsubscribe, this can lead to
            // an unusual state, so may be best to remove
            // the users data from your data store and
            // inform the user that you have done so

            console.log('Unsubscription error: ', e);
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
        });
        }).catch(function(e) {
        console.error('Error thrown while unsubscribing from push messaging.', e);
        });
    });
}

讓訂閱保持最新狀態

FCM 和伺服器中的訂閱項目可能會不一致。請確認 您的伺服器剖析 FCM API 傳送 POST 的回應主體 error:NotRegisteredcanonical_id 結果,如 FCM 說明文件所述。

此外,在 Service Worker 和 伺服器舉例來說,成功訂閱/取消訂閱後,當機 網路連線可能會導致您無法更新伺服器;或使用者可能 撤銷通知權限,讓系統自動取消訂閱。帳號代碼 來查看這類要求 定期serviceWorkerRegistration.pushManager.getSubscription() (例如 此物件在載入網頁時) 並與伺服器同步處理。您可能也要 如果您不再訂閱,並且自動重新訂閱 Notification.permission == 'granted'。

sendSubscriptionToServer(),請思考您的應對方式 更新 endpoint 時發生網路要求失敗。解決方法之一 在 Cookie 中追蹤 endpoint 的狀態 來判斷您的伺服器是否需要最新詳細資料。

以上所有步驟都會在 Chrome 46 網頁版。其實還有幾項功能有助於簡化 (例如觸發推送訊息的標準 API),但這個版本可讓您 現在就開始在網頁應用程式中建立推送訊息吧!

如何為網頁應用程式偵錯

實作推送訊息時,錯誤會出現在下列其中一個位置:您的網頁 或您的 Service Worker。

您可以使用以下程式碼來偵錯頁面中的錯誤: DevTools。偵錯 Service Worker 問題,您有兩種選擇:

  1. 前往 chrome://inspect >。Service Worker。這個檢視畫面無法提供 除了目前執行中的 Service Worker 外,還顯示的其他資訊。
  2. 請前往 chrome://serviceworker-internals,從中查看 並查看錯誤 (如果有的話)。這個網頁為 ,直到開發人員工具功能集類似為止。

我能向剛接觸服務工作人員的人提供一個最佳提示 使用名為「開啟開發人員工具視窗並暫停 JavaScript 執行」核取方塊 待偵錯。」這個核取方塊會在 啟動服務工作站並暫停執行, 繼續或逐步執行 Service Worker 指令碼,看看是否命中 如要解決關聯問題,可用 Apriori 這類關聯規則學習技術和演算法

螢幕截圖顯示「暫停執行」核取方塊位於 serviceworker-internals 的位置。

如果 FCM 和 Service Worker 的推送事件似乎發生問題, 您無法對問題進行偵錯 即可查看 Chrome 是否收到任何項目請務必確認 FCM 的回應成功。它看起來 例如:

{"multicast_id":1234567890,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"0:1234567890"}]}

請留意 "success": 1 回應。如果看到失敗 顯示 FCM 註冊 ID 和推送作業發生問題 訊息未傳送至 Chrome。

在 Android 版 Google Chrome 中對 Service Worker 進行偵錯

針對 Android 版 Google Chrome 的 Service Worker 偵錯目前尚不明顯。 請前往 chrome://inspect,找出裝置並尋找 名稱為「Worker pid:...」的清單項目。知道您的服務網址 工作站

顯示服務工作處理程序在 Chrome 中檢查位置的螢幕截圖

推播通知的使用者體驗

Chrome 團隊彙整了一份最佳做法文件 以及提供推播通知使用者體驗的文件 特殊情況

Chrome 和開放網路推送訊息的未來

本節會進一步說明 Chrome 的 您應該瞭解的某些部分和方法 則與其他瀏覽器實作不同

網路推送通訊協定和端點

Push API 標準的好處在於,您應該能夠 端點,將其傳送至您的伺服器,然後傳送 訊息 (透過實作網頁推送通訊協定)。

網路推送通訊協定是推送提供者可實作的全新標準 讓開發人員不用擔心推送提供者的身分。 這樣就能省去註冊 API 金鑰的麻煩,並 格式化資料,就像使用 FCM 時一樣

Chrome 是第一個實作 Push API 的瀏覽器,FCM 並未 支援網路推送通訊協定,因此 Chrome 之所以需要 gcm_sender_id,而且您需要針對 FCM 使用 Restful API。

Chrome 的最終目標是改用 Chrome 和 FCM 來使用網路推送通訊協定。

在那之前,您需偵測端點 &quot;https://fcm.googleapis.com/fcm/send&quot; 並從其他端點分開處理,例如:在 然後新增授權金鑰

如何實作網頁推送通訊協定?

Firefox 夜間版本目前正在推送,可能會是第一個瀏覽器 實作網頁推送通訊協定

常見問題

規格在哪裡?

https://slightlyoff.github.io/ServiceWorker/spec/service_worker/ https://w3c.github.io/push-api/ https://notifications.spec.whatwg.org/

如果我的網站有多個來源,或是同時擁有網站和原生網站,我可以避免收到重複通知嗎?

我們目前沒有解決方法,但你可以透過 Chromium 追蹤進度。

理想的情況是先為使用者裝置提供某種 ID 與原生應用程式和網頁應用程式的訂閱 ID 相符 決定要傳送推送訊息給哪一個您可以用螢幕大小 裝置型號 (在網頁應用程式和原生應用程式間共用產生的金鑰),但 每個方法各有優缺點

為什麼我需要 gcm_sender_id?

如此一來,Chrome、Opera for Android 和 Samsung 瀏覽器就能 使用 Firebase 雲端通訊 (FCM) API。目標是使用 當標準敲定,且 FCM 就能支援 Web Push Protocol。

為什麼不使用 Web Sockets 或伺服器傳送事件 (EventSource)?

使用推送訊息的好處是,即使網頁已關閉, Service Worker 將會喚醒,並且可以顯示通知。Web Sockets (網頁通訊端) 當網頁或瀏覽器關閉時,EventSource 即已將其連線關閉。

如果不需要放送背景活動,該怎麼辦?

如果您不需要背景傳送,Web Sockets 是不錯的選擇。

何時可以使用推送功能而不顯示通知 (例如靜音背景推送)?

確切時間尚未推出,不過 執行背景同步處理的意圖 雖未定,但卻無法確定 並利用背景同步功能進行靜音推送

為什麼要求採用 HTTPS?如何在開發期間解決這個問題?

Service Worker 需要安全來源,才能確保 Service Worker 指令碼 來自預定來源,且不代表中間人 攻擊。這表示目前在實際網站上使用 HTTPS,但 localhost 開發應用程式的工作流程

瀏覽器支援是什麼樣子?

Chrome 受到穩定版支援,而 Mozilla 已在 Firefox 夜間版本開發。 詳情請參閱「實作 Push API 錯誤」 如要追蹤他們的「通知」導入情況,請按這裡

我可以在一段時間後移除通知嗎?

目前不行,但我們預計會增加支援, 清單。如果需要 期限過後 所以請留言,我們會將註解回傳給 Chrome 小組

如果您只想停止向使用者傳送推播通知 且不在乎通知持續顯示多久 您就可以使用 FCM 的存留時間 (ttl) 參數 請按這裡瞭解詳情。

Chrome 推送訊息功能有哪些限制?

本文說明以下幾項限制:

  • Chrome 以 CCM 推送服務使用 CCM 為推送服務,建立了多項專屬檔案 Google Cloud 就是最佳選擇我們正在努力,瞭解其中有些指標是否能提高 未來的發展方向
  • 您必須在收到推送訊息時顯示通知。
  • 電腦版 Chrome 會在 Chrome 無法執行的情況下,顯示推送訊息 無法查看。這與 ChromeOS 和 Android 裝置推送訊息的方式不同 一律允許傳輸。

我們不該使用 Permissions API 嗎?

Chrome 中已實作 Permission API。 但不一定適用於所有瀏覽器點此瞭解詳情

為什麼點選通知後,Chrome 不會開啟前一個分頁?

這個問題只會影響目前不受服務控制的網頁 工作站您可以參閱這個網頁來瞭解詳情。

如果使用者裝置收到推送通知時,通知已過期,該怎麼辦?

收到推送訊息時,一律必須顯示通知。 如果您想傳送通知,但做法有所幫助 您可以使用「time_to_live」CCM 上的參數 ,這樣 FCM 就不會在超過到期時間時傳送推送訊息。

詳情請參閱這篇文章

如果我傳送 10 則推送訊息,但只希望裝置接收,該怎麼辦?

FCM 含有「收合鍵」可用來指示 FCM 替換 訊息具有相同的「收合_key」,並顯示新訊息。

詳情請參閱這篇文章