浏览器通知的快速实现

HTML5 中的 JavaScript Web Notification API 允许桌面和移动浏览器显示包含自定义内容的通知。JavaScript Web Notification API 现在与大多数现代浏览器兼容，我们已经看到它在许多网站和应用程序中实现。

在本文中，我们将向您展示使用开源 Push.js 库设置浏览器通知的最快方法。

实现思路

我们想要构建一个简单的演示应用程序，要求获得权限，然后在按钮点击时发送通知。为简单起见，我们将使用内联脚本在单个 index.html 文件中工作。

我们需要做的第一件事就是引用库。Push.js 可以通过 npm 或本地文件安装，但实现它的最简单方法是通过 CDN ：

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

Push.js 库不是使用 Web Notifications 所必需的，但它提供了一个干净的 API ，与本机 Notification API 相比，它更容易使用。Push.js 会处理权限问题，服务工作者和跨浏览器的不一致性等问题，因此我们可以省掉很多不必要的麻烦。

获取用户许可

用户需要先授予权限才能发送通知。

申请获取权限

当我们尝试发送第一个通知时，Push.js 会自动请求权限。但是，在许多情况下，我们希望事先手动询问用户：

Push.Permission.request();

这将打开内置浏览器对话框，提示用户接受或拒绝接收通知。如果已授予或拒绝权限，则将忽略上述代码。

创建通知

要显示通知，我们只需调用 Push.create 方法，该方法需要一个标题和一个包含各种有用首选项和回调的可选对象：

// 开始调用 Push.create 方法， Hello world! 是通知的标题
Push.create("Hello world!", {
    // body 选项是通知的内容
    body: "How's it hangin'?",
    // icon 选项是通知的图片
    icon: './icon.png',
    // timeout 选项是通知停留时间
    timeout: 4000
});

下面的演示中，我给一个按钮绑定了上面的方法，只要点击按钮就可以弹出通知窗口。

注意，通知显示在电脑屏幕的右下角

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Push.js</title>
</head>
<body>
    <button id="demo-button">点击测试</button>
    <script src="https://cdn.bootcss.com/push.js/1.0.5/push.js"></script>
    <script>
        var button = document.getElementById("demo-button");
        Push.Permission.request();
        button.onclick = function () {
            Push.create("Hello world!", {
                body: "How's it hangin'?",
                icon: './icon.png',
                timeout: 4000
            });
        };
    </script>
</body>
</html>

在这里可以看到所有可用选项：

https://pushjs.org/docs/options

确保不要打扰用户太多。仅当想要更新重要内容（如新短信或新朋友请求）时才发送通知。

浏览器兼容性

大多数现代浏览器都支持 Notification API。

要查看您选择的浏览器是否支持它，请尝试运行我们的演示应用程序。

它应该在桌面 Chrome，Firefox 和 Safari 以及 Chrome for Android 中没有问题。

此列表中唯一缺少的流行客户端是 iOS Safari，它不提供任何形式的 Web 通知。

另一个需要注意的重要事项是，为了在 Android 中显示通知，Web 应用程序需要通过 HTTPS 托管。

进一步了解

通知是浏览器世界的一个相对较新的补充，但我们可以期待看到越来越多，特别是当 Progressive Web Apps 变得更受欢迎时。如果您想了解有关 JavaScript 通知的更多信息，建议可以查看以下资源：

Push.js 的创建者的博客文章，讨论他创建项目的原因以及他未来的计划。

Push API - 一个新的 API，允许用户即使在 Web 应用程序未打开时也能收到通知。

https://developer.mozilla.org/zh-CN/docs/Web/API/Push_API

如何发一个好的通知？- Google Developers 有关如何更好地发布通知的文章。

https://developers.google.com/web/fundamentals/push-notifications/common-notification-patterns

希望分享的内容对大家有帮助，也可以分享给你们的小伙伴，感谢你们的关注与支持。

点个关注，就是一份支持。