关于缓存更新的服务工作者重新加载页面

问题描述：

我正在使用React +服务工作者+ offline-plugin为该网站创建一个具有持久缓存的服务工作者。关于缓存更新的服务工作者重新加载页面

我想告诉用户何时将新版本存储在cach中并建议刷新页面，但我不知道如何引用Service Workerand我应该听什么事件（Service Workeris由npm自动创建“离线插件“）。

标准流程今天：

网站管理员发布网站（V1）
用户访问该网站
他看到的网站（V1），而在持续高速缓存
站长网服务工作者商店页面发布新版本（V2）
用户在后台（V2）中加载新版本时，重新访问从持久缓存中看到旧版本的站点。
当用户将刷新页面，他会看到的网站版本2

新流程应该是：

V2在后台载入
一个完成弹出消息指示用户刷新页面以获取新版本。

开始=>

没有足够的细节。顺便说一下，你可以使用onmessage事件，当你有webworker的结果，你可以显示警报点击警报重新加载页面 –

您好，我已经更新了描述。 –

答

服务人员是webworker的一种特殊形式。
当您在注册表中使用sw时，例如在serviceWorkerRegistry.js中，您将可以访问多个事件。
例如

serviceWorkerRegistry.js: 

if (!navigator.serviceWorker) return; 

navigator.serviceWorker.register('/sw.js').then(function(reg) { 
    if (!navigator.serviceWorker.controller) { 
     return; 
    } 

    if (reg.waiting) { 
     console.log("inside reg.waiting"); 
     return; 
    } 

    if (reg.installing) { 
     console.log("inside reg.installing"); 
     return; 
    } 

    reg.addEventListener('updatefound', function() { 
     console.log("inside updatefound"); 
     let worker = reg.installing; 
     worker.addEventListener('statechange', function() { 

     if (worker.state == 'installed') { 
      console.log('Is installed'); 
      // Here you can notify the user, that a new version exist. 
       // Show a toast view, asking the user to upgrade. 
       // The user accepts. 
       // Send a message to the sw, to skip wating. 
       worker.postMessage({action: 'skipWaiting'}); 

     } 
     }); 
    }); 
    }); 

sw.js: 
// You need to listen for a messages 
self.addEventListener('message', function(event) { 
    if (event.data.action === 'skipWaiting') { 
    self.skipWaiting(); 
    } 
});

现在还有离线插件的问题，是它创造了SW你，并以这种方式是很难明白什么SW在做什么。
我会说，最好是创建自己的sw，这样你可以更好地理解功能。 this插件可以帮助您缓存。

答

你应该看看下面的链接： Service Worker life cycle - updates

您也可以手动更新您的服务人员通过运行这样：

navigator.serviceWorker.register('/sw.js').then((reg) => { 
    // sometime later…  
    reg.update(); 
});

你可以告诉你已经准备好了新的版本（和尚未激活）服务工作人员的install事件。
您知道，您已在服务人员的事件处理程序中加载了新版本。

关于缓存更新的服务工作者重新加载页面

相关推荐