标签: service-worker-events

我有一个服务人员。这是安装事件：

self.addEventListener('install', function (event) {
    console.log('Installing Service Worker ...', event);

    return self.skipWaiting()
    .then(() => caches.open(CACHE_STATIC_NAME))
    .then(function (cache) {
        return cache.addAll([
            './file1.html',
            './file2.html'
        ])
    })
});

出于某种原因，当我编辑服务工作者代码并更新服务工作者文件 URL 中的查询参数时，它会安装但不会激活（根据 Chrome DevTools）——即使我已经调用了self.skipWaiting().

奇怪的是，如果我进入控制台，进入 service worker 的范围并输入self.skipWaiting()自己，它会立即激活。

几个小时以来，我一直试图弄清楚发生了什么，但我完全被难住了。有什么我在这里想念的吗？

使用async/await语法时，我在服务人员中无法兑现承诺。
出现以下情况：我收到了推送通知，并想处理click事件。如果我将“旧”语法与then和一起使用，catch我可以遍历客户端列表并对其进行处理。如果我使用我偏爱的方式async/await将不会执行任何操作。

self.addEventListener("notificationclick", event => {

  // is working
  event.waitUntil(self.clients.matchAll().then(clientList => {
    console.log(clientList);
  }));

  // is not working
  event.waitUntil(async () => {
    const clientList = await self.clients.matchAll();
    console.log(clientList);
  });
});

我有这个非常基本的问题

我正在努力了解服务工作者的生命周期,甚至更好地理解实际上初始化和改变状态的内容.

我现在有两个问题:

1 - chrome://inspect/#service-workers总共有2个3行,显示服务工作者都使用相同的PID运行.为什么？为什么不只有一个？

2-当我在刷新时检查我的服务人员时,我得到了这个:

• #566已激活且正在运行 [停止]
• #570等待激活 [skipWaiting]

那是什么意思？什么是566什么是570？我想他们是sw的实例,但为什么有两个呢？为什么570还在等待？我该怎么做以确保它将被注册安装激活？

3-一般问题

• 什么在正常生命周期中结束安装事件？
• 什么触发的激活在正常的生命周期事件？

的index.html

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('./sw.js')
      .then(function(registration) {
        // successful
        console.log('Success: ', registration);
      }).catch(function(err) {
        // registration failed
        console.log('Error: ', err);
      });
    });
  }
  </script>

sw.js

var cache_name = 'v1';

var cache_files = [
  './',
  './index.html',
  './style.css'
]

self.addEventListener('install', function(e){
  console.log('SW install:', e);
  e.waitUntil(
    caches.open(cache_name)
    .then(function(cache){
      console.log('cache', cache);
      return cache.addAll(cache_files);
    })
    .then(function(cache){
      console.log('Cache completed');
    }) …

在中app.js，我正在检查导航器对象中是否存在serviceWorker，如果可用，请注册SW。

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./service-worker.js', { scope: './' })
        .then(function(registration) {
            console.log("Service Worker Registered!");
        }).catch(function(err) {
            console.log("Service Worker not registered!", err);
        });
}

尝试注册软件时，我在Firefox中收到以下错误。我还确保该service-worker.js文件在src目录下。

在Firefox（版本59.0.2）中检查我的about：config，我启用了服务辅助程序和存储api。因此，这不应该是一个问题。

PS：相同的代码在Chrome上可以正常使用。

当手机未打开应用程序（在后台）时，是否可以与服务工作者从本地存储中读取并跟踪PWA中的地理位置

到目前为止，我的研究表明没有，而且我发现PWA需要对位置服务开放。

谢谢，

我认为这会相当简单，但我很难成功发送响应，然后修改存储在服务工作线程内的缓存中的克隆响应。

最终，我想将缓存的数据附加到获取的时间和日期。我正在使用我的服务工作人员首先从网络获取此数据，如果数据不可用，则回退到缓存。

这是我的服务人员的代码

        event.respondWith(
            fetch(event.request)
            .then(function(e) {

                console.log('response', e)
                var responseToCache = e.clone();

                responseToCache.json().then(function(data) {
                    var today = new Date();
                    var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
                    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
                    data.cached = { date: date, time: time }
                    return data
                })

                // var init = {
                //     status: response.status,
                //     statusText: response.statusText,
                //     headers: { 'X-Foo': 'My Custom Header' }
                // };

                // response.headers.forEach(function(v, …

这看起来相当基本，但我在这里找不到答案。

MDN 官方文档显示，获取导航回应用程序的通知应如下所示：

self.addEventListener("notificationclick", (event) => {
    event.notification.close();
  
    event.waitUntil(
      clients
        .matchAll({
          type: "navigate",
        })
        .then((clientList) => {
          for (const client of clientList) {
            if (client.url === "/" && "focus" in client) return client.focus();
          }
          if (clients.openWindow) return clients.openWindow("/");
        }),
    );
  });

它在浏览器中工作正常，但如果我将网站安装为 PWA，它只会重定向到浏览器中打开的网站（如果存在）或重定向到空白页面。

有什么方法可以获取通知以重定向到其“来源”，或者理想情况下重定向到已安装的 PWA。

注意：我不清楚此示例中的 Web Worker 是否与已安装的 PWA 一起在隔离环境中运行，或者仍在主浏览器环境中运行 - 这似乎与其客户端列表相关。

嗨,我在快递上有一个生成HTML的ejs模板.我已在此模板中编写了我的服务工作者注册码,这对于网站的所有页面都是通用的,因此,注册码最终会出现在网站的每个页面上.因此,在每次用户访问时,运行服务工作者注册代码,我认为这是不好的.如何使这个代码只在第一次访问用户时运行？

请在下面找到我的代码:

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      var hashes = {};
      ["appCss", "appJs"].map((val,idx) => {
        let prop;
        if(document.getElementById(val)) {
          prop = val.toLowerCase().indexOf("css") == -1 ? "src" : "href";
          hashes[val] = document.getElementById(val)[prop];
        }
      });
      hashes = JSON.stringify(hashes);
      navigator.serviceWorker.register(`/service-worker.js?hash=${encodeURIComponent(hashes)}`).then(function(registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      }, function(err) {
        console.log('ServiceWorker registration failed:', err);
      });
    });
  }
</script>

我的同步事件没有触发，我使用Chrome 网络服务器在localhost:5000上的台式 PC 上提供页面，并使用 fetch api 在单独的端口localhost:1337上将数据发布到本地开发服务器。已经关闭了我的 wifi、chrome 网络服务器以及 chrome devtool 中的离线切换，但仍然没有触发我的事件。

这是我在 serviceworker.js 片段中用于同步的代码

self.addEventListener('sync', function(event) {   
  if (event.tag == 'syncrhronizeOfflineData') 
  {     
    event.waitUntil(syncrhronizeData());   
  } 
}); 
async function syncrhronizeData() {   
  console.log('now synchronizing data...');   
  //first get all favourites in the localDB and post them to server 
  const favData = await window.localforage.getItem('restaurants')
    .filter((r) => r.isoffline );   
  console.log('favdata', favData); 
}

还没有真正发布到数据库，尝试控制台favdata但没有收到消息，事件没有被触发。

我注册 serviceworker 的 main.js 中的片段

/**  * Service worker functions below  */ 
registerServiceWorker = …

我想做的事

我正在尝试拦截第三方网站的获取事件并在 Chrome 扩展程序中修改其请求正文。事件处理程序不允许修改请求正文chrome.webRequest.onBeforeRequest。但看起来常规服务工作人员确实有能力侦听和修改 fetch 事件，并使用我自己的响应手动响应请求，这意味着我应该能够拦截请求，修改正文，将修改后的请求发送到API，然后使用我修改后的请求的响应来响应原始请求。

问题

正如我在“网络”面板中看到的那样，尽管网站触发了大量的获取事件，但这些事件处理程序似乎都没有被触发。

// background.js

self.onfetch = (event) => console.log(event.request); // never shows

// or

self.addEventListener("fetch", (event) => {
  console.log(event.request); // never shows
});

console.log我可以通过查看Service Worker 控制台中出现的其他日志（顶级日志以及事件触发的日志）来"install"验证Service Worker 是否正在运行

// background.js

console.log(self); // works

self.addEventListener("install", (event) => {
  console.log(event); // works
});

假设

提取事件处理程序是否不会被触发，因为出于安全原因不允许扩展服务工作人员访问这些事件处理程序？这是有道理的，我只是没有在任何地方明确地看到这个记录，所以最好知道这是否确实是一个平台限制或者我是否做错了什么。

替代解决方案？

如果这确实是扩展平台的限制，是否有其他方法可以使用 Chrome 扩展来修改第三方网站上的请求正文？