在此 Codelab 中,您将使用 Notifications API 以实现以下目标:
- 请求发送通知的权限
- 发送通知
- 试用通知选项
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
重新合成示例应用并在新标签页中查看
系统会自动屏蔽嵌入式 Glitch 应用的通知,因此您无法在此页面上预览该应用。此时,您需要执行以下操作:
- 点击 Remix to Edit 以使项目可修改。
- 如需预览网站,请按查看应用。然后按 全屏 。
系统应该会在新的 Chrome 标签页中打开 Glitch:
在学习此 Codelab 时,请更改此页面上嵌入式 Glitch 中的代码。使用已发布的应用刷新新标签页以查看更改。
熟悉起始应用及其代码
首先,在新的 Chrome 标签页中查看实时应用:
按 `Ctrl+Shift+J`(在 Mac 上,按 `Command+Option+J`)打开开发者工具。 点击控制台标签页。
您应该会在控制台中看到以下消息:
Notification permission is default
如果您不知道这意味着什么,也不必担心。很快就会揭晓!
点击实际应用中的按钮:请求发送通知的权限和发送通知。
控制台会显示“TODO”
requestPermission
和sendNotification
这两个函数存根中的消息。这些是您将在此 Codelab 中实现的函数。
现在,我们来看看本页嵌入式 Glitch 中的示例应用代码。
打开 public/index.js
并查看现有代码的一些重要部分:
showPermission
函数使用 Notifications API 来获取 并将其记录到控制台中:// Print current permission state to console; // update onscreen message. function showPermission() { let permission = Notification.permission; console.log('Notification permission is ' + permission); let p = document.getElementById('permission'); p.textContent = 'Notification permission is ' + permission; }
在请求权限之前,权限状态为
default
。 在default
权限状态下, 网站必须先请求并获得权限,然后才能发送通知。requestPermission
函数是一个桩:// Use the Notification API to request permission to send notifications. function requestPermission() { console.log('TODO: Implement requestPermission()'); }
您将在下一步中实现此函数。
sendNotification
函数是一个桩:// Use the Notification constructor to create and send a new Notification. function sendNotification() { console.log('TODO: Implement sendNotification()'); }
您将在实现
requestPermission
后实现此函数。window.onload
事件监听器会调用showPermission
函数 在网页加载时,在控制台和网页上显示当前权限状态:window.onload = () => { showPermission(); };
请求发送通知的权限
在此步骤中,您将添加功能以请求用户授予发送通知的权限。
您将使用 Notification.requestPermission()
方法触发一个弹出式窗口,要求用户允许或屏蔽来自您网站的通知。
将 public/index.js 中的
requestPermission
函数桩替换为以下代码:// Use the Notification API to request permission to send notifications. function requestPermission() { Notification.requestPermission() .then((permission) => { console.log('Promise resolved: ' + permission); showPermission(); }) .catch((error) => { console.log('Promise was rejected'); console.log(error); }); }
重新加载您正用于查看当前应用的 Chrome 标签页。
在实际应用界面上,点击请求发送通知的权限。系统会显示一个弹出式窗口。
用户可以对权限弹出窗口做出三种响应之一。
用户响应 | 通知权限状态 |
---|---|
用户选择允许 | granted |
用户选择屏蔽 | denied |
用户未做选择就关闭弹出式窗口 | default |
如果用户点击“允许”:
Notification.permission
设置为granted
。该网站将能够显示通知。
对
Notification.requestPermission
的后续调用将解析为granted
,而不显示弹出式窗口。
如果用户点击“屏蔽”:
Notification.permission
设置为denied
。网站将无法向用户显示通知。
对
Notification.requestPermission
的后续调用将解析为denied
,而不显示弹出式窗口。
如果用户关闭该弹出式窗口:
Notification.permission
仍为default
。网站将无法向用户显示通知。
对
Notification.requestPermission
的后续调用会生成更多弹出式窗口。但是,如果用户继续关闭弹出式窗口,浏览器可能会阻止网站,并将
Notification.permission
设置为denied
。这样一来,系统既无法向用户显示权限请求弹出窗口,也无法显示通知。在撰写本文时,浏览器对关闭的通知权限弹出式窗口的响应行为仍然可能发生变化。处理此问题的最佳方法是,始终请求通知权限以响应用户发起的某些互动,这样才符合其预期并了解发生了什么。
发送通知
在此步骤中,您将向用户发送通知。
您将使用 Notification
构造函数来创建新通知并尝试显示该通知。
如果权限状态为 granted
,系统会显示通知。
将 index.js 中的
sendNotification
函数桩替换为以下代码:// Use the Notification constructor to create and send a new Notification. function sendNotification() { let title = 'Test'; let options = { body: 'Test body', // Other options can go here }; console.log('Creating new notification'); let notification = new Notification(title, options); }
Notification
构造函数接受两个参数:title
和options
。options
是一个对象,其属性表示可添加到通知中的视觉设置和数据。如需了解详情,请参阅有关通知参数的 MDN 文档。刷新您正在查看实时应用的 Chrome 标签页 然后点击发送通知按钮。 您应该会看到一条内容为
Test body
的通知。
如果您未经许可发送通知,会出现什么情况?
在此步骤中,您将添加几行代码, 。
- 在
public/index.js
中的sendNotification
函数末尾, 定义新通知的onerror
事件处理脚本:
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
let title = 'Test';
let options = {
body: 'Test body',
// Other options can go here
};
console.log('Creating new notification');
let notification = new Notification(title, options);
notification.onerror = (event) => {
console.log('Could not send notification');
console.log(event);
};
}
如需观察通知权限错误,请执行以下操作:
点击 Chrome 网址栏旁边的锁形图标,然后将该网站的通知设置重置为默认设置。
点击请求发送通知的权限,这次从弹出式窗口中选择屏蔽。
点击发送通知,看看会发生什么情况。 错误文本 (
Could not send notification
) 和事件对象会记录到控制台中。
(可选)再次重置该网站的通知权限。 您可以尝试多次请求权限并关闭弹出式窗口,看看会发生什么。
试用通知选项
现在,您已经了解了有关如何请求权限和发送通知的基础知识。 您还了解了用户响应对应用能否显示通知有何影响。
现在,您可以在创建通知时对许多可视化选项和数据选项进行实验。 下面提供了完整的可用选项。 (如需详细了解这些选项,请参阅有关 MDN 的通知文档。)
请注意,浏览器和设备以不同的方式实现这些选项, 因此有必要在不同平台上测试您的通知,看看它们的显示效果是怎样的。
let options = {
dir: 'auto', // Text direction
lang: 'en-US', // A language tag
badge: '/orange-cat.png', // Display when insufficient room
body: 'Hello World', // Body text
tag: 'mytag', // Tag for categorization
icon: '/line-cat.png', // To display in the notification
image: '/orange-cat.png', // To display in the notification
data: { // Arbitrary data; any data type
cheese: 'I like cheese',
pizza: 'Excellent cheese delivery mechanism',
arbitrary: {
faveNumber: 42,
myBool: true
}},
vibrate: [200, 100, 200], // Vibration pattern for hardware
renotify: false, // Notify if replaced? Default false
requireInteraction: false,// Active until click? Default false
/*
actions: // Array of NotificationActions
// Only usable with a service worker
[{
action: 'shop',
title: 'Shop!',
icon: '/bags.png'
},],
*/
}
请参阅 Peter Beverloo 的通知生成器,了解更多提示!
如果您遇到困难,请参考此 Codelab 的完整代码:glitch.com/edit/#!/codelab-notifications-get-started-completed
请查看本系列中的下一个 Codelab 使用 Service Worker 处理通知,以进一步探索!