はじめに (対象読者・この記事でわかること)

このページは、JavaScript の基礎は理解しているが、ブラウザ側でのプッシュ通知実装に踏み込んだことがないエンジニアを対象としています。
実際に Push.js を利用して、ニュース更新やお知らせをユーザーにリアルタイムで届く形にする手順が学べます。
記事を読み終えると、Service Worker の登録から Push.js のインストール、通知のカスタマイズ、エラーハンドリングまで一通りの流れを自分のプロジェクトに組み込めるようになります。
背景として、最近の Web アプリはユーザーリテンション向上のために プッシュ通知 を必須機能として採用する事例が増えており、軽量かつ設定がシンプルな Push.js が注目されています。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

HTML/CSS、そして基本的な JavaScript（ES6 以降）の理解
ブラウザのコンソール操作に慣れていること
基本的な npm/yarn の操作ができること

Push.jsとは？〜概要・背景〜

Push.js は、ブラウザの Notification API をラップした軽量ライブラリで、数行のコードでデスクトップ通知やモバイルブラウザ通知を実装できます。
従来、プッシュ通知を実装するには Service Worker と Push API の組み合わせが必須で、設定が複雑になるケースが多くありました。Push.js はそのうちの 権限取得、通知生成、クリックハンドラ をシンプルなメソッドに抽象化し、開発者がビジネスロジックに集中できるよう設計されています。

主な特徴は次の通りです。

特徴	内容
軽量	1.2 KB（gzip 圧縮後）程度
クロスブラウザ	Chrome, Firefox, Edge, Safari（一部制限あり）
Promise API	非同期処理が自然に書ける
オプションが豊富	アイコン、バッジ、サウンド、アクションボタンなど

実際にニュースサイトや SaaS のダッシュボードで利用されており、ユーザーがページを閉じても重要なお知らせをリアルタイムに届けられる点が評価されています。

Push.jsでニュース通知を実装する手順

以下では、npm でインストールし、最小構成の Service Worker を設定したうえで、Push.js を使ってニュース更新時に通知を送る一連の流れを解説します。各ステップごとにサンプルコードとポイントを示すので、手順通りに進めればすぐに動作確認ができます。

ステップ1　プロジェクトのセットアップと Push.js の導入

プロジェクト作成
bash mkdir push-demo && cd push-demo npm init -y npm install push.js
基本的なファイル構成
push-demo/ ├─ index.html ├─ main.js └─ sw.js // Service Worker
index.html にスクリプトを読み込む
```html

Push.js デモ

Push.js デモページ

```

main.js で Service Worker を登録（まだ実装は後述）
js if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(reg => console.log('Service Worker registered', reg)) .catch(err => console.error('SW registration failed', err)); }

ポイント
- push.js はモジュール化されていないので、直接スクリプトタグでインクルードします。
- Service Worker の登録は非同期で行い、失敗した場合はコンソールで確認できるようにしています。

ステップ2　Service Worker の最小実装

sw.js は Notification API のバックエンドとして機能します。以下は最小構成です。

Js

self.addEventListener('install', e => {
    self.skipWaiting(); // 即時有効化
    console.log('Service Worker installed');
});

self.addEventListener('activate', e => {
    console.log('Service Worker activated');
});

self.addEventListener('notificationclick', e => {
    e.notification.close();
    // クリック時に開く URL を設定
    e.waitUntil(
        clients.openWindow(e.notification.data?.url || '/')
    );
});

ポイント
- notificationclick ハンドラでユーザーが通知をクリックした際の遷移先を制御します。
- e.notification.data に任意の情報（例: 記事の URL）を入れておくと、クリック時に自然にそのページへ遷移できます。

ステップ3　Push.js で通知を作成するロジック

main.js に以下のコードを追記し、ボタンをクリックしたときに通知が表示されるようにします。

Js

document.getElementById('notifyBtn').addEventListener('click', async () => {
    // 1. 権限取得
    const permission = await Push.Permission.request();
    if (!permission) {
        alert('通知の権限が許可されていません');
        return;
    }

    // 2. 通知内容を定義
    const options = {
        title: '最新ニュース速報',
        body: '新しい記事が公開されました！',
        icon: '/assets/icons/news.png',
        badge: '/assets/icons/badge.png',
        tag: 'news-2025-08-09', // 同一タグなら上書きされる
        data: { url: '/news/2025-08-09' }, // クリック時に開くページ
        timeout: 5000, // 自動で閉じるまでの時間（ms）
        onClick: function () {
            // メインスレッド側で処理したい場合に利用
            console.log('通知がクリックされました');
        }
    };

    // 3. 通知を表示
    Push.create(options.title, options);
});

重要なオプション解説

tag: 同じタグの通知が既に存在する場合、上書きされるので重複防止に便利。
data: 任意オブジェクト。notificationclick ハンドラで参照できる。
timeout: ユーザーが操作しない場合の自動消失時間。
onClick: クライアント側のコールバック。Service Worker 側と併用可能。

ステップ4　実際のニュースデータと連携させる

本番環境では、サーバー側から新しい記事が公開されたときに Push API（サーバー送信）を利用しますが、ここでは簡易的に fetch で JSON を取得し、取得結果を通知に反映させます。

Js

async function fetchLatestNews() {
    const res = await fetch('/api/latest-news');
    if (!res.ok) throw new Error('ニュース取得失敗');
    return res.json(); // { title, summary, url, image }
}

document.getElementById('notifyBtn').addEventListener('click', async () => {
    try {
        const news = await fetchLatestNews();

        const permission = await Push.Permission.request();
        if (!permission) return;

        Push.create(news.title, {
            body: news.summary,
            icon: news.image,
            data: { url: news.url },
            tag: `news-${news.id}`,
            timeout: 8000
        });
    } catch (e) {
        console.error(e);
        alert('ニュースの取得に失敗しました');
    }
});

サーバー側 API のサンプル（Node.js/Express）

Js

app.get('/api/latest-news', (req, res) => {
    const latest = {
        id: 123,
        title: 'AI が生成したニュースタイトル',
        summary: 'AI が自動生成した記事の要約です。',
        url: '/news/123',
        image: '/assets/icons/ai.png'
    };
    res.json(latest);
});

ハマった点やエラー解決

発生した問題	原因	解決策
通知が表示されない	ユーザーがブラウザの「通知を許可」設定をブロック	`Push.Permission.request()` の戻り値を必ず確認し、許可されていない場合は UI で再度許可を促す
Service Worker が呼び出されない	`sw.js` のパスが相対パスで間違っていた	`navigator.serviceWorker.register('/sw.js')` のようにルートパスで登録
クリック時にページが開かない	`notificationclick` ハンドラで `clients.openWindow` が非同期のまま終了	`e.waitUntil(clients.openWindow(url))` と `waitUntil` を使用して Promise が完了するまで待機させる
同一記事の通知が重複	`tag` を設定していなかった	`tag: 'news-123'` のようにユニークなタグを付与し、同一タグは上書きされるようにした

まとめ

本記事では、Push.js を利用した Web プッシュ通知の実装手順を順を追って解説しました。

Push.js の概要と利点 を把握し、インストールから最小構成の Service Worker まで設定できた
通知権限の取得、カスタマイズオプション、クリックハンドラ の実装方法を学んだ
サーバー API と連携 し、リアルタイムでニュース情報を通知できるようにした
ハマりやすいポイント とその対処法をまとめ、トラブル時の解決策を提示した

これにより、読者は自分の Web アプリにすぐにプッシュ通知機能を組み込み、ユーザーエンゲージメントを向上させることが可能になります。次回は、Push API と VAPID キーを用いたサーバーサイドプッシュ の実装に踏み込む予定です。

参考資料

Push.js 公式ドキュメント
MDN Web Docs – Notification API
MDN Web Docs – Service Worker API
「Web Push Notifications」 (O'Reilly, 2022)

Push.jsで簡単に実装するWebプッシュ通知入門💻