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

push イベント

Matt Gaunt

ここまで、ユーザーのサブスクライブとプッシュメッセージの送信について説明しました。次のステップでは、このプッシュメッセージをユーザーのデバイスで受信し、通知を表示します（ほかの行います。

push イベント

メッセージを受信すると、Service Worker で push イベントがディスパッチされます。

push イベントリスナーを設定するコードは、他のイベントとほぼ同じです。 JavaScript で記述するリスナーに次の値を追加します。

self.addEventListener('push', function(event) {
    if (event.data) {
    console.log('This push event has data: ', event.data.text());
    } else {
    console.log('This push event has no data.');
    }
});

Service Worker を初めて利用するほとんどのデベロッパーにとって、このコードで最も厄介な部分は self です。変数です。self は、Service Worker であるウェブワーカーでよく使用されます。self とはグローバルスコープ（ウェブページの window など）一方ウェブワーカーや Service Worker の場合は self はワーカー自体を指します。

上記の例では、self.addEventListener() はイベントリスナーを呼び出すことができます。

push イベントの例では、データがあるかどうかを確認し、コンソールに出力します。

push イベントからのデータを解析する方法は他にもあります。

// Returns string
event.data.text()

// Parses data as JSON string and returns an Object
event.data.json()

// Returns blob of data
event.data.blob()

// Returns an arrayBuffer
event.data.arrayBuffer()

ほとんどのユーザーは、アプリケーションに期待するものに応じて json() または text() を使用します。

この例では、push イベントリスナーを追加する方法とデータにアクセスする方法を示しますが、 2 つの重要な機能が欠けています通知は表示されず、 event.waitUntil() を使用していない。

待機時間

Service Worker について理解しておきたいことの一つは、 Service Worker コードが実行されます。スリープ解除のタイミングと復帰のタイミングはブラウザが決定終了させますブラウザに対して「大事な作業で忙しくしていて event.waitUntil() メソッドに Promise を渡すことです。これにより、ブラウザは渡された Promise が完了するまで、Service Worker を実行し続けます。

プッシュイベントでは、通知を表示する前に追加の要件があり、提示した Promise が決済されたことを確認します。

通知を表示する基本的な例を次に示します。

self.addEventListener('push', function(event) {
    const promiseChain = self.registration.showNotification('Hello, World.');

    event.waitUntil(promiseChain);
});

self.registration.showNotification() の呼び出しは、そして Promise を返します。この Promise は、通知が表示された時点で解決されます。

この例をできるだけわかりやすくするために、この Promise を promiseChain という変数を使用します。その後、これは event.waitUntil() に渡されます。これが、非常に詳細ですが、結果的にさまざまな問題が waitUntil() に渡すべき内容や、Promise が守られなかった場合に渡す内容の誤解チェーン化します

データのネットワークリクエストと、次のようになります。

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        return self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

ここでは、Promise pushReceivedTracking() を返す関数を呼び出しています。この例では、ネットワークリクエストを分析プロバイダに提出しますまた、ネットワークリクエストを行い、タイトルとレスポンスデータを使用して通知を表示します。表示されます。

両方のタスクが実行されている間も Service Worker を存続させることができます。 Promise.all() との Promise を返します。結果の Promise が event.waitUntil() に渡されます。つまり、ブラウザは両方の Promise が完了するまで待ってから、通知を確認する Service Worker を終了します。

waitUntil() について考慮すべき理由とその使用方法は、デベロッパーが直面する一般的な問題は Promise チェーンが正しくないか破損していると、この「デフォルト」を表示通知:

Chrome には「このサイトはバックグラウンドで更新されています」のみが表示されます。この通知は、 push メッセージを受信しても、Service Worker の push イベントに event.waitUntil() に渡された Promise が終了した後の通知。

デベロッパーがこれにとらわれる主な理由として、 self.registration.showNotification() を頻繁に呼び出すが、呼び出しは行っていない 返す Promise を持つものをすべて返します。これにより、デフォルトの通知が断続的に表示されます。たとえば、商品の返品を self.registration.showNotification() と指定すると、この問題が発生するリスクがあります。通知を受け取ります。

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

見逃してしまいがちです。

この通知が表示された場合は、Promise チェーンと event.waitUntil() を確認してください。

次のセクションでは、通知のスタイル設定と表示できるコンテンツです

push イベント

push イベント

待機時間

次のステップ

Codelab