两句话带你入门是webPush

前言:

经常做海外项目的一定听过或者知道webPush也就是消息推送,最近这一阵子在做PWA免不了有些需求在探索这方面,以下是调研的一些结果案例希望能帮助到大家。好了废话不多说我们直接开始!

基本概念

**  Web Push是一种用于在网页浏览器中发送实时通知的技术。它允许网站向用户发送推送通知,而无需用户在网站上打开或保持浏览器标签打开。Web Push利用浏览器的推送服务,通过请求和订阅的方式将通知推送到用户设备上。**

一般收到消息的状态是这样的,如下图:

准备环境

  1. MacBook
  2. Node v16.19.0
  3. http-server 全局指令
  4. Web-push 消息通知
  5. FCM(Firebase Cloud Messaging)

Client消息推送

Notification API是一个浏览器提供的接口,用于向用户显示通知消息。通过使用该 API,开发者可以向用户的操作系统或浏览器发送推送式的通知,下面让我们简单创建一个实例了解一下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>消息测试demo</title>
  </head>
  <body>
    <button>Click</button>
    <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
        Notification.requestPermission().then((perm) => {
          const notification = new Notification("我是测试");

          notification.addEventListener("error", (e) => {
            alert(" 请尝试用户打开权限设置 ");
          });
          if (perm === "granted") {
            const notification = new Notification("我是测试");

            notification.addEventListener("error", (e) => {
              alert(" Error: ");
            });
          }
        });
      });
    </script>
  </body>
</html>

执行全局的http-server的命令

shell 复制代码
http-server .
// 访问一下 http://localhost:8080/index.html

Tips: 详细代码可以点击 这里

Server && Client 配合使用

简单的消息通知客户端可以控制,那么如何进行服务器分发和在浏览器未开启的时候进行推送呢?我们需要借助一个工具「web-push」下面让我们简单的来看一下!

express为例

初始化依赖

shell 复制代码
yarn add body-parser express web-push -S

利用web-push生成秘钥,消息的类型需要遵守web推送消息的协议

javscript 复制代码
npx web-push generate-vapid-keys 
// or 执行任意一行都可以
npx web-push generate-vapid-keys --json

结果如下:

有了初始的秘钥我们需要Node 启动一个服务器来接口客户端的请求,比如:

javscript 复制代码
// server.js
const express = require('express');
const webpush = require('web-push');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();

app.use(bodyParser.json());

app.use(express.static(path.join(__dirname, "client")))

// 实际秘钥要进行加密存储,同时进行接口下发到客户端
const publicVapidKey = "xxxxx";
const privateVapidKey = "xxxxx";  // 跟客户端publicVapidKey保持一致。

webpush.setVapidDetails("mailto:test@test.com", publicVapidKey, privateVapidKey);

app.post('/subscribe', (req, res) => {
    const subscription = req.body;
    res.status(201).json({});
    const payload = JSON.stringify({ title: "测试消息", body: "hello啊 老铁" });

    webpush.sendNotification(subscription, payload).catch(console.log);
})

const PORT = 5001;

app.listen(PORT, () => {
    console.log(`http://localhost:${PORT}/`);
});

客户端请求

javscript 复制代码
// clent.js

const publicVapidKey = "xxxx"; // 跟server的privateVapidKey 保持一致

if ("serviceWorker" in navigator) {
  registerServiceWorker().catch(console.log);
}

async function registerServiceWorker() {
  const register = await navigator.serviceWorker.register("./worker.js", {
    scope: "/",
  });

//  详细: https://github.com/web-push-libs/web-push#using-vapid-key-for-applicationserverkey
  const subscription = await register.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: publicVapidKey,
  });

  await fetch("/subscribe", {
    method: "POST",
    body: JSON.stringify(subscription),
    headers: {
      "Content-Type": "application/json",
    },
  });
}

通过Service Worker来监听服务器推送的消息

javscript 复制代码
// worker.js

self.addEventListener('push', function(e) {
    const data = e.data.json();
    self.registration.showNotification(
        data.title,
        {
            body: data.body,
        }
    );
})

效果如下:

Tips: 详细代码可以点击 这里

FCM(Firebase Cloud Messaging)

因为做海外的关系我们通常都使用google的生态比如说是Firebase这里面集成了很多的轮子,有感兴趣的小伙伴可以研究一下这里就不在赘述了,本次的重点就是FCM(Firebase Cloud Messaging)

Firebase Cloud Messaging (FCM) :是一种跨平台消息传递解决方案,可供您可靠地传递消息,且无需任何费用。

交互界面如下:

投放的状态如下、等待投放完成即可

如果第一次的话 可能需要创建一下

其实我们了解了node服务器发送的消息后,原理也是大同小异详细可以参考文档

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div>hello 这是测试消息</div></div>
      <div class="message" style="min-height: 80px"></div>
      <div>发送消息的token:</div>
    </div>

    <script src="https://www.gstatic.com/firebasejs/9.14.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.14.0/firebase-messaging-compat.js"></script>

    <script>
      const firebaseConfig = {
        apiKey: "xxxxx",
        authDomain: "xxxxx",
        projectId: "xxxxx",
        storageBucket: "xxxxx",
        messagingSenderId: "xxxxx",
        appId: "xxxxx",
        measurementId: "xxxxx"
      };

      const app = firebase.initializeApp(firebaseConfig);
      const messaging = firebase.messaging();
      messaging
        .getToken({
          vapidKey: `xxxxx`,
        })
        .then((currentToken) => {
          if (currentToken) {
            document.querySelector("body").append(currentToken);
            sendTokenToServer(currentToken);
          } else {
            setTokenSentToServer(false);
          }
        })
        .catch((err) => {
          console.log(err);
          // if error
          setTokenSentToServer(false);
        });

      messaging.onMessage((payload) => {
        console.log("Message received ", payload);
        const messagesElement = document.querySelector(".message");
        const dataHeaderElement = document.createElement("h5");
        const dataElement = document.createElement("pre");
        dataElement.style = "overflow-x: hidden;";
        dataHeaderElement.textContent = "Message Received:";
        dataElement.textContent = JSON.stringify(payload, null, 2);
        messagesElement.appendChild(dataHeaderElement);
        messagesElement.appendChild(dataElement);

        Notification.requestPermission().then((permission) => {
          if (permission === "granted") {
            const notification = new Notification(payload.notification.title, {
              body: payload.notification.body,
            });
            notification.onclick = (event) => {
              event.preventDefault(); 
              window.open(payload.data.link, "_blank");
            };
          }
        });
      });

      function sendTokenToServer(currentToken) {
        if (!isTokenSentToServer()) {
          setTokenSentToServer(true);
        } else {
          console.log("Token already available in the server");
        }
      }
      function isTokenSentToServer() {
        return window.localStorage.getItem("sentToServer") === "1";
      }
      function setTokenSentToServer(sent) {
        window.localStorage.setItem("sentToServer", sent ? "1" : "0");
      }
    </script>
  </body>
</html>

Service Worker 部分

javscript 复制代码
// firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/9.14.0/firebase-app-compat.js')
importScripts('https://www.gstatic.com/firebasejs/9.14.0/firebase-messaging-compat.js')

const firebaseConfig = {
    apiKey: "xxxxx",
    authDomain: "xxxxx",
    projectId: "xxxxx",
    storageBucket: "xxxxx",
    messagingSenderId: "xxxxx",
    appId: "xxxxx",
    measurementId: "xxxxx",
  };
const app = firebase.initializeApp(firebaseConfig)
const messaging = firebase.messaging()

实现的效果如下:

Tips: 详细代码可以点击 这里

收不到消息?

以下是我在本地测试的时候遇到的问题,如果大家遇到其他的问题也欢迎补充~

Macbook没开启消息通知

Mac 电脑开发中需要在系统中开启消息通知:【系统偏好设置】=> 【通知】=> 【chrome 开启通知】

未开启chrome的实验性功能

  • 在Chrome浏览器中访问地址:chrome://flags
  • 搜索栏中搜索:notifications,找到 Enable system notifications 选项,将其选项值改为 Disabled,重启浏览器,问题解决。

最后

其实我在整理文章的时候同时也在思考一些问题,下面做了陈列

为什么国内做的少?

Web push 消息推送在海外相对较多的原因主要有以下几点:

  1. 平台支持:海外的浏览器和操作系统广泛支持 Web push 技术,包括 Chrome、Firefox、Safari 等主流浏览器,以及 Android 和 iOS 等主流操作系统。相比之下,国内浏览器和操作系统对于 Web push 的支持相对较少,限制了国内开发者开展相关业务。
  2. 开放程度:海外环境中的开发者更容易获取到 Web push 技术相关的开发文档、API 接口等资源,而国内的 Web push 相关技术多数由国内厂商自有的推送服务提供,对于外部开发者或者独立开发团队来说,参与门槛相对较高。
  3. 用户审核限制:根据国内法规和政策,App 需要完成国家相关部门的审核才能够向用户发送推送消息,这增加了国内 Web push 业务的运营成本和法规合规的要求,相比之下,海外环境中更灵活。
  4. 市场需求与文化差异:海外市场对于个性化推送、即时通知等需求较高,而且海外用户更接受优质推送服务。而国内用户普遍倾向于使用即时通信工具、社交媒体等方式获取信息和推送服务,对于 Web push 的需求相对较少。

综上所述,海外在 Web push 消息推送领域的发展较为成熟,而国内因为各种技术、法规和市场的限制,导致其规模相对较小。

当浏览器同时开启了HTTP缓存策略和Service Worker时,缓存加载的策略顺序如下:

  1. 首先,浏览器会检查Service Worker中的缓存策略。Service Worker是一个独立于网页的脚本,可以控制页面的网络请求和响应。如果Service Worker中的缓存中有匹配的资源,浏览器将直接从缓存获取资源,避免发起网络请求。
  2. 如果Service Worker中没有匹配的缓存资源,则浏览器会检查HTTP缓存。HTTP缓存是基于浏览器和服务器之间的通信协议,在HTTP响应头中使用Cache-Control、Expires等字段来定义资源的缓存行为。浏览器会根据这些字段来判断是否需要重新从服务器请求资源。
  3. 如果HTTP缓存也没有匹配的资源,浏览器会发起网络请求,从服务器获取最新的资源。

需要注意的是,Service Worker的缓存策略优先级高于HTTP缓存策略。因此,如果Service Worker中有匹配的缓存资源,即使HTTP缓存设置了不被缓存,浏览器也会优先使用Service Worker中的缓存。

参考资料:

结语

以上就是本次web push 的全部的内容,如果能帮助你的话记得点赞收藏哦~ 再见了 老baby们

相关推荐
你好龙卷风!!!几秒前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js
兔老大的胡萝卜1 小时前
threejs 数字孪生,制作3d炫酷网页
前端·3d
shenweihong2 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
齐 飞2 小时前
MongoDB笔记02-MongoDB基本常用命令
前端·数据库·笔记·后端·mongodb
巧克力小猫猿2 小时前
基于ant组件库挑选框组件-封装滚动刷新的分页挑选框
前端·javascript·vue.js
FinGet2 小时前
那总结下来,react就是落后了
前端·react.js
前端李易安2 小时前
手写一个axios方法
前端·vue.js·axios
XinZong2 小时前
【VSCode插件推荐】想准时下班,你需要codemoss的帮助,分享AI写代码的愉快体验,附详细安装教程
前端·程序员
trim2 小时前
写了个可以在工作中快速摄取知识的神器,都来体验体验
前端·产品
ErvinHowell3 小时前
文件MD5生成性能大提升!如何实现分片与Worker优化
前端·vue.js·算法