Web Push

ウェブプッシュ

Web Push を分かりやすく

Web Push は、あなたが外出先でスマートフォンをポケットに入れているときに、新しいメッセージやメールの通知を受け取るのと同じ感じですよね。でも、これはウェブアプリケーション版です。ウェブサイトを閉じても、ブラウザが起動していれば、更新情報や重要なお知らせなどを受け取ることができます。

Web Push の歴史的変遷

Web Push 通知の歴史は、ウェブがインタラクティブな体験を提供するための新たな手段を模索する中で生まれました。2015 年に Google が Chrome ブラウザに Web Push API を導入し、それ以降、他の主要なブラウザも追随しました。しかしながら、iOS の Safari ブラウザは現在でも Web Push API をサポートしていません。

Web Push と Jamstack の関係

Web Push 通知は、Jamstack アーキテクチャの一部として非常に重要な役割を果たします。Jamstack は静的なウェブサイト生成を重視していますが、Web Push 通知は動的な要素を提供します。これにより、ユーザーがウェブサイトにアクセスしていない時でも、リアルタイムの更新情報を提供できるのです。

Web Push を使うメリット

ユーザーエンゲージメントの向上

ユーザーがサイトを訪れていない状態でも、ブラウザが起動していれば通知を送ることができます。これにより、ユーザーのエンゲージメントを向上させることが可能です。

リアルタイムの情報提供

即時性が求められる情報をリアルタイムに提供できます。ニュースサイトや天気予報など、最新情報を速やかに伝えることが求められる場合に非常に有用です。

パーソナライズされた通知

Web Push を利用すると、ユーザーご

とにカスタマイズした通知を送ることができます。これにより、ユーザーの関心に合わせた情報を提供することが可能となります。

Web Push を実装

Next.js と TypeScript を使って、Web Push 通知の購読処理を作る方法を見てみましょう。

まずは通知を受け取る側のクライアントコードを実装します。

import { useEffect } from 'react'

type Props = {
  title: string
}

const SubscribeButton = ({ title }: Props) => {
  useEffect(() => {
    if (!('Notification' in window)) {
      console.log('This browser does not support desktop notification')
    } else if (Notification.permission === 'granted') {
      new Notification(title)
    } else if (Notification.permission !== 'denied') {
      Notification.requestPermission().then((permission) => {
        if (permission === 'granted') {
          new Notification(title)
        }
      })
    }
  }, [title])

  return <button onClick={() => new Notification(title)}>Subscribe</button>
}

export default SubscribeButton

次にサーバー側の処理です。ここでは Service Worker を登録して、Push イベントをリッスンします。

self.addEventListener('push', function (event) {
  var options = {
    body: 'This is a message from your web app!',
    icon: '/icon.png',
    vibrate: [100, 50, 100],
    data: {
      dateOfArrival: Date.now(),
      primaryKey: '2',
    },
    actions: [
      { action: 'explore', title: 'Explore this new world', icon: '/checkmark.png' },
      { action: 'close', title: 'Close notification', icon: '/xmark.png' },
    ],
  }

  event.waitUntil(self.registration.showNotification('Hello world!', options))
})

これで、サーバーから Push イベントが来た時に、ブラウザが通知を表示します。

Web Push を学ぶ

以下のリストは、Web Push についてさらに学ぶためのリンクです。

タイトル	説明
Google Developers: Web Push Notifications	Google の公式ガイド。Web Push 通知の基本から詳細まで広範にわたる内容を扱っています。
MDN: Using the Push API	Mozilla の MDN Web Docs による Push API の使い方。具体的なコード例とともに説明されています。
Service Workers and base configuration	Next.js の公式ドキュメンテーションで、Service Worker の基本的な設定方法を説明しています。

Next.js を学ぶ一覧へ