带有服务工作者的网站,托管https://121eddie.github.io/并在Chrome 66.0中运行。3359.181
/索引。html在每次加载时正确跟踪以下注册
<script type="text/javascript">
window.addEventListener('load', async function(){
if ( 'serviceWorker' in navigator ) {
try{
var registration=await navigator.serviceWorker.register('serviceWorker.js');
console.log('ServiceWorker enregistré avec le scope: ', registration.scope);
document.getElementById('worker').innerHTML='serviceWorker.js actif';
document.getElementById('cache').innerHTML='Cache actif';
}catch (err){
console.log(err);
}
}else{window.alert('Votre navigateur ne supporte pas les Service Workers. Ce site ne fonctionnera pas en mode offline');};
});
第一次运行时,/serviceWorker。js执行“激活”事件,正确获取缓存名称并缓存文件
var cache;
self.addEventListener('install', event => {//lors du chargement de index.html
self.skipWaiting();//il supplante tout de suite l'ancien
console.log("ServiceWorker installé");
});
self.addEventListener('activate', async function(event){
self.clients.claim();//le nouveau service worker prend le contrôle de toutes les pages ouvertes de l'appli web progressive
console.log("ServiceWorker activé");
if (navigator.onLine){
var oReq = new Request('version.txt?date='+new Date().getTime(), {method:'get'});
var response=await fetch(oReq);
var result=await response.text();
console.log('Nouvelle version du cache: '+result);//a distance: [object promise]
cache= await caches.open(result);
console.log('cache:'+cache);
for (var i=0;i<caches.length;i++){
if (caches[i]!=cache){
caches[i].delete();
}
}
try{await cache.addAll(['index.html','styles.css','traitement.js']);//en localhost: TypeError: Request failed
}catch (err){
console.log(err);
}//tout sauf version.txt //pas de résultat
}
});
//ServiceListener standard qui met en cache tout ce qui passe
//prévoit un chargement online avec mise en cache si quelquechose manque
self.addEventListener('fetch', async function(event){
console.log('Traitement du fetch '+event.request.url);
if(event.request.url.includes('version.txt')){
console.log('On laisse passer '+event.request.url);
return fetch(event.request);
}else{
// Try to get the response from a cache.
try{var cachedResponse = await cache.match(event.request);
}catch(err){console.log(event.request+'not cached')}
// Return it if we found one.
if (cachedResponse){
console.log('on sert '+event.request.url+' depuis le cache');
return cachedResponse;
}
// If we didn't find a match in the cache, we don't use the network (return fetch(event.request);)
}
});
在第二次运行时,不会触发“激活”(没有日志跟踪,没有获取)。
在第三次运行中,甚至不再触发“抓取”。这意味着脱机请求不被应答。出什么问题了?
我希望每次加载index.html时都要获取缓存版本。我验证navigator.online以避免无用和错误的请求。
我发现:这是一个范围问题。我得把页名前的斜杠去掉
这与渐进式Web应用程序中使用的serviceworker API有关。有人能帮我理解服务人员安装事件和激活事件之间的区别吗? 以下是我的理解, 安装事件是注册服务辅助程序后发生的第一个事件 除了上面的陈述,我的问题是两个事件之间到底有什么区别,它们都是一个接一个地运行的,如果是这样,为什么我们需要两个事件? 更新:共享可能有帮助的资源。我正在读这个。https://developers.goog
我创建了react应用程序,它使用股票服务人员缓存文件。我希望该应用程序是一个可下载的PWA,但每当我更新(与heroku) 我是否错过了文档中的一些配置,以便在其为PWA时启用自动更新?或者我可以做些什么来在更新时强制刷新。(我读过这是一个糟糕的UI,但我对此没有意见) 注意:从PC上的浏览器查看时,它会按预期工作。(选项卡全部关闭时更新)
我有个很基本的问题 我正在努力了解Service Worker的生命周期,或者更好地了解实际情况下初始化和更改状态的内容。 我现在有两个问题: 1-在<代码>chrome://inspect/#service-工人始终有2行ou 3行,显示所有服务工人都以相同的PID运行。为什么?为什么不止一个? 2-当我在刷新时检查我的服务人员时,我得到以下信息: #566已激活并正在运行[停止] 这是什么意思
我有一个用于缓存图像的服务人员,这个服务人员只在前端模板中注册,但它仍会不断扩展到我的管理模板中。 这导致我的表单在验证令牌受到影响时表现得不可预测。 用一些安慰。日志我认为安装事件是在进入请求页面之前触发的,但我无法确定当前/下一个URL。 如何防止服务人员扩散到管理面板并干扰页面?我只想缓存资产。 就相关而言,这是我的服务人员:
我在这个链接的页面中实现的service worker演示有一些问题。我试着为这个演示尽可能地减少代码,但是粘贴到这里太长了。 一个问题是,当页面完全加载时,我转到Chrome devtools的“应用程序”选项卡,我在缓存中看到了很多内容: 不清楚为什么有这么多缓存...可能是我正在加载的字体,但仍然...似乎很大。 更令人担忧的是,当我单击该部分中的按钮(所有选项均已打勾)时,饼图中红色的部分
如何自定义@角/服务工作者?我知道在npm_modules文件夹内修改是不合适的。我遇到了一个教程,作者创建了一个额外的2 js文件。其中一个文件包含服务工作人员代码,而另一个文件包含导入ngsw-worker.js文件和自定义服务工作人员文件的“导入脚本()”。它工作正常,自定义服务辅助角色监听安装事件,但是当涉及到读取事件时,它不会通过这个读取事件监听器。我没有得到这个函数里面的控制台。我不知