如何自定义网络通知？

Posted 2023-02-24

【中文标题】如何自定义网络通知？

【英文标题】：How to customise web-notifications?

【发布时间】：2020-02-07 20:12:52

【问题描述】：

我想用自己的输入发送网络通知并决定何时发送（例如提交表单）。我正在为没有编码经验的人制作这个，所以我正在寻找一个简单的界面

我正在尝试从表单制作网络通知系统。通过这种方式，我可以决定通知将在何时显示以及显示什么消息。我当前的代码不起作用：

（注意：我已经请求了显示通知的权限！）

表格

<form id='form' >
<label for='userInput' class='alert-title'>Notifications</label><br>
<div class='lijn3'></div>
<label for='userInput'>Make a new notification</label><br>
<label for='userInput'>Title</label><br>
<input  type='text' id='userInput' /><br>
  <label for='userText'>Text</label><br>
 <input  type='text' id='userText' /><br>
  <input  type='submit' onclick='createNotification();' />
</form>

<script>
function createNotification() 
    var title = document.getElementById("userInput").value;
    var text = document.getElementById("userText").value;
    var image = '/style/afbeeldingen/profielfoto.png';
    console.log(title,text)
    var no = new Notification(title,  body: text, icon: img );

</script>

当我提交表单时，我没有收到通知。相反，它正在刷新页面。 我的代码有什么问题或者我应该如何解决这个问题？欢迎任何工作（替代方案，也许没有表格？）解决方案！

这是我的第一个问题。如果您不理解问题或纠正我，请告诉我:)

【问题讨论】：

您使用的是 localhost、http 还是 https？另外，您使用的是哪种浏览器？

我正在使用 https en chrome

【参考方案1】：

您需要禁用表单提交。处理此问题的更快方法是更改​​此行：

<input  type='submit' onclick='createNotification();' />

到这里：

<input  type='button' onclick='createNotification();' />

片段：

function createNotification() 
    var title = document.getElementById("userInput").value;
    var text = document.getElementById("userText").value;
    var image = '/style/afbeeldingen/profielfoto.png';
    console.log(title,text)
    var no = new Notification(title,  body: text, icon: image );

<form id='form' >
<label for='userInput' class='alert-title'>Notifications</label><br>
<div class='lijn3'></div>
<label for='userInput'>Make a new notification</label><br>
<label for='userInput'>Title</label><br>
<input  type='text' id='userInput' /><br>
  <label for='userText'>Text</label><br>
 <input  type='text' id='userText' /><br>
  <input  type='button' onclick='createNotification();' />
</form>

加： 您需要将 img 更改为 image 作为您的变量名。所以这个：var no = new Notification(title, body: text, icon: img ); 应该是这个：var no = new Notification(title, body: text, icon: image );

【讨论】：

console.log 正在运行，但我没有收到通知，也没有错误消息

我无法用给定的代码来判断。 MDN 提供了非常丰富的页面，其中包含示例和用例：developer.mozilla.org/en-US/docs/Web/API/Notifications_API/…

我现在切换到onesignal，它很容易实现。但我会阅读该页面并希望提出解决方案。感谢您的帮助！