Question

服务工作者脚本为空

我正在尝试在我的Web应用程序中实现service workers，但是我发现没有任何效果。我得到了服务人员启动的确认，但是当我尝试在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中手动注销服务工作者来对其进行更新，但是它并不总是以这种方式更新，有时需要多次尝试

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

编辑* 我注意到服务工作者尝试安装然后消失。示例-服务工作者＃12处于活动状态并且正在运行。我刷新，然后第二个服务人员＃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）时，会发生问题。已经访问过该网站的任何人都在运行旧的服务人员，因此将看到脱机而不是脱机2.0

如果有人希望看到正在发生的事情，则指向页面的链接

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

空白的Service Worker脚本

0 个答案: