push.js のサンプル #jQuery

Push.js のサンプルです。

jquery-3.4.1.min.js
push.min.js
なダウンロードしてサーバーに置いてあります。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="push.min.js"></script>
<title>Push.js Tutorial</title>
</head>
<body>
<div id="navbar"><span>Push.js Tutorial</span></div>
<p />
<div id="wrapper">
<button id="notify-button">Notify Me!!</button>
<button id="clear-button">Clear All!</button>
<button id="check-button">Check Permission</button>
</div>

<script src="example01.js"></script>
<p />
Jun/02/2019<p />
</body>
</html>

example01.js

// ----------------------------------------------------------------------
// ----------------------------------------------------------------------
Push.config({
    serviceWorker: './customServiceWorker.js',
    fallback: function(payload) {
        // Code that executes on browsers with no notification support
        // "payload" is an object containing the 
        // title, body, tag, and icon of the notification 
    }
})

jQuery("#notify-button").click(function(){
    const message_aa = "皆さん こんにちは。 "
    Push.create(message_aa + "Hello world!",{
        body: "This is example of Push.js Tutorial",
        icon: 'sabe-notification-icon.png',
        timeout: 5000,
        onClick: function () {
            window.focus()
            this.close()
            }
        })
    })

jQuery("#clear-button").click(function(){ 
        Push.clear()
    })

jQuery("#check-button").click(function(){ 
    console.log(Push.Permission.has())
    console.log("*** check permission ***")
    })
// ----------------------------------------------------------------------

以上は、ネットでよく見かける push.js の使用例です。

まだ未解決の課題
サーバーサイドのプログラミング

customServiceWorker.js を使うようです。