空白 Service Worker 脚本

Question

Service Worker 脚本为空

我正在尝试在我的 Web 应用程序中实现service workers但是我注意到没有任何效果。 我得到确认 Service Worker 已启动，但是当我尝试在 chrome 工具中查看它时，它显示了一个空白文档。 控制台日志等的所有努力都没有成功，这让我相信该文件确实是空白的，尽管它显然不是。

我尝试取消注册服务工作者并手动更新。

索引脚本

    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('sw_basic.js')
      .then(function(reg) {
        // registration worked
        console.log('Registration succeeded. Scope is ' + reg.scope);
      }).catch(function(error) {
        // registration failed
        console.log('Registration failed with ' + error);
      });
    }

服务人员脚本

    var CACHE_NAME = 'my-site-cache-v1';
    var urlsToCache = [
      './', './index.php',
      './profile.php',
      './support.php',
      './img/dance3-min.png',
      './css/agency',
      './css/agency.min.css',
      './css/eventform.css',
      './css/loginmodal.css',
      './css/profile.css',
      './css/support.css',
      './css/table.css',
      './css/timer.css'
    ]



    self.addEventListener('install', function(event) {
      event.waitUntil(
        caches.open(CACHE_NAME)
        .then(function(cache) {
          console.log('Opened Cache');
          return cache.addAll(urlsToCache);
        })
      );
    });



    self.addEventListener('fetch', function(event)) {
      event.respondWith(
        caches.match(event.request)
        .then(function(response) {
            if (response) {
            console.log('Successfully fetched resource from chache: ${event.request.url}');
            return response;
          } else {
            console.error('Failed to fetch resource: ${event.request.url}');
          }
          return fetch(event.request);
          }
        )

      )

    }

编辑* 我已经通过更改 js 文件的名称并在 chrome 中手动取消注册 service worker 来更新它，但是它并不总是以这种方式更新，有时需要多次尝试

我仍然觉得必须有更好的方法来做到这一点，并且在所有教程/文档中，它似乎应该安装新的并在卸载所有选项卡后激活，但它甚至根本不安装更新的选项卡。

编辑*我注意到服务工作者尝试安装然后消失。 示例 - Service Worker #12 处于活动状态并正在运行。 我刷新，然后第二个 service worker #24 正在安装，然后突然消失了。 在这一点上，我真的不知道发生了什么其他提要说它是缓存最大年龄的问题，但我在 htaccess 中将它设置为 0

Cache-Control: max-age= 0

编辑*我尝试将服务工作者带到不同的页面，删除缓存并尝试让它更新。

目前我的索引看起来像

<html>
  <head>

  <script>
  if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/beta/sw.js', {scope: '/beta/'})
  .then(function(reg) {
    // registration worked
    console.log('Registration succeeded. Scope is ' + reg.scope);
  }).catch(function(error) {
    // registration failed
    console.log('Registration failed with ' + error);
  });
}
    </script>
</head>
online page v2.0
</html>

服务工作者看起来像

self.addEventListener('install', function(event) {
  console.log("SW installed");
});

self.addEventListener('activate', function(event) {
  console.log("SW activated");
});


self.addEventListener('fetch', function(event) {
  console.log("Hijacked Signal");
  event.respondWith(new Response("offline page"));
});

当用户在访问页面后刷新文本从在线变为离线时，此操作有效。 当我更改所需的文本（例如离线 2.0）时会出现问题。 任何已经访问过该网站的人都在运行旧的 Service Worker，因此将看到离线而不是离线 2.0

如果有人希望看到正在发生的事情，请提供该页面的链接

https://pakcollegelive.tk/beta/index.php

Answer 1

我以为我最好为遇到同样问题的其他人回答这个问题。 事实证明，无论出于何种原因，Cloudflare 都无法很好地处理 Service Worker 文件。 在我的情况下使用 Cloudflare 并不是必须的，因此禁用它可以解决问题。

空白 Service Worker 脚本

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-11-07 01:46:01

空白 Service Worker 脚本

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-11-07 01:46:01

解决方案1
0 已采纳 2021-11-07 01:46:01