iOS/iPadOS 16.4が到来！FCMを使ってお手軽プッシュ通知実装

2023年11月28日2023年12月12日

今日iOS/iPadOS 16.4が正式リリースされました。

今回のアップデートの目玉といえばやはり「Webプッシュ通知」ではないでしょうか？

そこで今回はFirebase Cloud Messagingを使用してiOS/iPadOS 16.4にWebプッシュ通知を簡単に実装していこうと思います。

Webプッシュ通知の要件

PWAが必須 – Webプッシュ通知の要件

iOS/iPadOSでWebプッシュ通知を受信するにはWebサイトをホーム画面に追加したのち、
そのアプリで通知を受け取る必要があります。

通常に閲覧している場合にはWebプッシュ通知は受信できないので注意が必要です。

ユーザーのインタラクションが必須 – Webプッシュ通知の要件

WindowsやAndroidなどといったブラウザとは違い、
Webプッシュ通知の許可を得るためにはボタンを押した後などのユーザーのインタラクションが必要です。

Webプッシュ通知の実装

Webプッシュ通知の簡単な実装を行っていきます。

エラーハンドリングなどは省略しているため本番で利用する際にはそれらを追加してください。

Firebaseの設定

プロジェクトの設定

今回はFirebase Cloud Messagingを使用するためFirebaseのプロジェクトを作成しておきます。

Web AppのSDKを使用するため初期化コードなどを事前に取得しておいてください。

証明書の作成

また「プロジェクトの設定」の「Cloud Messaging」からウェブプッシュ証明書を作成します。

コーディング

Service Workerを使用するためにはlocalhostかhttpsプロトコルを使用する必要があります。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  <title>iOS WebPush</title>
  <link rel="manifest" href="/app.webmanifest">
</head>
<body>
  <button id="subscribe">通知を購読する</button>
  <div id="token"></div>
  <script type="module" src="script.js"></script>
</body>
</html>

app.webmanifest

PWAで使われるアイコンは好きなものを適所に設置してください。

{
    "$schema": "https://json.schemastore.org/web-manifest-combined.json",
    "name": "iOS WebPush",
    "start_url": "/",
    "display": "standalone",
    "icons": [{
        "src": "/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }]
}

script.js

PWAを動作させるためにService Workerを使用します。

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-app.js";
import { getMessaging, getToken } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-messaging.js";

const firebaseConfig = {
  <FirebaseのSDKの設定>
};

const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

if("serviceWorker" in navigator) {
  document.addEventListener("DOMContentLoaded", () => {
      navigator.serviceWorker.register("/service-worker.js");
  });
}

document.addEventListener("DOMContentLoaded", () => {
  document.getElementById("subscribe").addEventListener("click", () => {
    getToken(messaging, {vapidKey: "<ウェブプッシュ証明書の鍵>"}).then(currentToken => {
      document.getElementById("token").innerHTML = currentToken;
    });
  });
});

service-worker.js

self.addEventListener("install", event => {});
self.addEventListener("fetch", event => {});
self.addEventListener("activate", event => {});

firebase-messaging-sw.js

importScripts("https://www.gstatic.com/firebasejs/9.18.0/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.18.0/firebase-messaging-compat.js");

const firebaseConfig = {
  <FirebaseのSDKの設定>
};

const app = firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging(app);