当前位置: 首页 > 知识库问答 >
问题:

服务人员未激活

鲁永福
2023-03-14

带有服务工作者的网站,托管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以避免无用和错误的请求。

共有1个答案

楚志强
2023-03-14

我发现:这是一个范围问题。我得把页名前的斜杠去掉

 类似资料:
  • 这与渐进式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文件和自定义服务工作人员文件的“导入脚本()”。它工作正常,自定义服务辅助角色监听安装事件,但是当涉及到读取事件时,它不会通过这个读取事件监听器。我没有得到这个函数里面的控制台。我不知