このページは Cloud Translation API によって翻訳されました。

OpenWeb でのプッシュ通知

Matt Gaunt

プッシュ通知の実装の詳細については、ウェブのプッシュ通知のドキュメントをご覧ください。

開発者の部屋に尋ねられたら、どのモバイルデバイスの機能が常に上位に表示されます。

プッシュ通知を使用すると、ユーザーは自分が訪れたサイトからの更新情報を受け取ることをオプトインできます。カスタマイズした魅力的なコンテンツで効果的に再アプローチできます

Chrome バージョン 42 以降、Push API と Notification API は、開発できます。

Chrome の Push API は、次のようなテクノロジーを利用しています。ウェブアプリマニフェスト Service Worker です。今回の投稿では、これらのテクノロジーを一つひとつ見ていきますが、これはほんの最低限のものにすぎません。プッシュメッセージングを立ち上げることができますこれらのコンセプトについてマニフェストの他の機能と Service Worker のオフライン機能上記のリンクをご確認ください。

また、Chrome の今後のバージョンで API に追加される内容、最後によくある質問を紹介します

Chrome 用のプッシュメッセージの実装

このセクションでは、push をサポートするために完了する必要がある各手順について説明します。ウェブアプリで行えます

Service Worker を登録する

メッセージの push メッセージを実装するための Service Worker が、できます。これは、push メッセージを受信すると、その時点でブラウザが Service Worker を起動できます。Service Worker は、イベントを発生させて、そのイベントの処理方法を決定できます。 push メッセージです。

ウェブアプリで 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 は、push の有効化を単純に追跡するグローバル変数です。登録状況を確認できます。これらの用語は確認します。

次に、service-worker.js を登録する前に、Service Worker がサポートされていることを確認しますこのファイルには、push メッセージを処理するためのロジックが含まれています。ここでは、この JavaScript ファイルが Service Worker であることをブラウザに伝えるだけです確認しました

初期状態をセットアップする

Service Worker を登録したら、UI の状態を設定する必要があります。

ユーザーはシンプルな UI でサイトのプッシュメッセージを有効または無効にできます。変更が加えられても必ず最新の状態が保たれることを期待しますその他のプッシュメッセージが有効になっている場合は、そのままにして戻ります。 push メッセージがすでに有効になっていることが UI にハイライト表示されます。

こちらのドキュメントに、UX ガイドラインの一部が記載されています。この記事では技術的な側面に焦点を当てます。

この時点で、対処すべき状態は 2 つしかないとお考えかもしれません。有効または無効にできます。ただし、これを取り巻く州は他にもいくつかあります。注意が必要な通知の数が増えます

ボタンを有効にする前に、いくつかの API を確認する必要があります。すべてがサポートされている場合は、UI を有効にして初期状態をプッシュメッセージングがサブスクライブされているかどうかを示す。

これらのチェックの結果の大半は UI が無効になるので、初期状態を無効に設定します。こうすればページの 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);
        });
    });
}

この手順の概要:

showNotification が ServiceWorkerRegistration で利用可能であることを確認します。説明します。これがないと、Service Worker からの通知を表示できません。 push メッセージを受信すると発生します。
現在の Notification.permission が何かを確認し、 "denied"。権限が拒否された場合、通知を表示できませんユーザーがブラウザで権限を手動で変更するまで、この状態が維持されます。
プッシュメッセージングがサポートされているかどうかを確認するには、PushManager が指定することもできます。
最後に、pushManager.getSubscription() を使用して、判断しますその場合、定期購入の詳細を適切な情報があることを確認し、API でその内容を示す有効かどうかを判定できますCloud Monitoring で後ほど説明します。

navigator.serviceWorker.ready が解決するまで待機し、プッシュボタンの有効化もできます push メッセージをサブスクライブできます。

次のステップでは、ユーザーがプッシュメッセージを有効にしようとしても、その前に Google Developer Console プロジェクトを設定しておく必要がありますマニフェストにパラメータを追加して Firebase Cloud Messaging（FCM）を使用する（旧称 Google Cloud Messaging（GCM））です。

Firebase Developer Console でプロジェクトを作成する

Chrome は FCM を使用して push メッセージの送受信を処理します。ただし、 FCM API を使用する場合は、Firebase Developer Console でプロジェクトを設定する必要があります。

以下の手順は、Chrome、Android 版 Opera、Samsung に固有のものです。ブラウザが FCM を使用している。他のブラウザでこれがどのように機能するかについては、この記事の後半で説明します。

新しい Firebase デベロッパープロジェクトを作成する

最初に、https://console.firebase.google.com/ で新しいプロジェクトを作成する必要があります。 [新しいプロジェクトを作成]をクリックします

新しい Firebase プロジェクトのスクリーンショット

プロジェクト名を追加してプロジェクトを作成すると、このプロジェクトが表示されます。ダッシュボード:

Firebase プロジェクトホーム

このダッシュボードで、上部のプロジェクト名の横にある歯車アイコンをクリックします。 [プロジェクトの設定] をクリックします。

設定ページで [Cloud Messaging] をクリックします。タブ

Firebase プロジェクトの Cloud Messaging メニュー

このページには、プッシュメッセージング用の API キーが記載されています。このキーは後で使用します。次のスライドでウェブアプリマニフェストに入力する必要がある、。

ウェブアプリマニフェストを追加する

push の場合、gcm_sender_id フィールドのあるマニフェストファイルを追加する必要があります。 push サブスクリプションが成功します。このパラメータが必要なのは、 Chrome、Android 向け Opera、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 の値を追加します。

マニフェストファイルをプロジェクトに保存したら（manifest.json は、など）は、HTML から参照するために、できます。

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

これらのパラメータを含むウェブマニフェストを追加しないと、例外が発生しますメッセージを push できるようにユーザーを登録しようとすると、 "Registration failed - no sender id provided" または "Registration failed - permission denied"。

プッシュメッセージングに登録する

マニフェストの設定が完了したので、サイトの JavaScript に戻ります。

サブスクライブするには、ニュースメディア上で subscribe() メソッドを呼び出す必要があります。 PushManager オブジェクトを作成し、ファイアウォールルールで ServiceWorkerRegistration。

送信元に push を送信する権限を付与するようユーザーに求めます。通知を受け取れます。この権限がないと、次のことを正常に行うことができません定期購読できます

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';
        }
        });
    });
}

この時点で、ウェブアプリはプッシュメッセージを受信する準備が整っていますが、 push イベントリスナーを Service Worker ファイルに追加するまで続きます。

Service Worker の push イベントリスナー

push メッセージを受信したら（この後、実際に push メッセージをメッセージ）、push イベント、 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 は、返される Promise です。 showNotification() から。

通知タグは ID を使用して識別されます。同じ宛先に 2 つの push メッセージを送信し、間にわずかな遅延が発生し、通知が指定すると、ブラウザは最初の通知を表示し、それをプッシュメッセージを受信すると 2 回目の通知が行われます。

一度に複数の通知を表示するには、別のタグを使用します。タグがまったくありません通知の表示のより詳細な例については、この後の投稿します。ひとまず、操作を簡素化して、プッシュメッセージの送信が表示されます。

push メッセージの送信

push メッセージへのサブスクライブが完了し、Service Worker で FCM 経由でプッシュメッセージを送信します。

これは、FCM を使用するブラウザにのみ適用されます。

PushSubscription.endpoint 変数をサーバーに送信すると、エンドポイントが特殊です。URL の末尾にパラメータがあり、 registration_id である。

エンドポイントの例を次に示します。

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

FCM URL は次のとおりです。

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

registration_id は次のようになります。

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

これは、FCM を使用するブラウザに固有のものです。通常のブラウザでは、エンドポイントを取得するだけで標準的な方法でそのエンドポイントを呼び出し URL に関係なく機能します

つまり、お使いのサーバーでエンドポイントがが FCM 用で、登録されている場合は登録 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=<YOUR_API_KEY> の Authorization ヘッダー API を呼び出すときに設定する必要があります。ここで <YOUR_API_KEY> は、 Firebase プロジェクトの API キー。
- API キーは、FCM が適切な送信者 ID を見つけるために使用します。ユーザーがプロジェクトに許可を与え、最後にそのプロジェクトの許可リストにサーバーの IP アドレスを登録します。
適切な Content-Type ヘッダー（application/json または application/x-www-form-urlencoded;charset=UTF-8（ただし、名前がデータを JSON またはフォームデータとして送信できます
registration_ids の配列 - これが登録 ID です。エンドポイントから抽出できます

ドキュメントを確認してくださいサーバーからプッシュメッセージを送信する方法は Service Worker を簡単に確認するには、 cURL ブラウザにプッシュメッセージを送信できます。

<YOUR_API_KEY> と <YOUR_REGISTRATION_ID> を入れ替えるを独自のものに置き換えて、ターミナルから実行します。

次のような通知が表示されます。

    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\"]}"

バックエンドロジックを開発する際は、Authorization ヘッダーと Cloud Storage API を POST 本文の形式は FCM エンドポイントに固有であるため、条件付きでヘッダーを追加し、POST 本文をフォーマットします。その他のブラウザ（将来的には Chrome）では、実装が必要になります。ウェブプッシュプロトコルを使用します。

Chrome に現在実装されている Push API の欠点は、プッシュメッセージでデータを送信できません。いや、なんでもない。その理由は、将来的な実装では、ペイロードデータを暗号化する必要が push メッセージングエンドポイントに送信されます。エンドポイントがどの push プロバイダであっても、 push メッセージです。これにより、低パフォーマンスのインフラストラクチャや HTTPS 証明書や中間者攻撃を検証するための push プロバイダを経由します。ただし、この暗号化にはまだ対応していないため、それまでの間、取得を実行して必要な情報を取得する必要があります。通知を入力します。

より詳細な push イベントの例

ここまで見てきた通知はごく基本的な内容で、サンプルを見る限り、実際のユースケースに対応することはできません

現実的には、ほとんどのユーザーはサーバーから情報を取得することを希望します。通知を表示する前に、これは、特定の内容を含む通知のタイトルとメッセージ、さらに一歩進めた内容キャッシュを使用してユーザーが通知をクリックしたときにブラウザを開くとすぐに、その時間は利用できません。

次のコードでは、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() が Promise を受け取ることを強調する価値があります。これにより、showNotification() によって Promise が返されます。非同期の fetch() 呼び出しが完了するまでイベントリスナーが終了しないこと通知が表示されます。

エラーが発生している場合でも通知が表示されます。これは、設定しないと Chrome ではその汎用的な通知が表示されるからです

ユーザーが通知をクリックしたときに URL を開く

ユーザーが通知をクリックすると、notificationclick イベントがディスパッチされます。必要があります。ハンドラ内では、イベントハンドラ内でたとえば、タブをフォーカスしたり、特定の URL のウィンドウを開いたりする場合などです。

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 のレスポンス本文を解析し、 FCM ドキュメントで説明されているように、error:NotRegistered と canonical_id の結果。

また、Service Worker とご利用のサービスの間でサブスクリプションが同期されないこともあります。あります。たとえば、サブスクライブとサブスクライブ解除が成功すると、ネットワーク接続が原因でサーバーを更新できないことがあります。ユーザーが通知権限を取り消します。これにより、自動登録解除がトリガーされます。ハンドル結果をチェックして定期的にserviceWorkerRegistration.pushManager.getSubscription()（例: サーバーと同期します。また、サブスクリプションを解約した場合は自動的に再登録され、 Notification.permission == 'granted'.

sendSubscriptionToServer() での処理方法を検討する必要があります endpoint の更新時に失敗したネットワークリクエスト。その解決策の一つは、 Cookie 内の endpoint の状態をトラッキングするサーバーに最新の情報が必要かどうかを判断します。

以上のすべてのステップにより、ウェブ版 Chrome 46 でリリースしました。仕様に沿った機能によって作業が簡単になる（push メッセージをトリガーする標準 API など）ですが、今回のリリースでは、ウェブアプリへのプッシュメッセージングの構築を今すぐ始めましょう。

ウェブアプリのデバッグ方法

プッシュメッセージの実装中、バグは 2 つの場所のどちらかに現れます。設定されます

このページのバグは DevTools。Service Worker をデバッグする次の 2 つのオプションがあります。

chrome://inspect > にアクセスします。Service Worker。このビューでは多くの情報が収集されます。
chrome://serviceworker-internals に移動すると、この Service Worker の状態を確認し、エラーがある場合はそれを確認します。このページは DevTools に同様の機能セットが追加されるまで、一時的な回避策です。

Service Worker を初めて利用する方々には、 [DevTools ウィンドウを開いて JavaScript の実行を一時停止する] チェックボックスを使用する Service Worker の起動時に行われます。このチェックボックスをオンにすると 実行を一時停止します。これにより、 Service Worker スクリプトを再開またはステップ実行して、学習します

serviceworker-internals の [実行の一時停止] チェックボックスがある場所を示すスクリーンショット

FCM と Service Worker の push イベントの間に問題がある場合は、この場合、問題をデバッグする方法はあまりありません。 Chrome が何かを受信したかどうかを確認できます。重要なのはサーバーが API 呼び出しを行うと、FCM からのレスポンスが成功するかどうかです。画面の表示形式はたとえば次のようになります。

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

"success": 1 レスポンスに注目してください。失敗と表示される場合は FCM 登録 ID と push の内容に問題があることを示唆しています。メールが Chrome に送信されません。

Chrome for Android での Service Worker のデバッグ

現時点では、Chrome for Android での Service Worker のデバッグは明らかではありません。 chrome://inspect でデバイスを見つけ、「Worker pid:....」という名前のリストアイテムこれにはサービスの URL が含まれますできます。

Chrome の検査で Service Worker が表示される場所を示すスクリーンショット

プッシュ通知の UX

Chrome チームはベストプラクティスのドキュメントを作成プッシュ通知の UX に関する推奨事項と、いくつかご紹介します

Chrome とオープンウェブでのプッシュメッセージの未来

このセクションでは、Chrome と Google Cloud のこの実装で知っておくべき特定の部分と、他のブラウザの実装とは異なります。

ウェブプッシュプロトコルとエンドポイント

Push API 標準の利点は、 endpoint にあると、それらをサーバーに渡して push を送信します Web Push Protocol を実装して、メッセージを暗号化できます。

ウェブプッシュプロトコルは、プッシュプロバイダが実装できる新しい規格です。 push プロバイダが誰であるかをデベロッパーが気にする必要はありません。「これにより、API キーの登録や特別なキーの送信が不要になります。データを変換できます

Chrome は Push API を実装した最初のブラウザであり、FCM はそうではないウェブプッシュプロトコルをサポートしているため、Chrome では gcm_sender_id であり、FCM には RESTful API を使用する必要があります。

Chrome の最終目標は、Chrome と FCM でウェブプッシュプロトコルを使用することです。

それまでは、エンドポイントの "https://fcm.googleapis.com/fcm/send" 他のエンドポイントとは別に処理する必要があります。つまり、ペイロードデータを認証キーを追加します。

ウェブプッシュプロトコルの実装方法

Firefox Nightly は現在プッシュで動作しており、最初のブラウザになる可能性が高いウェブプッシュプロトコルを実装する必要があります。

よくある質問

仕様はどこで確認できますか？

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

ウェブプレゼンスに複数のオリジンがある場合や、ウェブプレゼンスとネイティブプレゼンスの両方がある場合、通知の重複を防ぐことはできますか？

現時点ではこの問題の解決方法はありませんが、Chromium で進捗状況を確認できます。

ユーザーのデバイス用になんらかの ID を用意し、ネイティブアプリとウェブアプリのサブスクリプション ID を照合し、 push メッセージの送信先を決定します。画面サイズ生成された鍵をウェブアプリとネイティブアプリ間で共有しますが、それぞれに長所と短所があります

gcm_sender_id が必要な理由

これは、Chrome、Android 版 Opera、Samsung ブラウザが Firebase Cloud Messaging（FCM）API を使用する。目標は、kubectl のウェブプッシュプロトコルが標準が確定した時点で、FCM でサポートできるようになります。

Web Sockets や Server-Sent Events（EventSource）を使用しない理由

プッシュメッセージを使用する利点は、ページが閉じている場合でも、 Service Worker が起動し、通知を表示できるようになります。Web Socket ページまたはブラウザを閉じたときに、EventSource の接続が閉じられます。

バックグラウンドイベントの配信が不要な場合はどうすればよいですか？

バックグラウンドでの配信が不要な場合は、Web Sockets が適しています。

通知を表示せずにプッシュ機能（サイレントバックグラウンドプッシュなど）を使用できるのはどのような場合ですか？

利用可能になる時期はまだ決まっていませんが、バックグラウンド同期を実装する決定や仕様は決まっていませんが、バックグラウンド同期によるサイレントプッシュ

HTTPS が必要な理由開発中にこれを回避するにはどうすればよいですか？

Service Worker には、その Service Worker スクリプトが意図したオリジンであり、中間者によるものではない軽減されます。現時点では、ライブサイトで HTTPS を使用することになりますが、localhost は作業に集中できます。

ブラウザサポートの状況

Chrome は安定版でサポートしており、Mozilla は Firefox Nightly で push に取り組んでいます。詳しくは、Push API の実装のバグをご覧ください。また、通知の実装はこちらで確認できます。

一定期間が経過した通知を削除できますか？

現時点ではできませんが、今後サポートを追加していく予定です。現在表示されている通知のリストです。目標を設定するユースケースがある場合は、作成後の通知の有効期限についても詳しくご説明いたします。ご意見がございましたら、Chrome チームに報告いたします。

ユーザーへのプッシュ通知の送信を停止するだけでよい場合通知の保持期間は関係なく、表示する場合は、FCM の有効期間（ttl）パラメータを使用できます。詳細

Chrome のプッシュメッセージ機能にはどのような制限がありますか？

この投稿では、いくつかの制限事項について概説しています。

Chrome で CCM をプッシュサービスとして使用すると、提供します。これらの課題の一部を取り除き、実現します。
プッシュメッセージを受信したときに通知を表示する必要があります。
パソコンの Chrome では、Chrome が実行されていない場合はメッセージを受け取りません。これは、プッシュメッセージを使用する ChromeOS や Android とは異なります。常に受信されます。

Permissions API を使用する必要はないでしょうか？

「 Permission API が Chrome に実装されている。ただし、すべてのブラウザで利用できるとは限りません。詳しくはこちらをご覧ください。

通知をクリックしても前のタブが開かないのはなぜですか？

この問題は、現在サービスによって制御されていないページにのみ影響しますできます。詳しくはこちらをご覧ください。

ユーザーのデバイスがプッシュを受信した時点で通知が古くなっている場合はどうなりますか？

プッシュメッセージを受信したときには、必ず通知を表示する必要があります。通知を送信したいが、単に有用な通知だけを「time_to_live」を使用すると、パラメータ（CCM）有効期限を過ぎても FCM はプッシュメッセージを送信しないようにします。

詳しくはこちらをご覧ください。

10 件のプッシュメッセージを送信したが、デバイスには 1 件だけ送信したい場合はどうなりますか？

FCM には「fold_key」があるパラメータを使用して、保留中のメッセージを置き換えるよう FCM に指示できます。新しいメッセージで返されます。