PWA学习手册
Search…
PWA来了，你准备好了么？
1）2018，开始你的PWA学习之旅
2）使用Manifest，让你的WebApp更“Native”
3）让你的WebApp离线可用
4）解决FireBase login验证失败问题
5）在Web中进行服务端消息推送
6）在Chrome中调试你的PWA
7）使用Notification API来进行消息提醒
8）使用Service Worker进行后台同步 - Background Sync
9）生产环境中PWA实践的问题与解决方案
10）使用Resource Hint提升页面加载性能与体验
Powered By GitBook
7）使用Notification API来进行消息提醒
Notification可以增强Web App的交互性，同时Notification和Push也是一对好“基友”。
本文中的代码可以在learning-pwa的notification分支上找到（git clone后注意切换到notification分支）。

1. 引言

在第五篇文章《Web中进行服务端消息推送》中，我介绍了如何使用Push API进行服务端消息推送。提到Push就不得不说与其联系紧密的另一个API——Notification API。它让我们可以在“网站外”显示消息提示：
Could not load image
即使当你切换到其他Tab，也可以通过提醒交互来快速让用户回到你的网站；甚至当用户离开当前网站，仍然可以收到系统的提醒消息，并且可以通过消息提醒快速打开你的网站。
Could not load image
Notification的功能本身与Push并不耦合，你完全可以只使用Notification API或者Push API来构建Web App的某些功能。因此，本文会先介绍如何使用Notification API。然后，作为Notification的“黄金搭档”，本文还会介绍如何组合使用Push & Notification（消息推送与提醒）。

2. 使用Notification API

在这第二节里，我们先来了解如何独立使用Notification功能。相较于第五篇中的Push功能，Notification API更加简洁易懂。

2.1. 获取提醒权限

首先，进行调用消息提醒API需要获得用户的授权。
在调用Notification相关API之前，需要先使用Notification对象上的静态方法Notification.requestPermission()来获取授权。由于Notification.requestPermission()在某些版本浏览器中会接收一个回调函数（Notification.requestPermission(callback)）作为参数，而在另一些浏览器版本中会返回一个promise，因此将该方法进行包装，统一为promise调用：
1
// index.js
2
function askPermission() {
3
return new Promise(function (resolve, reject) {
4
var permissionResult = Notification.requestPermission(function (result) {
5
resolve(result);
6
});
7
​
8
if (permissionResult) {
9
permissionResult.then(resolve, reject);
10
}
11
}).then(function (permissionResult) {
12
if (permissionResult !== 'granted') {
13
throw new Error('We weren\'t granted permission.');
14
}
15
});
16
}
17
​
18
​
19
registerServiceWorker('./sw.js').then(function (registration) {
20
return Promise.all([
21
registration,
22
askPermission()
23
])
24
})
Copied!
我们创建了一个askPermission()方法来统一Notification.requestPermission()的调用形式，并在Service Worker注册完成后调用该方法。调用Notification.requestPermission()获取的permissionResult可能的值为：
  • denied：用户拒绝了通知的显示
  • granted：用户允许了通知的显示
  • default：因为不知道用户的选择，所以浏览器的行为与denied时相同
chrome中，可以在chrome://settings/content/notifications里进行通知的设置与管理。

2.2. 设置你的提醒内容

获取用户授权后，我们就可以通过registration.showNotification()方法进行消息提醒了。
当我们注册完Service Worker后，then方法的回调函数会接收一个registration参数，通过调用其上的showNotification()方法即可触发提醒：
1
// index.js
2
registerServiceWorker('./sw.js').then(function (registration) {
3
return Promise.all([
4
registration,
5
askPermission()
6
])
7
}).then(function (result) {
8
var registration = result[0];
9
/* ===== 添加提醒功能 ====== */
10
document.querySelector('#js-notification-btn').addEventListener('click', function () {
11
var title = 'PWA即学即用';
12
var options = {
13
body: '邀请你一起学习',
14
icon: '/img/icons/book-128.png',
15
actions: [{
16
action: 'show-book',
17
title: '去看看'
18
}, {
19
action: 'contact-me',
20
title: '联系我'
21
}],
22
tag: 'pwa-starter',
23
renotify: true
24
};
25
registration.showNotification(title, options);
26
});
27
/* ======================= */
28
})
Copied!
上面这段代码为页面上的button添加了一个click事件监听：当点击后，调用registration.showNotification()方法来显示消息提醒，该方法接收两个参数：title与option。title用来设置该提醒的主标题，option中则包含了一些其他设置。
  • body：提醒的内容
  • icon：提醒的图标
  • actions：提醒可以包含一些自定义操作
  • tag：相当于是ID，通过该ID标识可以操作特定的notification
  • renotify：是否允许重复提醒，默认为false。当不允许重复提醒时，同一个tag的notification只会显示一次
Could not load image
Could not load image
注意，由于不同浏览器中，对于option属性的支持情况并不相同。部分属性在一些浏览器中并不支持。

2.3. 捕获用户的点击

在上一部分中，我们已经为Web App添加了提醒功能。点击页面中的“提醒”按钮，系统就会弹出提醒框，并展示相关提醒消息。
然而更多的时候，我们并不仅仅希望只展示有限的信息，更希望能引导用户进行交互。例如推荐一本新书，让用户点击阅读或购买。在上一部分我们设置的提醒框中，包含了“去看看”和“联系我”两个按钮选项，那么怎么做才能捕获用户的点击操作，并且知道用户点击了哪个呢？这一小节，就会告诉你如何实现。
还记的上一部分里我们定义的actions么？
1
…
2
actions: [{
3
action: 'show-book',
4
title: '去看看'
5
}, {
6
action: 'contact-me',
7
title: '联系我'
8
}]
9
…
Copied!
为了能够响应用户对于提醒框的点击事件，我们需要在Service Worker中监听notificationclick事件。在该事件的回调函数中我们可以获取点击的相关信息：
1
// sw.js
2
self.addEventListener('notificationclick', function (e) {
3
var action = e.action;
4
console.log(`action tag: ${e.notification.tag}`, `action: ${action}`);
5
​
6
switch (action) {
7
case 'show-book':
8
console.log('show-book');
9
break;
10
case 'contact-me':
11
console.log('contact-me');
12
break;
13
default:
14
console.log(`未处理的action: ${e.action}`);
15
action = 'default';
16
break;
17
}
18
e.notification.close();
19
});
Copied!
e.action获取的值，就是我们在showNotification()中定义的actions里的action。因此，通过e.action就可以知道用户点击了哪一个操作选项。注意，当用户点击提醒本身时，也会触发notificationclick，但是不包含任何action值，所以在代码中将其置于default默认操作中。
现在试一下，我们就可以捕获用户对于不同选项的点击了。点击后在Console中会有不同的输出。
Could not load image

2.4. Service Worker与client通信

到目前为止，我们已经可以顺利得给用户展示提醒，并且在用户操作提醒后准确捕获到用户的操作。然而，还缺最重要的一步——针对不同的操作，触发不同的交互。例如，
  • 点击提醒本身会弹出书籍简介；
  • 点击“看一看”会给用户展示本书的详情；
  • 点击“联系我”会向应用管理者发邮件等等。
这里有个很重要的地方：我们在Service Worker中捕获用户操作，但是需要在client（这里的client是指前端页面的脚本环境）中触发相应操作（调用页面方法/进行页面跳转…）。因此，这就需要让Service Worker与client进行通信。通信包括下面两个部分：
  1. 1.
    在Service Worker中使用Worker的postMessage()方法来通知client：
1
// sw.js
2
self.addEventListener('notificationclick', function (e) {
3
…… // 略去上一节内容
4
​
5
e.waitUntil(
6
// 获取所有clients
7
self.clients.matchAll().then(function (clients) {
8
if (!clients || clients.length === 0) {
9
return;
10
}
11
clients.forEach(function (client) {
12
// 使用postMessage进行通信
13
client.postMessage(action);
14
});
15
})
16
);
17
});
Copied!
  1. 1.
    在client中监听message事件，判断data，进行不同的操作：
1
// index.js
2
navigator.serviceWorker.addEventListener('message', function (e) {
3
var action = e.data;
4
console.log(`receive post-message from sw, action is '${e.data}'`);
5
switch (action) {
6
case 'show-book':
7
location.href = 'https://book.douban.com/subject/20515024/';
8
break;
9
case 'contact-me':
10
location.href = 'mailto:[email protected]';
11
break;
12
default:
13
document.querySelector('.panel').classList.add('show');
14
break;
15
}
16
});
Copied!
当用户点击提醒后，我们在notificationclick监听中，将action通过postMessage()通信给client；然后在client中监听message事件，基于action（e.data）来进行不同的操作（跳转到图书详情页/发送邮件/显示简介面板）。
至此，一个比较简单与完整的消息提醒（Notification）功能就完成了。
然而目前的消息提醒还存在一定的局限性。例如，只有在用户访问网站期间才能有机会触发提醒。正如本文一开始所说，Push & Notification的结合将会帮助我们构筑一个强大推送与提醒功能。下面就来看下它们的简单结合。

3. 消息推送与提醒

在第五篇《Web中进行服务端消息推送》最后，我们通过监听push事件来处理服务端推送：
1
// sw.js
2
self.addEventListener('push', function (e) {
3
var data = e.data;
4
if (e.data) {
5
data = data.json();
6
console.log('push的数据为：', data);
7
self.registration.showNotification(data.text);
8
}
9
else {
10
console.log('push没有任何数据');
11
}
12
});
Copied!
简单修改以上代码，与我们本文中的提醒功能相结合：
1
// sw.js
2
self.addEventListener('push', function (e) {
3
var data = e.data;
4
if (e.data) {
5
data = data.json();
6
console.log('push的数据为：', data);
7
var title = 'PWA即学即用';
8
var options = {
9
body: data,
10
icon: '/img/icons/book-128.png',
11
image: '/img/icons/book-521.png', // no effect
12
actions: [{
13
action: 'show-book',
14
title: '去看看'
15
}, {
16
action: 'contact-me',
17
title: '联系我'
18
}],
19
tag: 'pwa-starter',
20
renotify: true
21
};
22
self.registration.showNotification(title, options);
23
}
24
else {
25
console.log('push没有任何数据');
26
}
27
});
Copied!
使用Push来向用户推送信息，并在Service Worker中直接调用Notification API来展示该信息的提醒框。这样，即使是在用户关闭该Web App时，依然可以收到提醒，类似于Native中的消息推送与提醒。
我们还可以将这个功能再丰富一些。由于用户在关闭该网站时仍然可以收到提醒，因此加入一些更强大功能：
  • 当用户切换到其他Tab时，点击提醒会立刻回到网站的tab；
  • 当用户未打开该网站时，点击提醒可以直接打开网站。
1
// sw.js
2
self.addEventListener('notificationclick', function (e) {
3
var action = e.action;
4
console.log(`action tag: ${e.notification.tag}`, `action: ${action}`);
5
​
6
switch (action) {
7
case 'show-book':
8
console.log('show-book');
9
break;
10
case 'contact-me':
11
console.log('contact-me');
12
break;
13
default:
14
console.log(`未处理的action: ${e.action}`);
15
action = 'default';
16
break;
17
}
18
e.notification.close();
19
​
20
e.waitUntil(
21
// 获取所有clients
22
self.clients.matchAll().then(function (clients) {
23
if (!clients || clients.length === 0) {
24
// 当不存在client时，打开该网站
25
self.clients.openWindow && self.clients.openWindow('http://127.0.0.1:8085');
26
return;
27
}
28
// 切换到该站点的tab
29
clients[0].focus && clients[0].focus();
30
clients.forEach(function (client) {
31
// 使用postMessage进行通信
32
client.postMessage(action);
33
});
34
})
35
);
36
});
Copied!
注意这两行代码，第一行会在网站关闭时打开该网站，第二行会在存在tab时自动切换到网站的tab。
1
self.clients.openWindow && self.clients.openWindow('http://127.0.0.1:8085');
2
​
3
clients[0].focus && clients[0].focus();
Copied!
Could not load image

4. MacOS Safari中的Web Notification

Could not load image
目前移动端浏览器普遍还不支持该特性。但是在Mac OS上的safari里面是支持该特性的，不过其调用方式与上文代码有些不太一样。在safari中使用Web Notification不是调用registration.showNotification()方法，而是需要创建一个Notification对象。
1
// index.js
2
……
3
document.querySelector('#js-notification-btn').addEventListener('click', function () {
4
var title = 'PWA即学即用';
5
var options = {
6
body: '邀请你一起学习',
7
icon: '/img/icons/book-128.png',
8
actions: [{
9
action: 'show-book',
10
title: '去看看'
11
}, {
12
action: 'contact-me',
13
title: '联系我'
14
}],
15
tag: 'pwa-starter',
16
renotify: true
17
};
18
// registration.showNotification(title, options);
19
​
20
// 使用Notification构造函数创建提醒框
21
// 而非registration.showNotification()方法
22
var notification = new Notification(title, options);
23
});
24
……
Copied!
Notification对象继承自EventTarget接口，因此在safari中需要通过添加click事件的监听来触发提醒框的交互操作：
1
// index.js
2
notification.addEventListener('click', function (e) {
3
document.querySelector('.panel').classList.add('show');
4
});
Copied!
Could not load image
该功能示例可以在learn-pwa/notify4safari中找到。

5. 写在最后

Web Notification是一个非常强大的API，尤其在和Push结合后，为WebApp带来了类似Native的丰富能力。本文中所有的代码示例均可以在learn-pwa/notification上找到。
到目前为止，我们已经学习了Manifest、离线缓存、消息推送、消息提醒、Debug等一些基础知识。在下一篇文章里，我们会继续了解与学习PWA中的一个重要功能——后台同步。

参考资料

Previous
6）在Chrome中调试你的PWA
Next
8）使用Service Worker进行后台同步 - Background Sync
Last modified 3yr ago
Copy link
Contents
1. 引言
2. 使用Notification API
3. 消息推送与提醒
4. MacOS Safari中的Web Notification
5. 写在最后
参考资料