javascript - 空白服务工作者脚本

问题描述

服务工作者脚本为空

我正在尝试在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 中手动取消注册服务人员来更新它，但是它并不总是以这种方式更新，有时需要多次尝试

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

编辑* 我注意到服务人员尝试安装然后消失。示例 - 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

标签： javascriptservice-worker

javascript - 空白服务工作者脚本

问题描述

解决方案

推荐阅读