前言
随着 PWA 技术的成熟以及市场需求的不断增长，Web Push Notification 已经成为了增强用户体验的必经之道。通过实现 Web Push Notification，我们可以在用户离开我们的网站后，仍然能够通过推送消息将他们再拉回到我们的页面上，从而增加用户的使用频率和粘性。
本文将为大家详细介绍如何利用 PWA 实现 Web Push Notification，并提供示例代码与指导意义。
PWA 简介
PWA （Progressive Web App），简单来说就是一种可以缓存并离线访问的 Web App。PWA 能够为我们提供与 Native App 相同的用户体验，例如全屏、离线访问、推送通知等功能，而且 PWA 比 Native App 更具有可访问性。
Web Push Notification 原理
Web Push Notification 依赖于 Service Workers 技术，Service Workers 是一种运行在后台的 JavaScript Worker，能够拦截网络请求并进行响应，从而可以缓存我们的页面，离线可访问等等。
为了实现 Web Push Notification，我们需要引入三个需要注册的对象：PushManager、PushSubscription 和 Notification，他们共同协作来推送消息。
- PushManager: 负责订阅和推送消息。
- PushSubscription: 表示用户订阅了推送通知，这个对象会发送给服务器，服务器可以用来推送消息。
- Notification: 负责展示在操作系统通知栏上的消息。
开始实现
Step 1 - 创建 Service Worker
首先，为了支持 Web Push Notification，我们需要创建 Service Worker 文件。Service Worker 代码如下：
-- -------------------- ---- ------- -- ----- ----------------------------- --------------- - --------------------- - ---- --------- ------- --- ----- - ----- ------------ ------ --- ---- - ----- ------------ ---- -- ------------ --- ---- - ------------------ --- --- - ------------------------------------ --------------------------------------------------------- - ----- ----- ----- ----- ---- --- ---- --- ------------------------------------------ --------------- - --------------- ------------ ------ -- ------------------------ --------------------------- --- --- - -------------------------- ---------------- ------------------ ----- -------- -- ----------------------------- - --- ---- - - -- - - --------------------- ---- - --- ------ - ----------------- -- ----------- --- --- -- ------- -- ------- - ------ --------------- - - -- -------------------- - ------ ------------------------ - -- -- ---展开代码
Step 2 - 注册 Service Worker
要注册 Service Worker，我们需要在主 JS 文件中添加如下代码：
// app.js if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js') .then(function() { console.log('Service Worker Registered'); }); }
Step 3 - 询问用户是否订阅
为了推送消息，我们需要获取用户的订阅信息。为此，我们需要调用 PushManager API 的 subscribe() 方法，该方法会弹出一个提示，询问用户是否允许订阅。示例代码如下：
-- -------------------- ---- ------- -- ---------------- -- ---------- - -------------------- ------ --- ---- -- ------------ ----------------------------------------- --------------------- - -------------------- ------ -- ------------ ------- -------------- - ------ ---------------- -- ---------------------- - ---------------------- ------ ------- ------- --- - -------- --------------- - ----- -------------------- - ----------------------------------------------- -------------------------------------- ---------------- ----- --------------------- -------------------- -- ---------------------------- - ----------------- -- ------------- -------------- -- -------- -- ---------------------- - --------------------- -- --------- --- ----- -- ------- --- -展开代码
Step 4 - 推送消息
一旦我们得到用户的 PushSubscription 对象，我们就可以使用 sendNotification() 方法来推送消息了。示例代码如下：
-- -------------------- ---- ------- -------- ------------------ - ----- ----- - ---- ---- -------------- ----- ------- - - ----- ------- -------- ----- ----------------- -- -------------------------------------- --------- -展开代码
加强版 - 增加权限判断
我们在订阅用户前，需要首先获取 Notification 的权限。代码如下：
-- -------------------- ---- ------- -- ------------------------ --- --------- - ------------------------ --- ------------- --- --------- ------- - -- ------------------------ --- ---------- - ----------------------- --- ------------- --- ------- ---------- ---------------- - -- ------------------------ --- ---------- - ---------------------------------------------------------- - -- ----------- --- ---------- - ------------------------- ---------- ---------- ---------------- - ---- - ------------------------ --- ------------- --- ----------- ------- - --- -展开代码
结语
本文为大家带来了如何利用 PWA 实现 Web Push Notification 的详细步骤和示例代码。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6780aacfce7f4861254433d1
