サーバから Chrome ブラウザプッシュする実装の流れ
概要
実装の流れを紹介します
環境
- macOS 26.2
- Python 3.12.11
鍵の作成
こちらを参考に作成します
鍵ファイルと JavaScript 用の鍵文字列を作成すれば OK です
サブスクリプション情報の保存 (Python)
JavaScrpt 側で通知の許可をした場合に通知先の情報をサーバ側に保存しておきます
今回は Redis で紹介しますが永続化できるものであれば何でも OK です
@app.route("/subscribe", methods=["POST"])
def subscribe():
"""フロントから送られてくる Subscription 情報を Redis に保存"""
data = request.get_json()
client_id = data.get("client_id")
subscription_info = data.get("subscription")
redis_conn = get_kv()
redis_conn.set(f"push_sub:{client_id}", json.dumps(subscription_info))
return jsonify({"ok": True})
プッシュ送信処理 (Python)
あとで使いますが実際にプッシュを送信する処理です
メールアドレス部分はダミーでも問題ないですが一応ちゃんと設定した方がいいです (公開アプリの場合)
VAPID_PRIVATE_KEY_PATH = os.getenv("VAPID_PRIVATE_KEY_PATH", "./private_key.pem")
VAPID_CLAIMS = {"sub": "mailto:user@mail"}
def send_web_push(subscription_info, message_body):
try:
webpush(
subscription_info=json.loads(subscription_info),
data=json.dumps(message_body),
vapid_private_key=VAPID_PRIVATE_KEY_PATH,
vapid_claims=VAPID_CLAIMS,
)
except WebPushException as ex:
print("Push failed:", repr(ex))
ServiceWorker (JavaScript)
リモートプッシュはこの ServiceWorker がないと動きません
Python からのプッシュをこの ServiceWorker が受け取り通知を表示する感じです
通知のスタイルなどはシンプルにしているので必要であればアイコンなど設定してください
self.addEventListener("push", function (event) {
console.log("Push received");
let data = { title: "新着", body: "メッセージがあります" };
try {
if (event.data) {
data = event.data.json();
}
} catch (e) {
console.error("JSON parse error:", e);
}
const options = {
body: data.body,
};
event.waitUntil(self.registration.showNotification(data.title, options));
});
ブラウザ側のサブスクリプション登録 (JavaScript)
ブラウザで特定のサイトなどにアクセスすると通知を許可しますかなど出るサイトがありますがそれを実装します
許可するをクリックしたら必要な情報を Python 側に送ります
urlBase64ToUint8Array に鍵文字列は冒頭で作成したものを使ってください
function urlBase64ToUint8Array(base64String) {
const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
async function setupPush() {
const register = await navigator.serviceWorker.register("/static/js/sw.js");
let subscription = await register.pushManager.getSubscription();
if (!subscription) {
subscription = await register.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(
"xxx",
),
});
}
await fetch("/subscribe", {
method: "POST",
body: JSON.stringify({
client_id: CLIENT_ID,
subscription: subscription,
}),
headers: { "Content-Type": "application/json" },
});
}
通知許可ダイアログ表示 (JavaScript)
ページが読み込まれた場合に自動で出してもいいですが嫌がられるケースもあるので特定のボタンを押したら許可する流れにします
document.addEventListener("DOMContentLoaded", () => {
const title = document.getElementById("notification");
if (title) {
title.addEventListener("click", async () => {
if ("Notification" in window) {
const permission = await Notification.requestPermission();
if (permission === "granted") {
await setupPush();
}
}
});
}
if ("Notification" in window && Notification.permission === "granted") {
setupPush().catch((err) => console.error("Auto-setup failed:", err));
}
});
プッシュ通知送信タイミング (Python)
あとは任意のタイミングでサーバ側で送信すれば OK です
当然ですが送信しまくると大変なことになるので条件など設けて適切なタイミングで送るようにしましょう
@app.route("/send", methods=["POST"])
def redis_chat_send():
try:
sub_keys = redis_conn.keys("push_sub:*")
for sub_key in sub_keys:
target_id = sub_key.decode().split(":")[-1]
if target_id != client_id:
sub_info = redis_conn.get(sub_key)
if sub_info:
logger.info(f"Sending push to {target_id}")
send_web_push(
sub_info,
{"title": "新着メッセージ", "body": f"{client_id}: {msg}"},
)
except Exception as e:
logger.error(f"Push notification error: {e}")
return jsonify({"ok": True})
サブスクリプション確認
- Redis 側にキーが登録されていること
- 開発者コンソールで ServiceWorker が登録されていること
プッシュが届かない場合
- Mac であれば通知の設定を確認しましょう
- Mac の Chrome はデフォルトでオフになっている
- Chrome で許可していても Mac 側で拒否していることが多い
- サイトが https 化されていない
- localhost ならテストできるようです
- IP ベースのサイトや http のサイトでは動作しません
スマホ or タブレット版でプッシュ通知が届かない場合
- ラップトップ版と違いかなり作りが違う
- 単純に通知を許可することができない
- iOS 側で当然許可する必要があるがそれでもサブスクリプションできないことがある
- サイトを PWA 化して上げる必要などがあるかも
最後に
参考サイト
