问题标签 [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 投票
2 回答
631 浏览

javascript - 在 fetch 事件侦听器中获取服务工作人员范围

我想在 fetch 事件侦听器中访问我的服务人员的范围。我计划的解决方法是使用window.location.host,但window在服务人员内部不可用。我还尝试使用 ServiceWorkerRegistration.scope ( MDN doc ),它会返回我想要的值,但这在 fetch 事件处理程序中也无法访问。

我希望有类似的东西event.scope(在注册处理程序中可用),但用于获取处理程序。这可能吗?

0 投票
2 回答
2654 浏览

javascript - If statement for specific event.request

I have the following code in my service worker index.js to show all the event request urls:

With this all the request url are listed in the console. What i need is a simple if statement to check if the request url ends with .jpg. so far i tried it with if === '.jpg' or variations or with image/jpg but it does not do the trick.

0 投票
1 回答
1187 浏览

javascript - 如何从服务工作者对象调用反应类的函数?

我正在尝试使用我自己的服务人员在反应网络中进行非侵入式更新。我想在网站有新更新时显示通知。我正在使用一个组件来处理服务工作者逻辑。问题是我不知道如何在服务工作者的事件侦听器中调用我的类的函数,其中 this 引用了服务工作者本身。有小费吗?这是处理 service worker 的类:

0 投票
2 回答
463 浏览

gwt - GWT 代码片段 (.cache.js) 不会触发 service worker fetch 事件

GWT 编译器由于代码拆分而产生代码片段(请参阅此处的详细信息)

初始下载文件命名为{alphanumeric}.cache.js(例如1805B2053A824F148DB6D05B2186F955.cache.js)和下图中的其他片段{number}.cache.js(例如1.cache.js)。

GWT 代码片段

我正在尝试使用 Service Worker 开发 GWT 应用程序,因为我希望该应用程序可以离线工作。一旦缓存并离线,初始下载文件的 GET 请求会触发 ServiceWorker 中的 FETCH 事件,但单个代码片段不会触发该事件。出于某种原因,他们似乎绕过了 Service Worker。

如需演示,请查看https://gwt-pwa-demo.herokuapp.com/pwademo.html上的应用程序。这是一个使用 Service Worker 的 GWT 应用程序。这不是我的应用程序,我只是将其用于演示。

当您加载应用程序时,所有文件都将被缓存。没有从 chrome 开发工具离线,并刷新应用程序。该应用程序仍然显示,您会注意到初始下载文件是从 Service Worker 加载的。现在点击 Paris/Berlin/London,它将加载片段 1.cache.js 等等。请注意,这些来自磁盘缓存,而不是通过 ServiceWorker 缓存存储。如果您查看控制台输出,您不会看到从 ServiceWorker Fetch 事件打印的这些片段的日志。

为了更清楚地说明,该应用程序脱机工作只是因为从磁盘缓存中提取了片段。如果磁盘缓存中不存在这些片段,则应用程序将无法运行。即使碎片存在于缓存存储中,由于 ServiceWorker 无法拦截这些请求,它们也不会被加载。请按照以下步骤查看实际情况。

  1. 假设您已经加载了一次应用程序,请打开开发工具 -> 应用程序 -> 清除存储并清除站点数据。确保缓存存储中的缓存也被清除。
  2. 现在再次加载应用程序https://gwt-pwa-demo.herokuapp.com/pwademo.html
  3. 将再次创建缓存,您将在缓存中看到片段。
  4. 在您的开发工具打开时,使用 Chrome 中的“空缓存和硬重新加载”重新加载应用程序。
  5. 这将清除磁盘缓存,但缓存存储仍然存在。
  6. 离线并刷新应用程序,初始应用程序仍从缓存存储加载。
  7. 但是当您单击触发加载代码片段的巴黎或伦敦时,它会失败。

在此处输入图像描述

0 投票
2 回答
2173 浏览

javascript - 服务人员:async await 与 waituntil 结合使用无法正常工作

async/await在使用语法时,我正在为服务工作者的承诺而苦苦挣扎。
以下情况:我收到了推送通知并想处理点击事件。如果我使用“旧”语法,thencatch可以迭代客户端列表并对其进行处理。如果我使用我喜欢的方式,async/await它不会做任何事情。

0 投票
1 回答
1341 浏览

javascript - 获取事件未收到请求标头

似乎服务工作者内部的 fetch 事件没有接收请求标头,尽管它在 MDN 文档中有所说明:

您可以通过调用 FetchEvent 返回的 Request 对象的参数来检索有关每个请求的大量信息:

event.request.url
event.request.method
event.request.headers
event.request.body

从主线程获取资源的代码:

在 SW 文件中获取事件处理程序:

记录每个 fetch 事件的标头给我一个空对象:

标头{}

这使我无法缓存仅需要这两个标头的特定请求。不需要凭据。我错过了什么吗?

0 投票
3 回答
919 浏览

javascript - 用于请求根路径的服务工作者“获取”事件永远不会触发

我正在尝试设置我的Service Worker,以便它拦截对主页(即主页,如www.mywebsite.com/)的请求,这最终将允许我返回一个缓存的模板。到目前为止,我的代码如下所示:

主.js:

sw.js:

我很确定服务人员设置正确,因为我确实检测到为资源请求(如/main.js/myimage.png)而触发的事件。然而,问题是只有资源的事件被触发,即使我希望该事件请求路由本身(/)被触发。我错过了什么,还是应该听不同的事件?

谢谢

0 投票
0 回答
2308 浏览

service-worker - 禁用或移除 Service Worker

嗨,我想在我的服务器中停止或取消注册服务人员。通过 chrome 浏览器检查我们的服务器后,它正在运行一个服务人员。我想停止此脚本的任何执行或在服务器本身上停止它。有没有办法在不重命名服务工作者脚本额外调用 unregister的情况下阻止这种情况?

0 投票
0 回答
752 浏览

javascript - Service Worker 有 Fetch 事件但没有触发

我正在尝试从 Service Worker 获取缓存的文件,但在最新版本的 chrome 中未触发 Fetch 事件。而我收到“Fetch 处理程序存在:EXISTS”。这是我使用 chrome://serviceworker-internals/ 得到的响应

下面是我在 Windows 加载时加载的 app-sw.js

下面是 swa.js 代码,其中包含 Fetch 事件和控制台日志

0 投票
0 回答
202 浏览

javascript - 在服务工作者中执行 fetch 事件后,跨源脚本不包括在内

这是我的代码:

控制台中显示的错误是:

无法加载“facebook 脚本”请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许访问来源“ https://www.careertuts.com ”。如果不透明的响应满足您的需求,请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

Uncaught (in promise) TypeError: Failed to fetch

加载资源失败:net::ERR_FAILED

加载资源失败:net::ERR_BLOCKED_BY_CLIENT

这是服务工作者注册的代码