More than 3 years have passed since last update.

push通知

push.js

Last updated at 2020-06-25Posted at 2020-06-25

「push.js」を使う

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>

html


<!DOCTYPE html>
<html lang="ja">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>
<meta charset="UTF-8">
<title>ブラウザでプッシュ通知を実装</title>
</head>
<body>
<center>
 <h1 style="margin-top: 300px">ブラウザでプッシュ通知を実装しよう</h1>
</center>
<center>
 <input type="button" id="push" onclick="return push()" value="クリックするとプッシュ通知が送られます"/>
</center>
</body>
</html>

Javascript


<script>
    function push(){
        Push.create("更新情報",
        {
            body: "ブログの更新をお知らせします!",
            icon: 'casley_logo.png',
            timeout: 8000,
            onClick: function () {
                window.focus();
                this.close();
            }
        })
    }
</script>

参考：https://www.casleyconsulting.co.jp/blog/engineer/293/

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up