Safari用のWebプッシュについて

Webプッシュを使って、macOS上のSafariでWebサイトやWeb Appに優れた通知機能を取り込みます。Push API、Notifications API、Service WorkersをWeb標準ベースで組み合わせて、通知をユーザにリモート送信する方法を紹介します。

リソース

関連ビデオ

WWDC23

Webアプリの新機能

WWDC22

SafariとWebKitの最新情報

ダウンロード

♪♪

こんにちは Brady Eidsonです WebKit Architecture チームのエンジニアです SafariのWebプッシュをご紹介します WebプッシュでウェブAppのユーザーにリモートで通知を送信できますここではwebkit.orgからの通知が画面の右上に表示されています通知のクリックで新規ブログ投稿が開きますこれがどう機能するかの詳細に入る前に多く寄せられた質問にお答えたいと思います

WebプッシュはVentura以降の Mac Safariでサポートされ来年にはiOSとiPadOSにも導入されます

Safariプッシュ通知は Mac Safari ユーザーにリーチするためのオプションに長い間なっていました引き続き機能しますが本日 Webプッシュのサポートが追加されたことをお知らせしますまさにWebプッシュなんです！他のブラウザに実装されているものと同じさまざまな標準の組み合わせですこれらの基準については後で説明しますが最も重要なポイントは AppをWeb標準に従いコーディングした場合 Safariで機能させるための変更は必要はありませんブラウザ検出で Safariを除外すると事前作業が必要になりますブラウザ検出機能から機能の検出へと切り替える絶好の機会ですそれがベストプラクティスですすべてのMacおよびiOSデバイスにネイティブのプッシュするのと同じ Apple Push Notification サービスを使用しますが Safariユーザーにリーチするための開発者アカウントは不要です Webプッシュに新しいエンドポイントURLがありますが Safariを意図せず除外している可能性もありますサーバ上のプッシュエンドポイントを厳密に管理する場合 push.apple.comのサブドメインを許可してくださいこうした質問への回答を以外にも詳しく見ていくことにしましょうまずSafariでのWebプッシュ体験をユーザーの観点から見てみましょう次に許可リクエストから通知センター上のエントリのクリックの処理まで Webプッシュのフロー全体について最後に既存のWeb Appへの Webプッシュ追加要件を確認しますまずSafariのユーザー体験についてこれをデモでカバーする最良の方法は macOS Venturaの Safariですブラウザタブで開いているのはwebkit.org WebKitオープンソースプロジェクトを最新の状態に保つのにWebプッシュは優れた方法と言えます webkit.orgではユーザーによるジェスチャーなしにプッシュの許可を要求することはありませんそこでこのベル型のボタンをクリックして通知を購読します表示されるのはシステムの通知プロンプトで他のAppと同じものです webkit.orgに代わって処理されます “許可”をクリックして準備完了です webkit.orgは投稿とソースコードへの新しいコミットに関する通知を提供していますコミットごとに通知を受けると作業の邪魔になりますがブログ投稿については通知を受けたいそこでボックスをチェック偶然にもWebKitブログ投稿が公開されたようですこの通知は他の通知と同様 webkit.orgに帰属しますクリックしてアクティブ化すると Safariで開いたブログが見られますユーザーがアクセスを許可するとそのアクセス許可の制御が維持され macOSユーザーとして通知設定の管理に慣れているので webkit.orgの通知をここで設定します他のAppやサービスと同じリッチな設定 Safariユーザーとしてサイト設定を管理することにも慣れていますそこでwebkit.orgの権限をオンまたはオフに Safariユーザー用のWeb プッシュの機能でした先に進む前にデモで取り上げた項目を復習しますユーザーの要求しないのに購読リクエストをしてスパムのようになるのは好ましくありませんそこでクリックまたはキーストロークに応答してのみプッシュをリクエストすることもできますサイトがユーザーに通知を表示する権限を取得するとユーザーはその権限を制御します Safari設定またはシステム設定での管理を選択できます両方で管理する場合設定は同期されます最後にさまざまなイベントの通知を提供する場合きめ細かく制御することがベストプラクティスで他のAppと同様にウェブApp内の通知を扱う方が良いでしょう Webプッシュの動作を確認したので各ステップを詳しく見ていきましょうこれに精通してる方もいると思います Webプッシュを初めて使用する方のために関連する標準とドキュメントを参照しながら段階的に説明しますユーザーがタブからサイトにアクセスすることから始まります Safariで開いている webkit.orgですタブなのでService Workerをインストールできます Service Workerは現在開いているタブとは別にドメイン全体で動作する JavaScriptのユニットです Service WorkerスクリプトがインストールされるとウェブAppはプッシュをリクエストできるようになります前述のとおりこのリクエストはユーザージェスチャ駆動であるべきですベル型のボタンをクリックして webkit.orgが許可を要求これでユーザージェスチャ駆動の要件を満たしますサイトがプッシュを要求するとユーザーにこの\ システムプロンプトが表示されますここでWebサイトに付加価値を付けるための最終決定を紐付けます

ユーザーがリクエストを拒否する可能性もあります JavaScriptはそれを処理できる必要がありますユーザーが権限を付与した場合 PushSubscription オブジェクトを取得これにはサーバがブラウザでプッシュを送信するための全てが含まれます使用する正確なURL エンドポイントなどの情報ですこのペイロードはAppに最適な方法でサーバにコマンドを返信します多くのサーバパッケージには適切なサポートがあり独自ロールも可能です同じことがサーバのプッシュメッセージを送信する方法とタイミングにも関係しますタイミングはWebサイト次第ですプッシュの送信が決定したら次の処理を準備できます Service Workerはインストールされてますね？サーバがプッシュを送信し Safariが受信すると Service Workerを起動し JavaScript プッシュイベントを送信します通知センターでユーザーに通知を表示することはプッシュイベントの要件となっていますプッシュイベント通知を表示するのはサイトがブラウザタブで開かれている場合ですタブで開いていない場合にも発生します Ventura上のSafariの場合 Safariが実行中でなくても発生します最後のステップはユーザーが通知をクリックした場合イベントがService Workerに送信され適切に対応できるよう処理し通知に関連したURLに新しいウィンドウを開くなどの例があります Webプッシュの流れが理解できたので詳細を見てみることにしますが既存のWeb Appに Webプッシュサポートを追加し確認します webkit.orgに加えて Browser Petsは SafariとWebKitチームにとって最も重要な内部ツールです部内全員のお気に入りの子猫や子犬を管理しておくことは Webプッシュによりこれまでになく簡単になりました内部のBrowserPets ドメインにはページの高速化や複数タブ間の同期のための Service Workerスクリプトがあります ServiceWorkerスクリプトは次のようになりますエンジニアがペットページにアクセスすると JavaScriptの抜粋により ServiceWorkerスクリプトが登録済みか登録が必要かを判断しますここではベストプラクティスとして前述した機能検出を実践していることに着目してください前提条件が満たされたらプッシュを購読する準備が完了します明示的なジェスチャなしにプッシュを要求できないことはお忘れなくボタンのハンドラに応答してこのスクリプトを実行することはその要件を満たす方法の１つですユーザーがボタンをクリックした時にプッシュを要求するコードがこちらですこれらの各ポイントについて説明しますまずプッシュリクエストを構成する必要があります重要な点はサーバが Appleのプッシュサーバに対して識別するための公開鍵ですここでは他のブラウザと同様VAPID技術を利用しますここではVAPIDの詳細については説明しませんがサーバのセットアップに役立つリソースやソリューションがWeb上に多くあります VAPIDキーを設定して購読リクエストを構成できますプッシュをユーザーに対し常に表示するよう設定するようにしてください JavaScript Push API の標準ではオプションではサイレントランタイムに対応しますがほとんどのブラウザではサポートされていません Safariでもサポートしていませんほとんどのサイト同様 BrowserPetsでも不要です次にプッシュの許可リクエストについてこのJavaScriptによりユーザーが承認または拒否するためのプロンプトが表示されますユーザーが許可を与えた場合すべてのSafariチームメンバーがペットに対してブラウザでユーザーにアクセスする方法の詳細を含むオブジェクトが提供されます URLエンドポイントや転送用メッセージの暗号化に使用されるキーなどがそれです最後にすべての詳細をサーバに送信します前述のようにこれの詳細は Appによって詳細が異なります BrowserPets サーバは WordPressを使用しており Webプッシュプラグインがすでにあります同じことがバックエンドにも当てはまる可能性が高くほぼすべてのセットアップで適切なソリューションを Web上で見つけられます次にService Workerの JavaScriptコードに戻ります pushなどの新規イベントを処理しますプッシュメッセージがブラウザに送信されると ServiceWorkerにプッシュイベントが送信そのイベントにはサーバから送信されたデータにアクセスするオブジェクトが含まれますここではJSONアクセッサを使用しますプッシュを購読したときには JavaScriptは常にユーザーに表示されますよねつまりプッシュごとに常にプラットフォームネイティブ通知を表示する必要があるわけですこれはプッシュイベントハンドラで迅速に処理 URLによるアクションの設定など通知を構成するために必要なものを JSONBLOBから取得この後それは利用可能になります通知が表示されたらユーザー通知をクリックスクリプトが処理するもう１つのイベントですこのハンドラでは BrowserPetsはクリックされた通知から URLを取得しますこれはただし一般的なパターンです Webプッシュサポートに必要な JavaScriptはこれのみ開発中にヘルプを得るのが最善ですがそこでWebインスペクタの出番ですブラウザタブで開いているサイトのデバッグに加え Webインスペクタはインスタンスを検査しイベントハンドラにブレークポイントを設定これらすべてを組み合わせてプッシュを購読する JavaScriptとコードをデバッグしてプッシュイベントと通知イベントを処理しますさらにApple Push Notification サーバは問題発生時にプッシュメッセージを人間が読める形式のエラーとして表示します詳細はこのセッション関連リンクをご確認くださいコードを書いているときに気付いたポイントですがユーザーのプライバシーと電力使用量について詳しく説明したいと思いますここで改めて言うまでもなく重要なことがありますプッシュの購読にはユーザージェスチャが必要です他の特権機能と同様にそれはユーザーが Webプッシュを有効にするよう要求する点において適切なことですプッシュサブスクリプションを要求する方法のコードを同様プッシュがユーザーに表示される必要がありますプッシュイベントの処理は JavaScriptがサイレントランタイムを取得するためではありませんこれはユーザーの信頼とバッテリー寿命に反しますプッシュイベントを処理するときは通知センターに通知する必要があります他のブラウザはプッシュユーザーの表示という対策がありますがそれはSafariも同様です Venturaのベータビルドではタイムリーに通知できない３つのプッシュイベントの後サイトのプッシュは取り消されます許可ワークフローを再度実行する必要があります以上です開発者アカウントなしで使えるWebプッシュのサポートを心から誇りに思っています標準コーディングや機能検出を使用している限り Safari16でのWebプッシュの利点は無意識のうちに Safariを除外しない限り享受できます今年もSafariとWebKit以外にもたくさんの新機能を追加詳細についてはセッションをチェックしてくださいご清聴ありがとうございました残りのセッションもお楽しみください

8:27 - BrowserPetsWorker.js

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

8:42 - BrowserPetsMain.js

// BrowserPetsMain.js

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

9:00 - BrowserPetsMain.js subscribeToPush()

// BrowserPetsMain.js

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

// BrowserPetsMain.html

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

9:19 - BrowserPetsMain.js subscribe

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

9:36 - BrowserPetsMain.js subscriptionOptions

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

10:21 - BrowserPetsMain.js request permission to push

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

11:13 - BrowserPetsWorker.js push

// 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,
        }]
    }));
}

12:06 - BrowserPetsWorker.js notification click

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

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。