プッシュ通知
許可をリクエストし、Push APIでプッシュ通知を購読して、Service Workerでメッセージを受信し、showNotificationで通知を表示します。
「プッシュ通知」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
プッシュ通知が必要な理由
プッシュ通知を使うと、アプリが開いていないときにもユーザーを再訪させられます。メッセージ通知、ニュース更新、放棄されたカートのリマインダーなどに使えます。Service Workerによって動作するため、ページを閉じていても機能します。
Push APIとNotifications API
2つのブラウザーAPIが連携して動作します。Push APIは、push subscriptionを通じてサーバーからメッセージを受信します。Notifications APIは、メッセージをユーザーに表示します。
権限の要求
購読する前にユーザーへ権限を求めます。ページの読み込み時ではなく、明確なユーザー操作（ボタンのクリック）に応じてのみ要求してください。
async function enableNotifications() {
const permission = await Notification.requestPermission();
if (permission !== 'granted') {
alert('Notifications denied');
return;
}
// proceed to subscribe...
}プッシュ購読
アクティブなservice workerの登録を通じて購読します。サーバーのVAPID公開鍵で購読を認証します。
async function subscribeToPush() {
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.subscribe({
userVisibleOnly: true, // required: every push must show a notification
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});
// Send sub to your server:
await fetch('/api/save-subscription', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(sub)
});
}VAPIDキー
VAPID（Voluntary Application Server Identification）キーは、プッシュサービス（FCM、Mozillaなど）に対してサーバーを識別します。一度生成し、秘密鍵をサーバー上に保存してください。
# Generate VAPID keys with web-push CLI:
npx web-push generate-vapid-keys
# Output:
# Public Key: BJ...
# Private Key: ka...サーバー側からのプッシュ
web-push npmライブラリを使って、保存済みの購読先にプッシュを送信します。
import webpush from 'web-push';
webpush.setVapidDetails(
'mailto:you@example.com',
process.env.VAPID_PUBLIC,
process.env.VAPID_PRIVATE
);
await webpush.sendNotification(savedSubscription, JSON.stringify({
title: 'New message',
body: 'Alice sent you a message',
url: '/inbox/123'
}));Service Workerでのプッシュ処理
SWがpushイベントを受け取り、通知を表示します。
// sw.js
self.addEventListener('push', (event) => {
const data = event.data ? event.data.json() : {};
event.waitUntil(
self.registration.showNotification(data.title || 'Notification', {
body: data.body,
icon: '/icons/192.png',
badge: '/icons/badge.png',
data: { url: data.url }
})
);
});通知クリックハンドラー
ユーザーが通知をクリックしたときに、アプリを開くかフォーカスします。
self.addEventListener('notificationclick', (event) => {
event.notification.close();
const url = event.notification.data.url || '/';
event.waitUntil(
clients.matchAll({ type: 'window' }).then(clientList => {
for (const client of clientList) {
if (client.url.endsWith(url) && 'focus' in client) return client.focus();
}
return clients.openWindow(url);
})
);
});通知オプション
次の項目をカスタマイズできます。icon、badge（小さな通知領域アイコン）、image（大きな画像）、actions（ボタン）、tag（同じtagを持つ古い通知を置き換える）、requireInteraction（閉じるまで表示し続ける）、silent。
self.registration.showNotification('Message', {
body: 'Alice sent you a photo',
icon: '/icons/192.png',
image: '/images/alice-photo.jpg',
actions: [
{ action: 'view', title: 'View' },
{ action: 'reply', title: 'Reply' }
],
tag: 'message-from-alice', // replaces earlier 'message-from-alice'
requireInteraction: false
});購読解除
ユーザーがオプトアウトできるようにします。pushSubscription.unsubscribe()を呼び出し、サーバーから購読を削除してください。
async function disablePush() {
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.getSubscription();
if (sub) {
await sub.unsubscribe();
await fetch('/api/delete-subscription', {
method: 'POST',
body: JSON.stringify({ endpoint: sub.endpoint })
});
}
}iOSのサポート
iOS 16.4以降はWeb Pushをサポートしていますが、ホーム画面にインストールしたPWAに限られます。iOS 16.4未満のデバイスと、iPhoneのSafariでWebページを開いた場合は、Web Pushをまったくサポートしていません。
ベストプラクティス
1) 明確なユーザー操作の後にのみ権限を求めます。2) 意味のある通知を、頻繁になりすぎないように送信します。3) pushイベントでは必ず通知を表示します（表示しないとブラウザーが権限を取り消す場合があります）。4) 簡単に購読解除できるようにします。5) 3つのプッシュサービス（FCM、Mozilla、WindowsPush）すべてでテストします。
よくある落とし穴
次の場合、プッシュは通知なしに失敗します。userVisibleOnlyがfalse（Chromeではtrueが必要）、VAPIDキーの不一致、購読の期限切れ（再購読が必要）、pushイベントで通知を表示していない（ブラウザーが購読を取り消します）。
クイックチェック
すべてのプッシュメッセージで、userVisibleOnly: trueを指定した表示可能な通知を生成する必要があるのはなぜですか？
まとめ: プッシュ通知
権限はユーザー操作を通じてのみ要求します。VAPID公開鍵を指定したreg.pushManager.subscribeで購読します。サーバーではweb-pushライブラリを使って送信します。SWのpushイベントでshowNotificationを呼び出します。notificationclickでアプリを開くかフォーカスします。icon、badge、image、actions、tagをカスタマイズします。必ず通知を表示します（userVisibleOnly: trueが必要です）。iOS 16.4以降でサポートされていますが、PWAとしてインストールした場合に限られます。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 41
- レッスン
- 163
よくある質問
「プッシュ通知」レッスンは無料ですか？
はい。「プッシュ通知」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「プッシュ通知」で何を学びますか？
許可をリクエストし、Push APIでプッシュ通知を購読して、Service Workerでメッセージを受信し、showNotificationで通知を表示します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「プッシュ通知」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。