Vue PWAでのプッシュ通知
Push API、Notification API、VAPIDキー、ユーザーの購読、サーバーからの送信
「Vue PWAでのプッシュ通知」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
PWAのプッシュ通知
Web Pushを使うと、アプリが閉じている場合でもサーバーからユーザーに通知を送信できます。これはNotification API、Push API、サービスワーカーを組み合わせた仕組みで、すべてユーザーから明示的に許可を得たうえで動作します。
許可を要求する
購読する前に、許可を求める必要があります。Notification.requestPermission()は、"granted"、"denied"、または"default"に解決されるPromiseを返します。
const permission = await Notification.requestPermission();
if (permission === "granted") {
// proceed to subscribe
}ユーザー操作をきっかけに実行する
ブラウザーでは、許可ダイアログをボタンのクリックなどのユーザー操作に続けて表示する必要があります。ページの読み込み時に要求しないでください。無視されたり、ユーザーを煩わせたりします。
<button @click="enableNotifications">
Enable notifications
</button>サービスワーカーの登録を取得する
プッシュ購読は、アクティブなサービスワーカーの登録に紐付いています。navigator.serviceWorker.readyを待機して取得してください。
const registration = await navigator.serviceWorker.ready;applicationServerKey
PushではVAPIDキーを使用します。サーバーは秘密鍵を保持し、クライアントは公開鍵をUint8Arrayに変換して購読します。
function urlBase64ToUint8Array(base64) {
const padding = "=".repeat((4 - base64.length % 4) % 4);
const raw = atob((base64 + padding).replace(/-/g, "+").replace(/_/g, "/"));
return Uint8Array.from([...raw].map((c) => c.charCodeAt(0)));
}pushManager.subscribe
登録のpushManagerを使って購読します。userVisibleOnly: trueを設定し、変換したapplicationServerKeyを渡してください。
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});userVisibleOnlyが必要な理由
userVisibleOnly: trueを指定すると、すべてのプッシュで表示可能な通知を出すことが保証されます。ブラウザーがこれを要求するのは、バックグラウンドでの無通知の追跡を防ぐためです。
購読情報をサーバーに送信する
購読オブジェクトには、サーバーが必要とするエンドポイントとキーが含まれています。後で送信に使えるよう、これをバックエンドにPOSTして保存してください。
await fetch("/api/subscribe", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(subscription)
});サーバーからプッシュを送信する
バックエンドでは、Web PushライブラリとVAPID秘密鍵を使って、保存済みのエンドポイントにペイロードをプッシュします。
// Node backend (web-push library)
webpush.sendNotification(
subscription,
JSON.stringify({ title: "Hello", body: "New message" })
);サービスワーカーでプッシュを受信する
サービスワーカーでpushイベントを処理し、showNotificationを呼び出して表示します。
// service worker
self.addEventListener("push", (event) => {
const data = event.data.json();
event.waitUntil(
self.registration.showNotification(data.title, {
body: data.body,
icon: "/pwa-192.png"
})
);
});通知クリックを処理する
notificationclickイベントでクリックに応答し、適切なページでアプリにフォーカスを移すか、アプリを開きます。
self.addEventListener("notificationclick", (event) => {
event.notification.close();
event.waitUntil(clients.openWindow("/inbox"));
});確認テスト
プッシュを購読するとき、なぜuserVisibleOnly: trueが必要なのですか？
まとめ
Web Pushでは、まずユーザー操作からNotification.requestPermission()を実行し、次にuserVisibleOnly: trueとapplicationServerKeyを指定してregistration.pushManager.subscribeを呼び出します。購読情報をサーバーに送信すると、サーバーはペイロードをプッシュします。サービスワーカーはそのペイロードをpushイベントで受信し、showNotificationで表示します。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 42
- レッスン
- 156
よくある質問
「Vue PWAでのプッシュ通知」レッスンは無料ですか？
はい。「Vue PWAでのプッシュ通知」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「Vue PWAでのプッシュ通知」で何を学びますか？
Push API、Notification API、VAPIDキー、ユーザーの購読、サーバーからの送信 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Vue PWAでのプッシュ通知」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- vite-plugin-pwaの設定
- Service Workerの戦略
- オフライン対応とバックグラウンド同期
- Vue PWAでのプッシュ通知