service-worker - 重新联机时后台同步不刷新页面
问题描述
最近我开始学习服务工作者,后台同步......我实现了服务工作者并在安装步骤中缓存了一些我想在离线时显示的文件。
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE)
.then((cache) => {
return cache.addAll([navigationIcon, offlineImage, offlineFallbackPage]);
})
);
});
当没有互联网连接时,我正在收听获取事件以捕获,因此我可以在那时显示离线页面。
self.addEventListener('fetch', (event) => {
if (event.request.mode === 'navigate' || (event.request.method === 'GET'
&& event.request.headers.get('accept')
.includes('text/html'))) {
event.respondWith(
fetch(event.request.url)
.catch(() => {
// Return the offline page
return caches.match(offlineFallbackPage);
})
);
} else {
event.respondWith(caches.match(event.request)
.then((response) => {
return response || fetch(event.request);
}));
}
});
我还添加了后台同步,所以当有互联网连接时我可以重新上线。
注册服务人员后,我添加了:
.then(swRegistration => swRegistration.sync.register('backOnline'))
我在我的服务人员中收听同步事件。
当我离线并重新在线时,没有任何反应。但是当我删除我的 fetch 事件(不显示以前缓存的离线页面)时,页面会自行恢复在线(当我有 fetch 事件时我想这样做)
有谁知道我应该添加什么,以便我的页面可以自行重新上线?
解决方案
您可以使用导航器,将其包含在缓存的主 js 文件或服务工作者 js 文件中,只需确保它已缓存
let onlineStatus = locate => {
if(navigator.onLine){
location.replace(locate)
}
}
let isOfflinePage = window.location.pathname == offlineFallbackPage ? true : false;
// kindly edit isOfflinePage to return true if it's offline page
if(isOfflinePage){
onlineStatus('index.html')
}
您可以简单地使用 location.reload() 代替
推荐阅读
- java - 为什么hadoop不能加载类?
- linux - 重新安装linux后如何恢复已删除的文件
- react-native - 我想在一个特殊孩子的新闻发布会上改变一个以上孩子的背景
- rest - Spring REST Docs - 由于输入结束,没有要映射的内容
- php - 安装模块后 composer.json 文件出错
- c# - 如何让我的 TwoSum 方法处理无序的数字?
- ember.js - 在 ember 中使用位置(如何查找)
- c++ - 如何在 C++ 中传递动态结构数组?
- pandas - 根据 $ 符号将 pandas 中的行拆分为多行
- ibm-midrange - JT400 使用 QUSER。有没有办法改变这个?