写点什么

资源加载失败重载与前端升级检测方案

作者:yuanyxh
  • 2024-08-27
    中国香港
  • 本文字数:3274 字

    阅读完需:约 11 分钟

资源加载失败重载与前端升级检测方案

前言

之前看到了两篇文章,一篇讲连接到网络时重载页面的,一篇讲前端检测升级的,诞生了一些自己的思路和想法,写下了这篇文章。

资源加载失败重载方案

不知道你们是否体验过 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');});
// 这个无效,无法触发 rejectionhandledPromise.reject('unknown').catch(() => {});
// 这个有效,触发 rejectionhandledconst p = Promise.reject('unknown');setTimeout(() => { p.catch(() => {});}, 0);
复制代码


unhandledrejection:和 rejectionhandled 相反,未被处理的 Promise 错误都会触发此事件,比如:


window.addEventListener('unhandledrejection', () => {  console.log('unhandledrejection');});
// 这个有效,触发 unhandledrejectionPromise.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.jsasync 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


发布于: 2 小时前阅读数: 5
用户头像

yuanyxh

关注

还未添加个人签名 2023-08-19 加入

还未添加个人简介

评论

发布
暂无评论
资源加载失败重载与前端升级检测方案_前端_yuanyxh_InfoQ写作社区