WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Meet Web Push for Safari

Meet Web Push for Safari

WWDC 2022Safari & WebWeb Push
元の動画を見る

ハイライト

Safari 16 では、プッシュ API、通知 API、Service Worker、および VAPID に基づく標準 Web プッシュが macOS Ventura の Web サイトと Web アプリに追加されます。標準に従って実装されたサイトには、Safari プライベート API や Apple 開発者アカウントは必要ありません。

主要内容

Web サイトの通知には長い間実際的な問題がありました。それは、ユーザーが必ずしもページを開くとは限らないということです。ブログ、メッセージ、タスクのリマインダー、内部ツールの更新はすべて、ページが閉じられた後にユーザーに通知することを目的としています。

Safariには以前はSafariプッシュ通知がありました。これからも機能し続けます。ただし、macOS Ventura の Safari 16 以降、Safari は標準の Web プッシュ (00:43) をサポートします。Apple は、他のブラウザでも使用されている標準の組み合わせであるプッシュ API、通知 API、Service Worker を使用していることを明らかにしています (01:08)。

これは直接的な結果をもたらします。サイトが Web 標準に従って Web Push を実装している場合、Safari 用のプライベート ブランチを作成する必要はありません (01:16)。本当に確認したいことは 2 つあります。まず、Safari を除外するためにブラウザー スニッフィングを使用せず、機能検出を使用します。次に、サーバーがプッシュされたエンドポイントを厳密に検証する場合、それを許可する必要があります。push.apple.com任意のサブドメイン名 (01:48)。

このセッションのサンプル アプリは、Browser Pets と呼ばれます。ページの読み込みを高速化し、複数のタブ間で同期するための Service Worker がすでに組み込まれています。Web プッシュが行う必要があるのは、これに基づいて 3 つのリンクを追加することです。Service Worker の登録または再利用、ユーザーがボタンをクリックした後のプッシュのサブスクライブ、および Service Worker での処理です。pushそしてnotificationclickイベント。

詳細

最初に Service Worker をインストールします

(08:27) Web プッシュは Service Worker に依存します。Service Worker は、現在のタブとは独立して実行され、ドメイン全体に代わって動作する JavaScript です。Safari がサーバー プッシュを受信すると、起動して送信します。pushイベント。

// BrowserPetsWorker.js

function handleMessageEvent(event) {
    // ...
};
self.addEventListener('message', (event) => {
    handleMessageEvent(event);
});

function primeCaches() {
    // ...
};
self.addEventListener('install', (event) => {
    primeCaches();
});

self.addEventListener('fetch', (event) => {
    event.respondWith(caches.match(event.request));
});

キーポイント:

  • self.addEventListener('message', ...): Service Worker は、ページまたは他のコンテキストによって送信されたメッセージを受信できます。
  • self.addEventListener('install', ...): インストールフェーズは、キャッシュなどの基本的な状態を準備するのに適しています。
  • primeCaches(): この例では、キャッシュを予熱するロジックを表すために使用されています。
  • self.addEventListener('fetch', ...): Service Worker がネットワーク リクエストをインターセプトします。
  • event.respondWith(caches.match(event.request)): この例では、現在のリクエストに対するレスポンスをキャッシュから検索します。

(08:42) ページ側はまず機能検出を使用して、ブラウザーが Service Worker をサポートしているかどうかを確認します。すでに登録されている場合は再利用します。登録されていない場合は、再度インストールしてください。BrowserPetsWorker.js。

// BrowserPetsMain.js

var registration;
if ('serviceWorker' in navigator) {
    let registration = await navigator.serviceWorker.getRegistration();
    if (!registration)
        registration = await navigator.serviceWorker.register('BrowserPetsWorker.js');
}

キーポイント:

  • 'serviceWorker' in navigator: 関数検出を使用して、現在のブラウザが Service Worker をサポートしているかどうかを判断します。
  • navigator.serviceWorker.getRegistration(): 現在のスコープに登録済みの Service Worker が存在するかどうかをクエリします。
  • if (!registration): 同じ作業者を繰り返し登録することは避けてください。
  • navigator.serviceWorker.register('BrowserPetsWorker.js'): ワーカー スクリプトをブラウザにインストールします。

購読はユーザーのジェスチャーから行う必要があります

(02:49) Safari では、ユーザーのアクティブなアクションがなければ、Web サイトがプッシュ権限をリクエストすることはできません。セッションのデモでは、ユーザーがベル ボタンをクリックした後、システム通知承認ポップアップ ウィンドウが表示されます。

(09:00) ボタン付きブラウザ ペットonclickサブスクリプション関数を呼び出します。マウスのクリックやキーボード操作はすべて、セッションで説明されたユーザー ジェスチャ要件を満たしています (04:32)。

// BrowserPetsMain.js

async function subscribeToPush() {
    // ...
}

// BrowserPetsMain.html

<button onclick="subscribeToPush()">Register for Updates</button>

キーポイント:

  • async function subscribeToPush(): サブスクリプション プロセスには、非同期のアクセス許可リクエストと PushSubscription の取得が含まれます。
  • <button ...>: ユーザーが見て理解できるインターフェイス コントロール上に入り口を配置します。
  • onclick="subscribeToPush()": 購読リクエストはクリック イベントによってトリガーされ、Safari の制限に従います。
  • Register for Updates: ボタンのコピーにより、次に更新通知が有効になることがユーザーに通知されます。

VAPID を使用して PushSubscription を構成する

(09:19) ユーザーがボタンをクリックすると、ページ側が呼び出します。pushManager.subscribe()。Safari は、標準の VAPID (Voluntary Application Server Identification) メカニズムを使用して、サーバーが Apple のプッシュ サーバーに対して自身を識別できるようにします (09:29)。

// BrowserPetsMain.js

async function subscribeToPush() {
    let serverPublicKey = VAPID_PUBLIC_KEY; 

    let subscriptionOptions = {
        userVisibleOnly: true,
        applicationServerKey: serverPublicKey
    };

    let subscription = await swRegistration.pushManager.subscribe(subscriptionOptions);

    sendSubcriptionToServer(subscription);
}

キーポイント:

  • VAPID_PUBLIC_KEY: サーバーの VAPID 公開キー。プッシュを送信するサーバーを識別するために使用されます。
  • userVisibleOnly: true: このページでは、プッシュするたびにユーザーに表示される通知が生成されることが約束されています。
  • applicationServerKey: serverPublicKey: VAPID 公開キーを Push API に渡します。
  • swRegistration.pushManager.subscribe(...): 現在の Service Worker 登録に基づいてプッシュ サブスクリプションを作成します。
  • subscription: サーバーがプッシュを送信するために必要なエンドポイントや暗号化キーなどの情報が含まれます。
  • sendSubcriptionToServer(subscription): サブスクリプション情報を自身のバックエンドに送信します。具体的な送信方法はサイトによって決定されます。

（10:21）subscribe()システム許可ポップアップ ウィンドウが表示されます。ユーザーが拒否する可能性があるため、ページ コードで失敗パスを処理する必要があります。ユーザーの許可後、戻りますPushSubscription正確なエンドポイント URL と、送信の暗号化に使用されるキーがあります (10:30)。

Service Worker はプッシュを受信した後に通知を表示する必要があります

(11:13) サーバーから送信されたプッシュが Safari に到達すると、Safari は Service Worker を起動して、pushイベント。Browser Pets のサーバー側は、通知に必要なすべてのフィールドを JSON ペイロードに配置し、ワーカーはそれを読み取って呼び出します。showNotification()。

// BrowserPetsWorker.js

self.addEventListener('push', (event) => {
    let pushMessageJSON = event.data.json();

    // Our server puts everything needed to show the notification
    // in our JSON data.
    event.waitUntil(self.registration.showNotification(pushMessageJSON.title, {
        body: pushMessageJSON.body,
        tag: pushMessageJSON.tag,
        actions: [{
            action: pushMessageJSON.actionURL,
            title: pushMessageJSON.actionTitle,
        }]
    }));
}

キーポイント:

  • self.addEventListener('push', ...): Service Worker はブラウザからのプッシュ イベントをリッスンします。
  • event.data.json(): サーバーから送信された PushMessageData を JSON として読み取ります。
  • event.waitUntil(...): 非同期タスクがこのプッシュ イベント処理に属することをブラウザーに伝えます。
  • self.registration.showNotification(...): プラットフォームのネイティブ通知を表示します。
  • pushMessageJSON.title: 通知タイトルはサーバー ペイロードから取得されます。
  • bodyそしてtag：通知本文と通知IDをそれぞれ設定します。
  • actions: 通知のアクション項目を設定します。ここにサーバーから指定された URL を入力します。action。

ここには重要な境界線があります。Session は、プッシュ イベントの処理によって JavaScript のサイレント バックグラウンド実行時間が得られるわけではないと繰り返し強調しています (13:39)。Safari はサイレント プッシュをサポートしていません。対処するpushイベントが発生した場合、通知は通知センターに投稿される必要があります (13:53)。macOS Ventura ベータ版では、3 つのプッシュ イベントに間に合うように通知が表示されない場合、サイトのプッシュ サブスクリプションは取り消されます (14:07)。

通知をクリックした後、対象のページを開きます

(12:06) 通知の表示は最初のステップにすぎません。ユーザーが通知をクリックすると、Safari はnotificationclickイベントは Service Worker に送信されます。Browser Pets の例では、通知アクションから URL を取得し、新しいウィンドウを開きます。

// BrowserPetsWorker.js

self.addEventListener('notificationclick', async function(event) {
    if (!event.action)
        return;

    // This always opens a new browser tab,
    // even if the URL happens to already be open in a tab.
    clients.openWindow(event.action);
});

キーポイント:

  • self.addEventListener('notificationclick', ...): ユーザーが通知をクリックした後のイベントをリッスンします。
  • if (!event.action) return;：アクションURLがない場合は処理を続行しません。
  • event.action：通知に設定されている操作値を取り出します。この例では、ターゲット URL として使用されます。
  • clients.openWindow(event.action): この URL を指す新しいブラウザ タブを開きます。
  • コメントの説明例: このコードは、同じ URL がすでに開いている場合でも、常に新しいタブを開きます。

サブスクリプションとイベント処理をデバッグする

(12:28) Web インスペクターは、ページ内のサブスクリプション コードをデバッグでき、Service Worker インスタンスを検査してイベント ハンドラーにブレークポイントを設定することもできます。これにより、2 つの重要なコード部分をカバーできます: ページ側の呼び出しpushManager.subscribe()ワーカー内のロジックと処理push、notificationclick論理。

プッシュ メッセージの公開時にエラーが発生すると、Apple プッシュ通知サーバーは人間が判読できるエラー (12:55) を返します。デバッグするときは、ページの JavaScript だけに注目せず、ブラウザ側とサーバー側の両方のエラーを確認してください。

重要ポイント

  • 対処方法: 列ごとに Web プッシュ サブスクリプションをコンテンツ ステーションに追加します。 実行する価値がある理由: セッションでは、Web アプリ内で詳細な通知制御を提供することを推奨しています。ユーザーは、ブログの更新や投稿の更新など、さまざまなタイプを選択できます (04:58)。 開始方法: まず Service Worker を登録し、次に「このコラムを購読する」ボタンをバインドします。pushManager.subscribe()、バンドルPushSubscription列 ID とともにバックエンドに渡されます。

  • やるべきこと: バックグラウンド タスクの完了リマインダーを内部運用ツールに追加します。 実行する価値がある理由: Web サイトに開いているタブがない場合でも、Service Worker はプッシュを受信できます。 macOS Ventura では、Safari が実行されていない場合でも処理できます (07:29)。 開始方法: タスクが完了すると、サーバーは保存されたエンドポイントにプッシュを送信し、ワーカーはpushイベントで使用されるshowNotification()タスク名と結果ページのリンクを表示します。

  • 何をすべきか: 既存の Chrome/Firefox Web プッシュ サイトに Safari サポートを追加します。 実行する価値がある理由: Safari は同じ Web 標準を使用しています。既存の標準実装では通常、Safari 固有のコードを変更する必要はありません (01:16)。 開始方法: ブラウザーのスニッフィングを削除し、代わりに使用します'serviceWorker' in navigator特徴が検出されるまで待ちます。サーバーエンドポイントの許可リストを解放するpush.apple.comサブドメイン名。

  • 対処方法: 通知のクリックを明確なディープリンク エントリに変換します。 実行する価値がある理由:notificationclickこのイベントにより、ワーカーは通知によって伝えられるデータに基づいて対応するページを開くことができます (07:43)。 開始方法: プッシュ JSON を入力しますactionURL、通知を表示するときに書き込まれますactions、クリック時に使用されますclients.openWindow(event.action)詳細ページを開きます。

関連セッション

  • Safari と WebKit の新機能 - Web プッシュ、ブロードキャスト チャネル、Origin プライベート ファイル システムなどの Web API アップデートを含む、Safari 16 の年次概要。
  • WKWebView の新機能 - Web コンテンツをアプリに埋め込む開発者向けに、WKWebView の全画面、ビューポート、検索、およびデバッグの更新について説明します。
  • Safari Web Extensions の新機能 - Safari Web Extensions のマニフェスト V3、API 更新、およびデバイス間同期。
  • Safari Web Inspector Extensions の作成 — Web Extensions API を使用して、カスタム デバッグ パネルを Safari Web Inspector に追加します。

コメント

GitHub Issues · utterances