因近期来发需要，需要使用到浏览器通知，故而了解和整理了一下浏览器通知的几种形式，在这里做个简单的分享。
Web Api Notification
此特性在 Web Worker 中可用。
参考实例：https://developer.mozilla.org/zh-CN/docs/Web/API/notification#示例
假定有如下 HTML：
|
1 |
<button onclick="notifyMe()">Notify me!</button> |
可能按以下方式发送通知——在这里，我们提供了一个相当冗长且完整的代码，如果你想要首先检查通知是否受支持，然后检查用户是否已授予当前来源发送通知的权限，然后根据需要请求权限，最后发送一个通知。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function notifyMe() { if (!("Notification" in window)) { // Check if the browser supports notifications alert("This browser does not support desktop notification"); } else if (Notification.permission === "granted") { // Check whether notification permissions have already been granted; // if so, create a notification const notification = new Notification("Hi there!"); // … } else if (Notification.permission !== "denied") { // We need to ask the user for permission Notification.requestPermission().then((permission) => { // If the user accepts, let's create a notification if (permission === "granted") { const notification = new Notification("Hi there!"); // … } }); } // At last, if the user has denied notifications, and you // want to be respectful there is no need to bother them anymore. } |
在上面的示例中，我们生成了响应用户手势的的通知（点击按钮）。这是最佳实践——你不应该向用户发送它们不同意的通知——而且未来浏览器将明确的禁止未响应用户手势发出的通知。例如， Firefox 已经从版本 72 开始就这么做了。
push.js
Github：https://github.com/Nickersoft/push.js
安装：
|
1 |
npm install push.js --save |
使用：
|
1 2 3 4 5 6 7 8 9 |
Push.create("Hello world!", { body: "How's it hangin'?", icon: '/icon.png', timeout: 4000, onClick: function () { window.focus(); this.close(); } }); |
iNotify.js
官网：https://wangchujiang.com/iNotify/
Github：https://github.com/jaywcjlove/iNotify
安装：
|
1 |
npm install @wcjiang/notify --save |
使用：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import Notify from "@wcjiang/notify"; const notify = new Notify({ message: "There is message.", // page title. effect: "flash", // flash | scroll, Flashing or scrolling openurl: "https://github.com/jaywcjlove/iNotify", // Click on the pop-up window to open the connection address onclick: () => { // Click on the pop-up window trip event // Programmatically closes a notification. notify.close(); console.log("---"); }, // Optional playback sound audio: { // You can use arrays to pass sound files in multiple formats. file: ["msg.mp4", "msg.mp3", "msg.wav"], // The following is also work. // file: 'msg.mp4' }, // Title flashing, or scrolling speed interval: 1000, disableFavicon: false, // Optional, default false, if true, No longer overwrites the original favicon // Optional, default green background white text. Favicon updateFavicon: { // favicon font color textColor: "#fff", // Background color, set the background color to be transparent, set the value to "transparent" backgroundColor: "#2F9A00", }, // Optional chrome browser notifications， // The default is not to fill in the following content notification: { title: "Notification!", // Set notification title icon: "", // Set notification icon, The default is Favicon body: "You have a new message!", // Set message content }, }); notify.player(); |
也可用这样：
|
1 2 3 4 5 6 7 8 9 10 11 |
notify.notify({ title: "New notice", body: "Thunder, it’s raining...", openurl: "https://jaywcjlove.github.io", onclick: function () { console.log("on click"); }, onshow: function () { console.log("on show"); }, }); |
具体的参数请查看官网说明。
以上三种方法就是VUE中使用浏览器通知的分享，希望能对您有所帮助。
原创文章，作者：蓝洛水深，如若转载，请注明出处：https://blog.lanluo.cn/12047
微信扫一扫 
支付宝扫一扫 
