标签:php javascript caching progressive-web-apps
我在我的渐进式网络应用程序中使用缓存优先策略,我想支持离线浏览.我注意到离线浏览工作正常,但是当我更新网站上的内容时,它仍然显示旧的东西.我不确定我的代码有什么问题,因为我希望它在加载离线之前检查是否有更新内容.我有manifest.json,Service-worker.js,Offlinepage.js和main.js.
这是我使用的service-worker.js代码:
//service worker configuration
'use strict';
const
version = '1.0.0',
CACHE = version + '::PWA',
offlineURL = '/offline/',
installFilesEssential = [
'/',
'/manifest.json',
'/theme/pizza/css/style.css',
'/theme/pizza/css/font-awesome/font-awesome.css',
'/theme/pizza/javascript/script.js',
'/theme/pizza/javascript/offlinepage.js',
'/theme/pizza/logo.png',
'/theme/pizza/icon.png'
].concat(offlineURL),
installFilesDesirable = [
'/favicon.ico',
'/theme/pizza/logo.png',
'/theme/pizza/icon.png'
];
// install static assets
function installStaticFiles() {
return caches.open(CACHE)
.then(cache => {
// cache desirable files
cache.addAll(installFilesDesirable);
// cache essential files
return cache.addAll(installFilesEssential);
});
}
// clear old caches
function clearOldCaches() {
return caches.keys()
.then(keylist => {
return Promise.all(
keylist
.filter(key => key !== CACHE)
.map(key => caches.delete(key))
);
});
}
// application installation
self.addEventListener('install', event => {
console.log('service worker: install');
// cache core files
event.waitUntil(
installStaticFiles()
.then(() => self.skipWaiting())
);
});
// application activated
self.addEventListener('activate', event => {
console.log('service worker: activate');
// delete old caches
event.waitUntil(
clearOldCaches()
.then(() => self.clients.claim())
);
});
// is image URL?
let iExt = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].map(f => '.' + f);
function isImage(url) {
return iExt.reduce((ret, ext) => ret || url.endsWith(ext), false);
}
// return offline asset
function offlineAsset(url) {
if (isImage(url)) {
// return image
return new Response(
'<svg role="img" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title>offline</title><path d="M0 0h400v300H0z" fill="#eee" /><text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text></svg>',
{ headers: {
'Content-Type': 'image/svg+xml',
'Cache-Control': 'no-store'
}}
);
}
else {
// return page
return caches.match(offlineURL);
}
}
// application fetch network data
self.addEventListener('fetch', event => {
// abandon non-GET requests
if (event.request.method !== 'GET') return;
let url = event.request.url;
event.respondWith(
caches.open(CACHE)
.then(cache => {
return cache.match(event.request)
.then(response => {
if (response) {
// return cached file
console.log('cache fetch: ' + url);
return response;
}
// make network request
return fetch(event.request)
.then(newreq => {
console.log('network fetch: ' + url);
if (newreq.ok) cache.put(event.request, newreq.clone());
return newreq;
})
// app is offline
.catch(() => offlineAsset(url));
});
})
);
});
解决方法:
在链接的src中添加?[VERSION].
例如:
<script type="text/javascript" src="your_file.js?1500"></script>
每次更新代码时,只需在您的版本中添加一个数字.
实际上这是重复的问题look here for other解决方案.
标签:php,javascript,caching,progressive-web-apps 来源: https://codeday.me/bug/20190701/1349877.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。