Service Worker无法在Node Js服务器的脱机模式下工作 [英] Service Worker not working in Offline mode with node js server

问题描述

• 我正在尝试使用离线优先策略构建 PWA .
  • 源文件的服务器是 NodeJS服务器.
  • 我目前正在 localhost 节点服务器上对此进行测试(不确定是否会产生影响吗?).
  • 服务人员+缓存看起来不错，但是在离线模式下，我只会看到Chrome离线页面.
  • I am trying to build a PWA with an offline first policy.
    • The server for the source files is a NodeJS server.
    • I am currently testing this on a localhost node server (not sure it has an impact ?).
    • Service worker + caching seems fine, but in offline mode I only get the Chrome Offline Page.

    让我们详细介绍一下:

    所提供的页面(通过 http://localhost:8080/place/test 网址)有一些客户端JS，我在其中注册了一个Service Worker:

    The page which is served (through the http://localhost:8080/place/test url) has some client side JS, in which I register a Service Worker :

    client.js

        if ('serviceWorker' in navigator) {
            navigator.serviceWorker
                     .register(rootPath+'/js/service-worker.js')
                     .then(function() { console.log('Service Worker Registered'); });
        }
    

    service-worker.js (基于Google PWA教程)

    service-worker.js (based on the Google PWA tutorial)

    var cacheName = 'myCacheVersion';
    var filesToCache = [
        '../',
        '../place/test',
        '../js/client.js',
        '../js/service-worker.js',
        "../css/style.css"
    ];
    
    
    self.addEventListener('install', function(e) {
      console.log('[ServiceWorker] Install');
      e.waitUntil(
        caches.open(cacheName).then(function(cache) {
          console.log('[ServiceWorker] Caching app shell');
          return cache.addAll(filesToCache);
        })
      );
    });
    
    self.addEventListener('activate', function(e) {
      console.log('[ServiceWorker] Activate');
      e.waitUntil(
        caches.keys().then(function(keyList) {
          return Promise.all(keyList.map(function(key) {
            if (key !== cacheName) {
              console.log('[ServiceWorker] Removing old cache', key);
              return caches.delete(key);
            }
          }));
        })
      );
      return self.clients.claim();
    });
    
    self.addEventListener('fetch', function(e) {
      console.log('[ServiceWorker] Fetch', e.request.url);
      e.respondWith(
        caches.match(e.request).then(function(response) {
          return response || fetch(e.request);
        })
      );
    });
    

    在开发工具控制台中，一切似乎都很好:

    In the Dev Tools Console, everything seems fine :

    • SW已注册
    • 缓存包含我要缓存的元素

    但是当我选中离线模式复选框并刷新我的页面网址时: http://localhost:8080/place/test ，我只能得到 Google Chrome脱机网页.

    But when I check the Offline mode checkbox and refresh my page url : http://localhost:8080/place/test , I only get the Google Chrome Offline Web Page.

    =>我在那里想念什么?(这与nodeJs吗?与localhost环境有关吗?与我的实现有关吗?)

    => What am I missing there ? (does it have to do with nodeJs ? with the localhost environment ? with my implementation ?)

    我已经为此挣扎了一段时间...

    I've been struggling with this one for a little while now...

    我已经检查了应用程序"选项卡，并且我的服务人员显示为已激活并正在运行.

    I have checked in the "Application" tab and my service worker shows up as activated and is running.

    注意:如果在这里找到类似的问题，但在那边没有令人满意的答案:推荐答案

    从根本上讲，这是与此处回答相同的问题:

    Fundamentally this is the same problem as answered here: Service worker is caching files but fetch event is never fired

    如果您在控制台中查看，则会看到虽然安装，激活，缓存和注册全部发生，但获取"不会发生.这是因为您将 Service Worker 定位在 js 下，因此出于安全原因，Chrome(等)不会将它用于除同一目录或以下目录中的 URL 之外的任何 URL.

    If you look in your console, you'll see that while the install, activate, caching, and registration all happen, the "fetch" won't. This is because you located the service worker under js, so for security reasons Chrome (etc) won't use it for any URLs except those in the same directory or below.

    如果将 client.js 和 service-worker.js 放在同一级别而不是放在 js 子目录中，它将全部开始工作.这就需要更新文件的内容，下面将显示这些文件以供参考.

    If you place your client.js and service-worker.js at the same level rather than in a js subdirectory, it will all start working. That will necessitate updating the contents of the files, which I will show below for reference.

    一个小小的警告:我愚蠢地在Windows盒子上使用IIS来解决这个问题，在那和Chrome之间，他们像死死死死地死在缓存的HTML文件和过时的JS文件位置上.我必须将它们复制到一个子目录中，以创建新的URL，以测试解决方案.

    One tiny caveat: I foolishly used IIS on a Windows box to work on this, and between that and Chrome they clung like grim death to the cached HTML files with outdated JS-file locations. I had to copy them into a subdirectory, making fresh URLs, to test the solution.

    index.html :

    <head>
    <script src="client.js"></script>
    </head>
    <body>
    <a href="cachetest.html">link to ct</a>
    </body>
    

    cachetest.html :

    <head>
    <script src="client.js"></script>
    </head>
    <body>cachetest</body>
    

    client.js :

    if ('serviceWorker' in navigator) {
        navigator.serviceWorker
                 .register('service-worker.js')
                 .then(function() { console.log('Service Worker Registered'); });
    }
    

    serviceworker.js :

    var cacheName = 'myCacheVersion';
    var filesToCache = [
        '',
        'cachetest.html',
        'client.js',
        'service-worker.js',
    //    "css/style.css"
    ];
    
    
    self.addEventListener('install', function(e) {
      console.log('[ServiceWorker] Install');
      e.waitUntil(
        caches.open(cacheName).then(function(cache) {
          console.log('[ServiceWorker] Caching app shell');
          return cache.addAll(filesToCache);
        })
      );
    });
    
    self.addEventListener('activate', function(e) {
      console.log('[ServiceWorker] Activate');
      e.waitUntil(
        caches.keys().then(function(keyList) {
          return Promise.all(keyList.map(function(key) {
            if (key !== cacheName) {
              console.log('[ServiceWorker] Removing old cache', key);
              return caches.delete(key);
            }
          }));
        })
      );
      return self.clients.claim();
    });
    
    self.addEventListener('fetch', function(e) {
      console.log('[ServiceWorker] Fetch', e.request.url);
      e.respondWith(
        caches.match(e.request).then(function(response) {
          return response || fetch(e.request);
        })
      );
    });
    

    这篇关于Service Worker无法在Node Js服务器的脱机模式下工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！