このページはウェブプッシュくん のサンプルページです。
このページを参考に、ウェブプッシュくん を導入して下さい。
最新情報は ドキュベース⧉ をご確認下さい。
reCaptcha を導入しています。
（※別途管理画面でkeyの追加が必要）
この右下の邪魔なマークは以下の手順で非表示にする事が出来ます。
This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and
<a href="https://policies.google.com/terms">Terms of Service</a> apply..grecaptcha-badge { display: none }WebPush通知は、簡単にいうと暗号化された Tokenをブラウザ毎に保持させ、 その Tokenに対してメッセージをPush送信する技術です。
iOSバージョン 16.3以下は WebPush通知機能が使えません。
また、バージョンが16.4以上であっても PWAインストール（ホーム画面に追加） しなければ通知を受け取る事が出来ません。
そのため、PCや androidなどのその他のプラットフォームより、通知受け取りまでの手順が少し多く複雑になります。
このことはデメリットではなく
「スマホのホーム画面という一等地を先行者優位で早くゲットできる」と
メリットとして捉えることも出来ます。
配信者界隈では「チャンネル登録お願いします」が決まり文句みたいになってますが、
Web界隈では今後「ホーム画面に追加お願いします」がウザいほど目につくようになるでしょう。
WebPush通知がそれほど普及していない理由として、iOSが対応していなかった事と、
すでに導入しているブログなどで 突然ダイアログで許可を求められる 事が考えられます。
検索でたどり着いていきなりダイアログで許可を求められたら、反射的に「キャンセル」や「拒否」をしてしまうものです。
この事が原因かわかりませんが、現在では設定で デフォルトで拒否 にすることが出来るようになってます。
chromeなら「プライバシーとセキュリティ ＞ サイトの設定 ＞ 通知」から
「サイトに通知の送信を許可しない」を選択することで、デフォルトで拒否することが出来ます。
以上のことから、いきなりダイアログを開かずに、
受信者のメリットを説明して、
通知の購読（サブスク）を促進する事が逆に近道であると言えるでしょう。
前述の受信者のメリットの説明を、
ページ内に掲載するのか、モーダルで開くのか、専用ページを作って読ますのかは、
サイトのデザインや方向性などによって変わってくると思いますので、
それぞれご検討頂ければと思います。
また、iOSは PWAインストール（ホーム画面に追加）する必要があるなど、
プラットフォームにより表示する説明も変わってきますので、
このページ及び ./webpush_samplete/webpushSamplete.js を
参考にコーディングして頂ければ幸いです。
通知メッセージには iconとimage を設定可能ですが、
2023/09/20 現在 image は実験的機能🔗 になっており、
プラットフォームによって対応がまちまちです。
例えば、iOS SE2 では、icon,image を指定しても通知には表示されずアプリアイコン（manifest.json で指定した icon）のみ表示されます。
一方 chrome は、androidでは icon,image 両方表示されるけど PCでは icon のみの表示になります。
以上のことから、しばらくは「画像系」はおまけと考えて、
「タイトル」と「本文」で注意を引き、
クリック遷移link先でアピールすることになると思います。
複雑な WebPush通知の導入を簡単にする ウェブプッシュくん を作りました。
必須ファイルを設置し IDなどを設定するだけで WebPushを導入することが出来ます。
（別途コーディングは必要）
以下ではその事前に準備について説明させて頂きます。
iOSには PWAインストールが必須と説明しましたが、
WebPush機能は PWAの機能の一つで、
PCや androidでも裏では PWAとして振る舞っている。はず。多分。
なので、このサイトは PWAだよ！と宣言する必要があります。
その宣言は /manifest.json に必要情報を記載することで出来ます。
↓サンプル
{
"name": "ちょっと長めのサイトの名前",
"short_name": "短いサイト名",
"display": "standalone",
"scope": "/",
"start_url": "/",
"gcm_sender_id": "103953800507",
"icons":[
{
"src": "webpush_sample/icon_192.png",
"sizes": "192x192"
},
{
"src": "webpush_sample/icon_512.png",
"sizes": "512x512"
}
]
}icons がホーム画面に追加した際の「アプリアイコン」になります。
serviceworker とは、通常のWebサイトとは別の領域で動作する Javascritベースのスクリプトで、
これがあることでサイトを開いていないバックグラウンドの状態でも通知を受信することが出来るようになります。
この serviceworker は firebase-messaging-sw.js という名前のファイルで、
現在開いているサンプルページ index.html と一緒に入っていたと思います。
それをそのままご利用下さい。
ウェブプッシュくん JS は「通知の購読」「通知の解除」「フォアグラウンドでの通知の受信」などの処理に使います。
また、iOSの判定などプラットフォームの識別もすることが出来ます。
ウェブプッシュくん JS の導入は ./webpush_sample/webpushSample.js 内の
上部にある import { WebPushKun } from "https://webpush.wingit.lol/webpushkun/js?id=randomstring"; で出来ます。
webpushSample.js を参考に、既存の JSに組み込んでも良し、webpush用に新たに JSファイルを作成しても良し
ですので、状況に合わせて調整して下さい。
type="text/javascript" ではダメで、
以下のように type="module" である必要があります。
<script type="module" src="./webpush_sample/webpushSample.js"></script>
ウェブプッシュくん では「バックエンド」はPHPを使って、
別のサーバで一元管理するようになっています。
その別のサーバとやり取りするためのPHPが ./webpush/ に格納されています。
その中の ./webpush/index.php を開いて、
このサンプルセットと一緒に受け取った clientID と clientSecret を当該の場所に書き込んで下さい。
'oauth' => [
'client_id' => 'ここに clientId を書き込む',
'client_secret' => 'ここに clientSecret を書き込む',
・・・・
最後に、「通知の勧誘メッセージ」「通知の解除」などのメッセージ領域の、
各サイト毎のデザインにあわせたコーディング（HTML,CSS,JS）をやれば完成です。
基本的な処理や構成はこのサンプル index.html と
./webpush_sample/webPushSample.js を参考にして頂ければと思います。
☆ コーディングのポイントは以下になります。
position: fixed; で配置し、
クリックしたら勧誘メッセージと許可ボタンを表示する。
const WebPushKunOps = {
dir : '/webpush', // WebPushシステムがあるDIR。
debugMode: false, // true にすると、ところどころで console に情報が表示される
};
window.WebPushKun = new WebPushKun(WebPushKunOps);
返り値 Promise
let s;
await window.WebPushKun.analyzeBrowser().then(function(r) {
s = r;
});
console.log('First time status', s);
返り値 number
const statusCode = window.WebPushKun.getStatusCode();
if (statusCode === 200) {
alert('すでに購読済みです😄');
} else if (statusCode === 404) {
alert('非対応ブラウザです💀');
}
返り値 string
const statusSlug = window.WebPushKun.getStatusSlug();
const target = '#webpush_message_box__' + statusSlug;
if ($(target).get(0) ) {
$(target).show();
}
返り値 object
// statusCode の詳細データリストを取得。
const lists = window.WebPushKun.getStatusCodeLists();
// statusCode の説明文取得
const text = window.WebPushKun.getStatusText();
console.log(text, lists);
返り値 boolean
if (window.WebPushKun.isSupported() === true) {
alert('WebPush対応ブラウザです😙');
}
返り値 boolean
if (window.WebPushKun.isDenied() === true) {
alert('このサイトの通知を拒否しています😢');
}
const status = window.WebPushKun.getAllStatus();
console.log(status);
返り値 Promise
↓をクリックしたら左上に通知の許可を求めるアレが表示されるので【許可】して下さい。
<button class="requestPermission">購読する</button>
<script>
$(document).on('click', '.requestPermission', function(e) {
e.stopPropagation();
window.WebPushKun.requestPermission()
.then(function(token) {
console.log('Success requestPermission!!', token);
setStatus(); // ←webpushSample.js 内参照
})
.catch(function(err) {
console.log('Error requestPermission!!', err);
});
return false;
});
</script>
返り値 Promise
<button class="unSubscribeWebPush">購読を解除する😭</button>
<script>
$(document).on('click', '.unSubscribeWebPush', function(e) {
e.stopPropagation();
window.WebPushKun.unSubscribe().then(function(res) {
setStatus(); // ←webpushSample.js 内参照
});
return false;
});
</script>
引数 function
返り値 Promise
window.WebPushKun.setCallbackOfOnMessage(function(payload) {
window.WebPushKun.showNotification(payload)
.then(function(senddata) {
console.log('setCallbackOfOnMessage()', senddata);
})
.catch(function(error) {
console.log('catch setCallbackOfOnMessage()', error);
});
});
返り値 Promise
const payload = {
notification: {
title: "通知のタイトル",
body : "通知の本文",
image: "https://hoge.com/img/hoge.png"
},
data: {
link: "https://hoge.com/test.html"
}
};
window.WebPushKun.showNotification(payload)
.then(function() {
console.log('メッセージ表示後');
})
.catch(function(err) {
console.log(err);
});