客户端页面和 Service Worker 之间的双向通信

Workbox 和 Preact 都与这个问题没有太大关系。Workbox 允许您在 Service Worker 中使用您想要的任何其他代码,而 Preact 也应该适用于您的客户端应用程序。)

此示例页面演示了使用 来从客户端页面向服务工作人员发送消息,然后进行响应MessageChannel。客户端页面上使用的相关帮助程序代码如下所示:

function sendMessage(message) {
  return new Promise(function(resolve, reject) {
    const messageChannel = new MessageChannel();
    messageChannel.port1.

Service worker 如何与客户端通信

问题:

我一直在尝试从服务人员向客户发送消息,但是如果我使用

self.clients.matchAll()
.then((clients) => {
  clients.forEach(function(client) {
    client.postMessage({msg: 'Hello from SW'})
  })
})

即使我在浏览器中打开了一个选项卡,它也不会发送到任何客户端,但是如果我从客户端服务工作者发送消息

// client
navigator.serviceWorker.controller.postMessage({title: 'Send message from client'})

并在服务人员中

self.addEventListener('message', function(event) {
  self.clients.fetchAll()
    .then((clients) => {
      clients.forEach(function(client) {
        client.postMessage({msg: 'Hello from SW'})
     })
  

WebSocket 安全性:8 大漏洞及其解决方法

什么是 WebSocket?

WebSocket 变得越来越流行,因为它们极大地简化了客户端和服务器之间的通信。 

WebSocket 协议使用 OSI 模型应用层(第 7 层)来允许客户端和服务器执行双向(全双工)通信。这使得创建动态、实时的 Web 应用程序(例如即时消息和照片共享应用程序)成为可能。

Input elements should have autocomplete attributes

浏览器console 报

[DOM] Input elements should have autocomplete attributes (suggested: "current-password"): 

解决:

尝试改变

<input type="password" name="password">

<input type="password" name="password" autocomplete="on">

自动完成功能可让 Web 开发人员指定用户代理在填写表单字段值时提供自动帮助的权限(如果有),以及向浏览器提供有关字段中预期信息类型的指导。

 …

div嵌套div ,点击子级div不触发父级div点击事件

情况如下:

<div class="footfixed" style="cursor:pointer" οnclick="toAdvertDetail('${appPath}home/showNewsDetail?newsId=4');" >
<div class="close" onClick="event.cancelBubble = true"> </div>
</div>
<!-- 底部悬浮end -->

外层的div有一个点击跳转事件,按钮div也是一个点击事件用来隐藏整个div,产生的问题是,点击了关闭按钮了同事会触发父级div的跳转事件,

解决方法: 在子级div上增加一个事件 onClick="event.cancelBubble = true",这样就可以只触发自身的点击事件了

如何通过集群扩展 Node.js 应用程序

如何通过集群扩展 Node.js 应用程序

作者选择女性工程师协会接受捐赠,作为“为捐赠而写”计划的一部分。

介绍

当您在具有多个 CPU 的系统上运行Node.js程序时,它会创建一个默认情况下仅使用单个 CPU 执行的进程。由于 Node.js 使用单个线程来执行 JavaScript 代码,因此对应用程序的所有请求都必须由在单个 CPU 上运行的线程来处理。如果应用程序有 CPU 密集型任务,操作系统必须安排它们共享单个 CPU,直到完成。如果单个进程收到太多请求,可能会导致其不堪重负,从而降低性能。如果进程崩溃,用户将无法访问您的应用程序。

作为解决方案,Node.js 引入了该cluster模块,该模块在同一台计算机上创建同一应用程序的多个副本并让它们同时运行。它还配备了一个负载平衡器,可以使用循环算法在进程之间均匀分配负载。如果单个实例崩溃,用户可以由仍在运行的剩余进程提供服务。应用程序的性能显着提高,因为负载在多个进程之间均匀共享,从而防止单个实例不堪重负。

cluster在本教程中,您将在具有四个或更多 CPU 的计算机上使用该模块扩展 Node.js 应用程序。您将创建一个不使用集群的应用程序,然后修改该应用程序以使用集群。您还将使用该pm2模块跨多个 CPU 扩展应用程序。您将使用负载测试工具来比较使用集群的应用程序和未使用集群的应用程序的性能,并评估模块pm2

2023 年如何使用 Favicon:满足大多数需求的六个文件

是时候重新思考如何为现代浏览器制作一组图标并停止图标生成器的疯狂了。目前,前端开发人员必须处理 20 多个静态 PNG 文件,才能在浏览器选项卡或触摸屏上显示微小的网站徽标。请继续阅读,了解如何采取更明智的方法并采用适合大多数现代需求的最少图标集。