Zenn
🔰

Push.jsでかんたんNotification

2022/11/14に公開
JavaScript
初心者
初心者向け
notification
push
tech

Push.jsとは!?

Push.jsを利用することで、とても簡単にNotificationを実装する事ができます。

Push.js

今回はこのライブラリでNotificationを出してみます。

プロジェクトを用意する

次の様にプロジェクトを作ります。

MyProject01/
　├ index.html (プログラムを起動するファイルです)
　├ custom.css (CSSを記述するファイルです)
　├ main.js (メインのプログラムを記述するファイルです)
　├ images (アイコン画像を格納するフォルダです)

HTMLファイルを用意する

では、作っていきましょう。
用意したHTMLファイルには次のコードを記述します。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" href="./images/favicon.ico">
	<title>Push.js</title>
	<!-- CSS -->
	<link rel="stylesheet" href="./custom.css">
</head>
<body>
	<div id="my_container">
		<div>
			<div>= Push.js =</div>
			<div id="my_status">***</div>
			<div>
				<button id="my_btn">Push</button>
			</div>
		</div>
	</div>
	<!-- JavaScript -->
	<script src="//code.jquery.com/jquery-3.6.1.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/push.js/1.0.12/push.min.js"></script>
	<script src="./main.js"></script>
</body>
</html>

CSSファイルを用意する

次はCSSファイルです。

custom.css
/* CSS */

html, body{
	width: 100%; height: 100%;
	margin: 0px; padding: 0px;
}

#my_container{
	width: 100%; height: 100%;
	display: flex; flex-flow: wrap;
	justify-content: space-around;
	align-items: center;
}

#my_container div{
	margin: 0px; padding: 10px 30px;
	border-radius: 20px;
	background-color: gray; color: white;
	font-size: 2rem; text-align: center;
}

JavaScriptファイルを用意する

いよいよメインの処理です。
JavaScriptファイルには次のコードを記述します。(今回の完成コードです)

main.js
console.log("main.js!!");

$(document).ready(()=>{
	console.log("Ready!!");

	// ボタンイベント
	$("#my_btn").click(()=>{
		console.log("Push");

		// 1. Permissionの確認
		if(!Push.Permission.has()){
			// 2. Permissionのリクエスト
			Push.Permission.request(()=>{
				console.log("onGranted!!");
				const status = Push.Permission.get();// Status
				$("#my_status").text(status);
			}, ()=>{
				console.log("onDenied!!");
				const status = Push.Permission.get();// Status
				$("#my_status").text(status);
			});
		}else{
			// 3. Notificationの実行
			Push.create("こんにちは!!", {
				body: "ゆっくり霊夢です!!",
				icon: "./images/reimu.png",
				tag: "myTag",
				timeout: 12000,
				vibrate: [100, 100, 100],
				onClick: function(e){
					console.log("onClick", e);
				},
				onShow: function(e){
					console.log("onShow", e);
				},
				onClose: function(e){
					console.log("onClose", e);
				},
				onError: function(e){
					console.log("onError", e);
				}
			});
		}
	});
});

コードの解説

上記のコードについて、次の順序で解説を進めていきます。

  1. Permissionの確認
  2. Permissionのリクエスト
  3. Notificationの実行

1, Permissionの確認

1の部分では、"Permission.has()"関数でPermissionを確認しています。
この状態によって、次に続く2,3のいずれかの処理を実行する事になります。

main.js
// 1, Permissionの確認
if(!Push.Permission.has()){
	// 2. Permissionのリクエスト
}else{
	// 3. Notificationの実行
}

2, Permissionのリクエスト

2の部分では、"Permission.request()"関数でPermissionをリクエストします。
引数には許可、未許可/否認の場合それぞれに対して処理を記述します。

引数 意味
第一引数 Permissionが許可された時
第二引数 Permissionが否認された時
main.js
// 2, Permissionのリクエスト
Push.Permission.request(()=>{
	console.log("onGranted!!");
	// Permissionが許可された時
}, ()=>{
	console.log("onDenied!!");
	// Permissionが否認された時
});

この時点で、Permissionを求めるダイアログが表示されます。

3, Notificationの実行

3の部分では、"Push.create()"関数でPush通知を行う処理を実装しています。

main.js
// 3. Notificationの実行
Push.create("こんにちは!!", {
	body: "ゆっくり霊夢です!!",
	icon: "./images/reimu.png",
	tag: "myTag",
	timeout: 12000,
	vibrate: [100, 100, 100],
	onClick: function(e){
		console.log("onClick", e);
	},
	onShow: function(e){
		console.log("onShow", e);
	},
	onClose: function(e){
		console.log("onClose", e);
	},
	onError: function(e){
		console.log("onError", e);
	}
});

引数にはそれぞれ次の値や関数を指定する事が可能です。

引数 意味
第一引数 タイトル
icon アイコン画像
body 本文
tag タグ
timeout Notificationが閉じるまでの時間
vibrate バイブレーションの時間
onClick ボタンがクリックされた時
onShow Notificationが開いた時
onClose Notificationが閉じた時
onError エラー時

Push通知が実行されると、次の様にNotificationが表示されます。(やりました!!)

Permissionを初期化したい場合

ブラウザのアドレスバー左にあるボタンからPermissionを初期化する事ができます。

Notificationが出ない場合(Macの場合)

実装が上手くいっても、Notificationが表示されない場合があります。
このとき、BrowserのNotificationが無効になっている可能性があるので注意しましょう。
(SystemPreferences -> Notificationsから変更が可能です)

最後に

いかがでしたでしょうか。
Push.jsを使うと、Notificationを簡単に実装できる事が伝われば幸いです。
通知のタイミングや表示回数など、使い所によっては有効な機能なので積極的に使っていきたいと思いました。
ここまで読んでいただき有難うございました。

Discussion