Vue.jsでのプッシュ通知の実装：Web Push APIを使って、ブラウザからプッシュ通知を送信

作成日 2024.12.28
Vue.js
Vue.js

Vue.jsとWeb Push APIを使用して、ブラウザからユーザーにプッシュ通知を送信する機能を実装する。ユーザーエンゲージメントを高めるために有効な手段として活用できる。

1. 1. Vue.jsプロジェクトのセットアップ
2. 2. サービスワーカーの作成
3. 3. サービスワーカーの登録
4. 4. Web Push APIの設定
5. 5. サーバー側の準備
6. 6. VAPIDキーの生成
7. 7. ユーザー許可の取得
8. 8. フロントエンドからサーバーへの通知送信
9. 9. プッシュ通知のテスト
10. 10. エラーハンドリング
11. 11. UIの作成
12. 12. アプリケーションのデプロイ

1. Vue.jsプロジェクトのセットアップ

新しいVue.jsプロジェクトを作成し、必要な依存関係をインストールする。

vue create vue-push-notification
cd vue-push-notification
npm install web-push

2. サービスワーカーの作成

ブラウザ側で通知を処理するためのサービスワーカーを作成する。

// public/service-worker.js
self.addEventListener('push', event => {
  const data = event.data.json();
  self.registration.showNotification(data.title, {
    body: data.body,
    icon: '/icon.png',
  });
});

3. サービスワーカーの登録

メインアプリケーションでサービスワーカーを登録する。

// src/main.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker登録成功:', registration);
    })
    .catch(error => {
      console.error('Service Worker登録失敗:', error);
    });
}

4. Web Push APIの設定

Web Push APIを使って通知の許可をリクエストする。

async function subscribeUserToPush() {
  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: 'VAPID_PUBLIC_KEY'
  });
  console.log('Subscription:', subscription);
}

5. サーバー側の準備

Node.jsを使用してプッシュ通知を送信するサーバーを構築する。

// server.js
const webpush = require('web-push');

const vapidKeys = {
  publicKey: 'VAPID_PUBLIC_KEY',
  privateKey: 'VAPID_PRIVATE_KEY'
};

webpush.setVapidDetails(
  'mailto:example@example.com',
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

app.post('/send-notification', (req, res) => {
  const subscription = req.body.subscription;
  const payload = JSON.stringify({ title: '通知タイトル', body: '通知本文' });

  webpush.sendNotification(subscription, payload)
    .then(() => res.sendStatus(200))
    .catch(error => console.error(error));
});

6. VAPIDキーの生成

VAPIDキーを生成してWeb Push通知の認証を行う。

npx web-push generate-vapid-keys

7. ユーザー許可の取得

ユーザーに通知の許可を求めるダイアログを表示する。

async function requestNotificationPermission() {
  const permission = await Notification.requestPermission();
  if (permission === 'granted') {
    console.log('通知許可が得られました');
  } else {
    console.log('通知許可が拒否されました');
  }
}

8. フロントエンドからサーバーへの通知送信

ユーザーがボタンをクリックした際にサーバーに通知を送信する。

async function sendPushNotification() {
  await fetch('/send-notification', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ subscription })
  });
}

9. プッシュ通知のテスト

サービスワーカーとサーバーが正常に動作するか確認する。

sendPushNotification()
  .then(() => console.log('通知が送信されました'))
  .catch(error => console.error('通知送信エラー:', error));

10. エラーハンドリング

通知送信時のエラーを適切に処理する。

webpush.sendNotification(subscription, payload)
  .catch(error => {
    console.error('通知送信エラー:', error);
  });

11. UIの作成

ボタンを設置し、通知を手動でトリガーできるようにする。

<template>
  <div>
    <button @click="requestNotificationPermission">通知を許可</button>
    <button @click="subscribeUserToPush">プッシュ通知を購読</button>
    <button @click="sendPushNotification">通知を送信</button>
  </div>
</template>