Service Worker在渐进式Web应用中没有自动更新
Service Worker not getting updated automatically in Progressive Web Application
当我改变service worker中的一些代码时,我希望在浏览器中更新以前的service worker。我读到service-worker.js中的任何变化都会自动在浏览器中刷新它这是我的service worker代码:
var dataCacheName = 'demo-v5';
var filesToCache = [
'/',
'/Home/Index',
'/Home/AboutUs'
];
self.addEventListener('install', function (e) {
console.log('[Service Worker] Install');
e.waitUntil(
caches.open(dataCacheName).then(function (cache) {
console.log('[Service Worker] Caching app shell');
return cache.addAll(filesToCache);
})
);
});
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activated');
caches.keys()
e.waitUntil(
// Get all the cache keys (cacheName)
caches.keys().then(function(cacheNames) {
return Promise.all(cacheNames.map(function(thisCacheName) {
// If a cached item is saved under a previous cacheName
if (thisCacheName !== dataCacheName) {
// Delete that cached file
console.log('[ServiceWorker] Removing Cached Files from Cache - ', thisCacheName);
return caches.delete(thisCacheName);
}
else
{
console.log('Else- ', thisCacheName);
}
}));
})
); // end e.waitUntil
// return self.clients.claim();
});
self.addEventListener('fetch', function (e) {
console.log('[Service Worker] Fetch', e.request.url);
var dataUrl = 'https://query.yahooapis.com/v1/public/yql';
if (e.request.url.indexOf(dataUrl) > -1) {
e.respondWith(
caches.open(dataCacheName).then(function (cache) {
return fetch(e.request).then(function (response) {
cache.put(e.request.url, response.clone());
return response;
});
})
);
} else {
e.respondWith(
caches.match(e.request).then(function (response) {
return response || fetch(e.request);
})
);
}
});
感谢您的回复。实际的问题是filesToCache
。根目录即"/"
var filesToCache = [
// '/',
'/Home/Index',
'/Home/AboutUs'
];
应该在这里加注释。我的service-worker类也被缓存,每次刷新后它也从缓存中挑选它。
service worker中的更改将在第二次刷新页面时反映出来。如果它在第二次刷新时没有更新,那么在Chrome开发者控制台寻找service worker错误(我希望你已经使用它)。它会在
下面Applications -> Service Worker
在chrome开发工具(最新稳定的chrome版本)。
打开Chrome开发工具点击Ctrl + Shift + I
或Right click -> Inspect Element
。
注意:如果你想让service worker在第一次刷新时更新,那么将你的install事件更改为-
self.addEventListener('install', function (e) {
console.log('[Service Worker] Install');
e.waitUntil(
caches.open(dataCacheName).then(function (cache) {
console.log('[Service Worker] Caching app shell');
return cache.addAll(filesToCache);
}).then(function(e){
return self.skipWaiting();
})
);
});
相关文章:
- Web应用程序,将成员状态更新为其他成员
- React应用程序:道具在下一个事件后更新
- 如何使 NgJsTree 应用模型更新
- 应用程序更新其网站
- 让NodeJS应用程序使用NPM进行自我更新
- 通过javascript清除并更新html5应用程序缓存
- 如何在不按ctrl+F5的情况下更新我的Web应用程序(chrome、mozilla、IE8+)更改
- Phonegap应用程序数据库版本在更新后保留
- Heroku Ruby on Rails应用程序don't更新公共/资产目录中的未消化资产
- 发布后的应用程序在几分钟后停止更新更新面板
- php使用ajax生成html表,以应用用户操作,如删除、更新和编辑
- 如何更新日期?当我运行应用程序时,它被卡住了
- 为什么在Firefox更新之后JQuery不能在我的MVC 4应用程序中工作
- Phonegap:灵活的iOS应用程序更新(无应用商店)
- 更新应用程序布局图标
- 在 React + Flux 中从子项更新应用程序状态
- windows 8由于Javascript应用程序中的xml缓存而无法更新应用程序数据
- 如何将工厂的更新应用于视图
- 如果正在更新应用程序缓存,请阻止ajax调用
- node.js:更新应用程序而无需停止并再次运行