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
希望分享的内容对大家有帮助，也可以分享给你们的小伙伴，感谢你们的关注与支持。
点个关注，就是一份支持。
网友评论