B. *_* B. 6 javascript localhost node.js service-worker progressive-web-apps
让我们进入细节:
提供的页面(通过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);
})
);
});
在Dev Tools控制台中,一切似乎都很好:
但是,当我选中离线模式复选框并刷新我的页面网址:http:// localhost:8080/place/test时,我只会获得Google Chrome离线网页.
=>我在那里错过了什么？(它与nodeJs有关吗？与localhost环境一起？我的实现？)
我一直在努力与这一个...现在...
我已经检查了"应用程序"选项卡,我的服务工作人员显示为已激活且正在运行.
注意:如果在这里找到类似的问题,但那里没有令人满意的答案:服务工作者不能使用nodejs服务器在离线模式下运行
从根本上说,这与此处回答的问题相同:服务工作者正在缓存文件,但从未触发获取事件
如果您查看控制台,您会看到在安装,激活,缓存和注册都发生时,"获取"不会.这是因为您找到了服务工作者js,因此出于安全原因,Chrome(等)不会将其用于除同一目录或下面的URL之外的任何URL.
如果你把你的client.js和service-worker.js放在同一级别而不是在js子目录中,它将全部开始工作.这将需要更新文件的内容,我将在下面显示以供参考.
一个小小的警告:我愚蠢地在Windows机箱上使用IIS来处理这个问题,在它和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);
})
);
});
| 归档时间： |
|
| 查看次数： |
5484 次 |
| 最近记录： |