服务工作人员不在离线模式下使用节点js服务器

问题描述：

我正在尝试使用脱机第一策略构建PWA。
- 源文件的服务器是NodeJS服务器。
- 我目前正在测试这个在本地主机节点服务器（不确定它有影响吗？）。
- 服务人员+缓存看起来不错，但处于离线模式我只收到Chrome离线页面。

其供应（通过http://localhost:8080/place/test网址）页面有一些客户端的JS，我在其中注册服务工作者：

client.js

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

服务worker.js（基于谷歌PWA教程）

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); 
    }) 
); 
});

在开发工具控制台，一切似乎很动听：

的SW注册
缓存包含我想缓存的元素

但是当我检查离线模式复选框并刷新我的网页网址：http://localhost:8080/place/test，我只获得Google Chrome离线网页。

=>我在那里错过了什么？（它有对的NodeJS做？与本地主机的环境？我的执行？）

我一直是这样一个，而现在有点挣扎......

我已经检查了“应用程序“选项卡和我的服务工作人员显示为激活并正在运行。

注：如果发现了类似的问题在这里，但没有令人满意的答案在那里：Service worker not run in offline mode using nodejs server

你说SW已注册; （如同你对链接到的其他问题的评论一样）是否显示在“应用程序”选项卡中？ –

是的，它显示为“激活并正在运行” –

答

从根本上说，这是同样的问题在这里得到解答：Service worker is caching files but fetch event is never fired

如果您在控制台看，你将会看到，在安装，激活，缓存和注册都发生时，“获取”不会。这是因为您找到了js之下的服务工作人员，因此出于安全原因，Chrome（etc）不会将其用于任何除相同目录或以下目录之外的任何URL。

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

一个小小的警告：我愚蠢地使用Windows上的IIS来处理这个问题，并且在Chrome和Chrome之间，他们像过时的JS文件位置一样死死抱住了缓存的HTML文件。我不得不将它们复制到一个子目录中，创建新的URL以测试解决方案。

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.js移动到我的根目录**，并对文件路径进行一些更改+缓存文件列表路径以使其工作... 稍后注意：请记住服务人员只能访问其级别或以下...非常感谢！（我提出了你的答案，但在这里是新的，它现在还没有显示......） –

谢谢！祝你好运与其他的东西。我会看看这是否也是对其他问题的答案。 –

或者，你可以！ :-) –

服务工作人员不在离线模式下使用节点js服务器

相关推荐