服务工作人员不能以脱机模式与节点js服务器一起工作
- 我正在尝试使用脱机的第一个策略来构buildPWA 。
- 源文件的服务器是一个NodeJS服务器 。
- 我目前正在一个本地主机节点服务器上testing这个（不确定它是否有影响？）。
- 服务人员+caching似乎很好，但在离线模式下，我只能得到Chrome离线页面 。
让我们进入细节：
通过http：// localhost：8080 / place / test url提供的页面有一些客户端JS，我在其中注册了一个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教程）
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已经注册
- caching包含我想要caching的元素
但是，当我检查离线模式checkbox，并刷新我的网页url： http：// localhost：8080 /地点/testing ，我只能得到谷歌浏览器离线网页 。
=>我在那里错过了什么？ （这是否与nodeJs？与本地环境？与我的实施？）
我一直在为这一点挣扎了一会儿。
我已经检查了“应用程序”选项卡，我的服务工作人员显示为激活并正在运行。
注意：如果在这里发现了类似的问题，但在那里没有令人满意的答案： 服务工作人员不能在使用nodejs服务器的离线模式下运行
从根本上来说，这与在此解答的问题是相同的： 服务工作人员正在caching文件，但从来没有触发提取事件
如果你看看你的控制台，你会发现，在安装，激活，caching和注册都发生时，“获取”不会。 这是因为您将服务工作人员定位在js之下，所以出于安全原因，Chrome（etc）不会将其用于任何除相同目录或以下目录之外的任何URL。
如果你把你的client.js和service-worker.js放在同一个级别而不是在js子目录下，它将全部开始工作。 这将需要更新文件的内容，我将在下面显示以供参考。
一个小小的警告：我愚蠢地使用Windows上的IIS来处理这个问题，而在这个和Chrome之间，他们像僵尸一样死守着过时的JS文件位置的HTML文件。 我必须将它们复制到一个子目录中，创build新的URL，以testing解决scheme。
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); }) ); });