问题标签 [service-worker-events]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
339 浏览

service-worker - Service Worker 可以使用哪些类型的事件监听器

服务工作者中的事件监听器功能似乎是从EventTarget.addEventListener()

这是Service Worker 中经典的“获取类型”

我想知道我是否可以在服务人员中使用这些“类型”中的任何一个。

从这里:https ://developer.mozilla.org/en-US/docs/Web/Events ,我可以看到几种类型的事件侦听器,例如“点击”或“在线”等...

服务工作者接受的“类型”是否有任何限制?如果是,我如何从文档中识别这些内容?

我知道对于他们中的大多数人来说,服务人员没有任何意义,但我很想了解这在内部是如何工作的。

请注意,类型是指服务工作者中事件侦听器的第一个参数,例如“安装”、“获取”、“活动”等...

0 投票
1 回答
480 浏览

google-chrome-devtools - Service Worker -> addEventListener -> beforeinstallprompt 不会在我的计算机上为 chrome 中的给定网站运行 A2HS

我有最糟糕的一周试图弄清楚如何重置我的 Chrome 浏览器设置,因为我有一个功能齐全的网站,其中包含一个工作清单、服务工作者和 A2HS 脚本。它完美地工作,除了我个人拥有的任何带有谷歌浏览器的设备......

意思是,我有一台台式机和一部 Android 手机,两者都装有最新版本的 Google Chrome(截至 2020 年 4 月 9 日 v81.0.4044.92(官方版本)(64 位)),但我无法获取 addEventListener - > beforeinstallprompt 开火。我已经仔细检查了“应用程序”按钮,在这两种情况下我都仔细检查了我的桌面,并且我已经清除了开发人员工具 -> 应用程序下的存储空间。但是无论如何,没有什么能让我在这两个设备上调用 addEventListener -> beforeinstallprompt 。

这是真正的踢球者,它在我尝试过的其他所有人的计算机上都能完美运行!它只是拒绝在我的开发系统上工作。它必须与我自己设备上的安全设置有关,但我需要弄清楚这一点,因为它也可能发生在该网站的访问者或我客户的系统上,而且我完全没有想法,我已经已经为此工作了3天。一定有一个神奇的按钮可以在 Chrome 设置中的某个地方解决这个问题。

有什么想法吗?

非常感激。

文斯

更新

好的,我已经在一个之前甚至没有安装 Chrome 并且它也不想在那里工作的系统上对此进行了测试,所以缓存不再是问题,它一定是我的代码有问题。这就是我得到的。

显现:

服务工作者:

安装按钮:

CSS:

添加到主屏幕 (A2HS) 代码:

在 A2HS 代码中,它从不执行这一行:

我认为当我在我妻子的计算机上检查它时它起作用的原因是因为它仍在运行几周前的旧缓存版本。有任何想法吗?

0 投票
1 回答
1247 浏览

javascript - 服务工作者本身未触发服务工作者获取事件

我注意到当服务工作者脚本本身加载到浏览器中时,服务工作者的 fetch 事件不再被触发。例如,当我们有一个新版本的 service worker 时,旧的 service worker 的 fetch 事件不会被触发。结果,旧的 Service Worker 无法再检查新 Service Worker 的内容。

我确信这是可能的,我想知道这是否是一个错误,或者是否对此进行了任何更改。我在官方存储库或 W3C 草案中没有找到任何关于此更改的内容。

为了验证 fetch 事件没有被触发,我编写了一个带有版本号的小型示例 service worker(参见代码)。我已经通过以下方式对其进行了测试:

  1. 安装服务工作者的第一个版本
  2. 将版本号增加到两个。
  3. 重新加载页面 -> 以便在浏览器中安装新的 sw.js 文件。
  4. 检查 chrome 日志 -> ChromeLogs Chrome日志

示例“sw.js”:

从日志中我们可以看到,sw.js 文件没有被获取,但是在新的 service worker 安装之前,另一个文件(test.js)被获取了。我包含了 test.js javascript 文件,以查看服务人员是否在获取任何内容。所以从这个测试中我们可以看到,服务工作者脚本本身没有触发 fetch 事件。

我想知道的是,有没有办法在旧服务工作者中加载新的服务工作者 javascript 文件之前获取它?是否有任何其他事件使这成为可能?我不需要拦截脚本来执行或替换旧的服务工作者。我只想在加载新服务人员之前检查它的内容。

编辑

0 投票
2 回答
961 浏览

javascript - 在 Fetch 期间显示加载进度

我按照此代码让用户下载文件以缓存以离线显示它们:https ://serviceworke.rs/cache-from-zip.html

它可以工作,但是对于大文件可能需要一些时间,所以我想在加载 zip 文件时显示进度指示器。

我想它可以在 fetch 部分完成,但我不知道如何:https ://serviceworke.rs/cache-from-zip_worker_doc.html

0 投票
0 回答
79 浏览

javascript - 当我们使用服务工作者时,如何在每次刷新时停止增加缓存内存

我正在尝试为我的网站对服务人员做一些 POC。资产正在被缓存,但每次刷新时,缓存存储大小都会不断增加。我该如何阻止它。

这是我的服务人员代码。

第一次刷新时,缓存大小为 149KB,第二次为 263KB。它发生在 chrome 和 firefox 上,有时它会从最后一个值增加,有时会减少。

在此处输入图像描述

在此处输入图像描述

0 投票
0 回答
19 浏览

service-worker - 如何在 Service Worker addAll 中通知哪些文件或资源无法获取

我需要知道如何向客户端发送无法获取的请求:

我需要在客户端接收它。就像是:

0 投票
0 回答
774 浏览

php - PWA 自定义安装

大家好,我试过访问这个页面:https ://web.dev/customize-install/,stackover flow questions 和 google pages,但我还是写不出来。我试图用我的 PWA 应用程序实现三件事:

  1. 打开“缓存”并使用安装事件获取文件。
  2. 使用“beforeinstallprompt”侦听器防止安装默认 PWA。
  3. 显示带有“下载”按钮的引导模式。
  4. 单击该按钮时,触发安装应用程序的“获取”事件。

我能够做到 1 和 2。我在 main.js 上触发了我的模式。我在服务人员身上试过,但我做不到。模态上的下载按钮也没有

索引.php

主.js

pwabuilder-sw.js

0 投票
1 回答
217 浏览

javascript - Is there anyway to delete my users cache?

I made a sw.js file that caches my chat website so users can open in offline mode, however, the Service Worker file caused alot of issues including not being able to see new messages and alot of website crashes so I was forced to delete it. Sadly my none of my current users can delete the cache manually! NOte that I kept the sw.js file but it's now empty so is there any code I can write to delete all of my current user caches?

I don't think this is relevant but my app uses django

0 投票
1 回答
75 浏览

javascript - 更改 Service Worker 目录的后果?

正如您可能已经知道的那样,您应该将您的服务工作人员放在基本目录中,以便它具有整个项目的范围,否则某些功能(例如 navigator.serviceWorker.ready())将不可用。

我的问题是我最初将我的服务人员放在一个目录中,现在我觉得有点被困住了。

我使用服务人员来注册和处理网络推送通知,我想知道如果我将它移动到基本目录是否会丢失所有当前订阅

注意 注册的 Service Worker 必须保持不变,不应注册新的 Service Worker

0 投票
0 回答
75 浏览

javascript - 使用 Service Worker,我们如何链接更新数据调用之后的 fetch 调用的后续请求?

有什么方法可以链接同步请求和下一个后续获取请求,我们调用更新和后续获取调用?目前,我看到正在调用 fetch 调用“jsonGetMyData”并将旧数据返回给我,但是如果我在调试器中暂停此调用一秒钟,它会为我提供更新的数据。因此,在 fetch 调用之前似乎没有发生 service worker 更新,如果是这种情况,我们如何控制它以便首先发生 service worker 更新,然后只会调用 fetch ?

请指教。

下面是调用部分。

下面是示例服务工作者代码。