前言
之前看到了两篇文章,一篇讲连接到网络时重载页面的,一篇讲前端检测升级的,诞生了一些自己的思路和想法,写下了这篇文章。
资源加载失败重载方案
不知道你们是否体验过 Chrome 加载一个网页失败后(网络断开时),自动重载网页的行为(加载成功前以指数级回退的时间间隔尝试重新加载页面),虽然大部分时候可能比较鸡肋,但雀氏比什么都不作为有更好的用户体验,所以我也在自己的站点中加入了这个功能,这里讨论下中间的过程。
资源加载失败的侦测
使用 window.onerror
可以侦听到 js 的运行时错误和资源加载失败错误:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
window.addEventListener('error', () => {
console.log('error');
}, true);
</script>
<img src="not-found.png" />
<script src="not-found.js" ></script>
</body>
</html>
复制代码
控制台输出:
注意: 必须以捕获模式侦听,否则不起作用,另外无法捕获动态导入导致的错误:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
window.addEventListener('error', () => {
console.log('error');
}, true);
import('not-found');
</script>
</body>
</html>
复制代码
控制台输出:
可以看到并没有捕获到动态导入的错误,也就无法捕获到主流前端框架路由懒加载时出现的错误,针对动态导入,我们可以使用 PerformanceObserver。
PerformanceObserver 是浏览器提供的一个性能观察工具,在影响浏览器性能的时间节点中会触发指定的事件,他的简单使用如下:
const observer = new PerformanceObserver(function (list, obj) {
const entries = list.getEntries();
for (const i = 0; i < entries.length; i++) {
console.log(entries[i]);
}
});
observer.observe({ entryTypes: ["resource"] });
复制代码
{ entryTypes: ["resource"] }
表明我们要观察的性能条目类型集是资源,他的效果如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
const observer = new PerformanceObserver(function (list, obj) {
const entries = list.getEntries();
for (let i = 0; i < entries.length; i++) {
console.log(entries[i]);
}
});
observer.observe({ entryTypes: ["resource"] });
import("./fsdfsdf");
</script>
</body>
</html>
复制代码
可以通过 responseStatus
状态码判断是否加载成功:
当然它也可以侦测到资源加载失败,兼容性也还不错,不需要侦测运行时错误的话可以完全替代 window.onerror
。
关于错误侦测最后扩展两个事件:
rejectionhandled:捕获 rejected
且添加了错误处理程序的 Promise
,有个坑点是只能捕获 rejected
后再添加错误处理程序的 Promise
,作用不大,比如:
window.addEventListener('rejectionhandled', () => {
console.log('rejectionhandled');
});
// 这个无效,无法触发 rejectionhandled
Promise.reject('unknown').catch(() => {});
// 这个有效,触发 rejectionhandled
const p = Promise.reject('unknown');
setTimeout(() => {
p.catch(() => {});
}, 0);
复制代码
unhandledrejection:和 rejectionhandled
相反,未被处理的 Promise
错误都会触发此事件,比如:
window.addEventListener('unhandledrejection', () => {
console.log('unhandledrejection');
});
// 这个有效,触发 unhandledrejection
Promise.reject('unknown');
// 这个无效,错误被处理了
Promise.reject('unknown').catch(() => {});
复制代码
错误重载
function errorHandle() {
// 离线模式下才进入下一步
if (!window.navigator.onLine) {
const _listener = () => {
window.removeEventListener('online', _listener)
// 提示用户并延时三秒重载页面
warning('即将在三秒后重载页面。');
sleep(3000, () => window.location.reload());
};
// 侦听网络连接
window.addEventListener('online', _listener);
}
}
const observer = new PerformanceObserver(function (list, obj) {
const entries = list.getEntries();
// 判断是否有加载失败的资源,状态码可自定义
const hasError = entries.some((entrie) => [0, 404].includes(entrie.responseStatus))
hasError && errorHandle();
});
observer.observe({ entryTypes: ["resource"] });
复制代码
很简单的策略,只在资源失败且网络离线的情况下添加网络在线侦听事件,并在网络可用时重载页面,这里有个问题是 online
事件触发时网络不一定是可用的,可以替换自己的逻辑来侦听网络连接,比如 navigator.connection
。
前端升级检测思路
这个思路是基于 service worker,因为之前搞自己的博客对 service worker 有一定的研究,所以提到前端升级检测时就想到了它。
具体的思路是这样的:service worker 被激活后能够拦截作用域内的网络请求,在每次请求时调用 ServiceWorkerRegistration.update()
方法,此方法会促使浏览器立即获取注册的 service worker 脚本并检测是否有升级,如果有升级则开始安装新的 service worker,当 service worker 被安装后还需激活,此时可以提示用户并强制新的 service worker 接管页面。
service worker 检测升级的方式是对前后两个 service worker 脚本进行对比,所以每次打包部署时需要修改 service worker 加班,一般定义一个版本值。
一个简单实现如下:
// 主线程
if ('serviceWorker' in window.navigator) {
// 注册 service worker
window.navigator.serviceWorker
.register('/sw.js')
.then((serviceWorker) => {
if (serviceWorker.waiting) {
// 新的 service worker 已安装,等待激活,可提示用户
return;
}
// 侦听可更新事件
serviceWorker.addEventListener('updatefound', () => {
// 安装中的 service worker
const installingWorker = serviceWorker.installing;
// 侦听状态改变事件
installingWorker?.addEventListener('statechange', () => {
if (
installingWorker?.state === 'installed' &&
navigator.serviceWorker.controller
) {
// 新的 service worker 已安装,等待激活,可提示用户
}
});
});
});
}
// 侦听更新请求,调用 update 方法检测更新
navigator.serviceWorker.addEventListener("message", async function(event) {
if (event.data === 'update') {
const registration = await navigator.serviceWorker.ready;
registration.update();
}
});
// --------------- 分割线 ----------------
// sw.js
async function sendUpdate() {
const clients = await self.clients.matchAll()
// 向所有客户端发送更新请求
clients.forEach(function(client) {
client.postMessage('update');
});
}
// 侦听网络请求,加入防抖策略防止频繁更新。
let timer = null;
self.addEventListener('fetch', () => {
if (timer) window.clearTimeout(timer);
timer = setTimeout(() => {
sendUpdate();
timer = null;
}, 5000);
})
复制代码
这种方式需要注意使用 cdn 缓存时不缓存 service worker 脚本,另外网络请求不频繁的站点不适合这种方式,比如使用 service worker 预缓存所有站点资源的博客。
--- end
评论