PWA 应用如何解决闪屏问题？-JavaScript中文网-JavaScript教程资源分享门户

什么是 PWA

PWA 是 Progressive Web App 的缩写，它是 Web App 的一种新的形态，能够给用户带来更好的使用体验。和原生应用不同，PWA 应用不需要在应用商店下载，而是可以通过浏览器直接安装到用户的移动设备上，具有像原生应用一样的离线、推送等能力。

闪屏问题的原因

在打开 PWA 应用时，经常会出现一个短暂的白屏或者黑屏，这种现象称之为闪屏问题。闪屏问题通常是由于加载的 JavaScript 和 CSS 文件较多，而浏览器需要花费一定的时间来加载这些文件，导致界面无法立即渲染。

解决闪屏问题的方法

1. Service Worker 预缓存

一个优秀的 PWA 应用应该提供离线能力，为了实现这一点，通常要使用 Service Worker 技术。而 Service Worker 还可以预缓存一些核心文件，当用户打开应用时，这些文件已经被提前加载到了浏览器缓存中，可以大大减少闪屏时间。

以下是一个示例代码，使用 Workbox 进行 Service Worker 预缓存：

// javascriptcn.com 代码示例
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');

if (workbox) {
  const urlHandler = new workbox.strategies.CacheFirst();
  workbox.routing.registerRoute(/^https:\/\/cdn\.yourdomain\.com/, urlHandler);
  workbox.routing.registerRoute(
    ({event}) => event.request.mode === 'navigation',
    new workbox.strategies.NetworkFirst(),
  );
}

2. App Shell

App Shell 是一种前端架构模式，可以在首次加载应用时立即渲染应用的框架，再通过异步加载数据来填充内容，从而避免闪屏问题。如下图所示，App Shell 可以分为两部分：

2.1 Shell 部分

Shell 部分是指应用的框架，包括头部、底部、侧边栏等基本布局。Shell 部分的HTML和CSS可以在首屏加载时就渲染出来，从而给用户呈现出完整的应用骨架。

以下是 App Shell 的一个示例代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PWA App</title>
    <link rel="icon" href="/images/icons/icon-32x32.png">
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="app-shell.css">
  </head>
  <body>
    <header>
      <h1>Header</h1>
      <nav>...</nav>
    </header>
    <main>
      <h1>Welcome to PWA App</h1>
      <p>Loading...</p>
    </main>
    <footer>...</footer>
  </body>
</html>

2.2 Content 部分

Content 部分是指应用的内容，包括动态生成的数据。Content 部分可以延迟加载，以避免白屏或黑屏。

以下是 App Shell 的一个示例代码：

fetch('/api/content').then(response => {
  return response.json();
}).then(data => {
  let content = document.createElement('div');
  content.innerHTML = data;
  document.querySelector('main').appendChild(content);
});

3. 骨架屏

骨架屏是一种优化页面加载体验的技术，可以在真正的内容加载出来之前展示一个基于样式的占位符，从而使用户感觉到页面正在加载，减少白屏或黑屏的影响。

以下是骨架屏的一个示例代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PWA App</title>
    <link rel="stylesheet" href="app.css">
  </head>
  <body>
    <header>
      <h1>Header</h1>
      <nav>...</nav>
    </header>
    <main>
      <h1>Welcome to PWA App</h1>
      <div class="skeleton"></div>
    </main>
    <footer>...</footer>
    <script src="app.js"></script>
  </body>
</html>

.skeleton {
  background-color: #f4f4f4;
  border-radius: 4px;
  height: 200px;
  margin: 20px 0;
}

总结

闪屏问题是 PWA 应用常见的问题之一，但通过使用 Service Worker 预缓存、App Shell、骨架屏等技术，可以有效地解决这个问题，从而给用户带来更好的使用体验。

参考资料

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654b34547d4982a6eb521d3a