PWA 应用如何解决闪屏问题？

什么是 PWA

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

闪屏问题的原因

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

解决闪屏问题的方法

1. Service Worker 预缓存

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

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

-----------------------------------------------------------------------------------------

-- --------- -
  ----- ---------- - --- --------------------------------
  ---------------------------------------------------------------- ------------
  ------------------------------
    --------- -- ------------------ --- -------------
    --- ----------------------------------
  --
-

2. App Shell

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

2.1 Shell 部分

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

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

--------- -----
------
  ------
    ----- ----------------
    ----- --------------- ---------------------------- -----------------
    ---------- -----------
    ----- ---------- ------------------------------------
    ----- -------------- ----------------------
    ----- ---------------- ---------------------
  -------
  ------
    --------
      ---------------
      --------------
    ---------
    ------
      ----------- -- --- --------
      -----------------
    -------
    --------------------
  -------
-------

2.2 Content 部分

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

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

----------------------------------- -- -
  ------ ----------------
------------ -- -
  --- ------- - ------------------------------
  ----------------- - -----
  ----------------------------------------------------
---

3. 骨架屏

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

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

--------- -----
------
  ------
    ----- ----------------
    ----- --------------- ---------------------------- -----------------
    ---------- -----------
    ----- ---------------- ---------------
  -------
  ------
    --------
      ---------------
      --------------
    ---------
    ------
      ----------- -- --- --------
      ---- -----------------------
    -------
    --------------------
    ------- ----------------------
  -------
-------
--------- -
  ----------------- --------
  -------------- ----
  ------- ------
  ------- ---- --
-

总结

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

参考资料

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654b34547d4982a6eb521d3a

阅读全文

猜你喜欢

  • ES10 中已无兼容性问题的 String.prototype.matchAll()

    ES10 中已无兼容性问题的 String.prototype.matchAll() 随着前端技术不断发展，在开发过程中我们可能会遇到各种各样的需求。在数据处理的过程中，需要对字符串进行解析，处理等操...

    1 年前
  • 实战 CSS Reset：响应式网页设计与 CSS 布局

    在前端开发中，CSS Reset 是非常重要的一环。它可以让页面在不同的浏览器中显示效果一致，提高用户体验。同时，CSS Reset 也为响应式网页设计提供了重要的基础。

    1 年前
  • 如何在 Electron 项目中使用 Tailwind CSS

    随着云计算的飞速发展，Web 开发技术也在不断更新迭代，其中最为炙手可热的就是 CSS 框架。Tailwind CSS 是一个目前非常流行的 CSS 框架，它能够极大地提高前端开发效率，并且能够兼容各...

    1 年前
  • 调试 Angular 代码：常见问题及其解决方案

    在前端开发中，调试是一个不可避免的过程。Angular 是一个流行的前端框架，开发过程中难免会遇到一些问题需要进行调试。本文将介绍 Angular 开发中常见的调试问题及其解决方案。

    1 年前
  • 如何为 RESTful API 添加访问频率限制

    在开发 RESTful API 时，为了防止恶意攻击和保障 API 的稳定性，我们需要添加访问频率限制。但是具体如何实现呢？下面我们就为大家详细介绍它的实现方法。 什么是访问频率限制？ 访问频率限制就...

    1 年前
  • 在 Deno 中实现文件上传

    随着前端应用的复杂性不断提高，文件上传已经成为了 Web 应用中必不可少的功能之一。在 Deno 中，我们可以使用标准库提供的 API 来实现文件上传，本文将为大家详细介绍如何在 Deno 中实现文件...

    1 年前
  • 如何查找 Babel 编译错误并进行调试

    在前端开发过程中，Babel 通常用于将 ES6/ES7 语法转换为兼容性更好的 ES5 代码。但是，在实际应用过程中，你可能会遇到一些编译错误问题，甚至是一些奇怪的 bug。

    1 年前
  • 在 Windows 上安装和配置 PM2

    前言 PM2 是一款轻量级的 Node.js 进程管理工具，可以用来管理 Node.js 应用程序的启动、重启、停止等操作。本篇文章将介绍如何在 Windows 系统上安装和配置 PM2，并给出相应的...

    1 年前
  • 重新认识 ES6/ES2015

    ES6（ES2015）作为JavaScript的一个新版本，为前端开发带来了许多新特性，包括箭头函数、类、模块化、解构等等。本文将从深度和学习的角度，重新认识ES6，并示范如何使用它们对项目进行优化。

    1 年前
  • Docker 容器中的进程管理方式

    随着 Docker 技术的普及，容器技术在前端开发中也逐渐得到了广泛应用。在 Docker 中，进程管理是一个重要的概念，它关系到容器的启动、运行、停止等过程。本文将介绍 Docker 容器中的进程管...

    1 年前
  • koa2 如何处理文件上传

    前言 Koa2 是一款流行的 Node.js 框架，其模块化和中间件特性使得它成为前端开发者的首选。其中，文件上传是前后端交互中常见的功能之一。那么，在 Koa2 中如何处理文件上传呢？本文将详细介绍...

    1 年前
  • 使用 ES8 async/await 简化 Promise 代码

    使用ES8 Async/Await简化Promise代码 随着JavaScript的发展，Promise代替回调函数成为了处理异步操作的主要方式。不过，Promise的代码结构相比于回调函数的嵌套已经...

    1 年前
  • 在 Mocha 中使用 Sinon 进行 Stub 和 Spy

    在 Mocha 中使用 Sinon 进行 Stub 和 Spy 随着前端应用的复杂度越来越高，前端测试的重要性也变得不言而喻。Mocha 是一个流行的 JavaScript 测试框架，而 Sinon ...

    1 年前
  • 如何优化 JVM 的性能？

    JVM 是 Java 虚拟机的缩写，是 Java 代码被执行的环境。作为开发人员，在开发和部署 Java 项目时，我们需要对 JVM 进行性能优化，以确保应用程序具有更好的性能和可伸缩性。

    1 年前
  • ECMAScript 2020：建立可维护的模块化 JavaScript 代码

    在前端开发中，模块化是重要的概念之一。它能帮助我们更好地组织我们的代码，提高代码的可维护性和可复用性。ECMAScript 2020（ES2020）为 JavaScript 开发者带来了许多新的特性，...

    1 年前
  • 如何使用 Flexbox 创建一个固定宽度的右侧导航栏

    在网页设计中，经常需要创建一个固定宽度的右侧导航栏。我们可以使用CSS的Flexbox来实现这一功能，而且它还可以带来很多额外的好处。在这篇文章中，我将详细介绍如何使用Flexbox创建一个固定宽度的...

    1 年前
  • SPA 应用中如何解决数据缓存问题？

    在单页面应用（SPA）开发中，经常需要处理组件之间的数据共享问题，特别是对于大型应用，如果每个组件都向服务器请求数据，将会影响应用的性能。因此，使用数据缓存以及处理数据的方法是至关重要的。

    1 年前
  • Fastify 中使用 Mockjs 模拟 API 数据

    前言 在前端开发过程中，我们经常需要模拟 API 数据，以便在本地开发和调试时能够正常运行。本篇文章将介绍如何在 Fastify 中使用 Mockjs 模拟 API 数据。

    1 年前
  • 利用 CSS Grid 实现多列元素等高的技巧

    在前端开发中，经常需要将多个元素排列成多列等高的布局，这种布局方式可以让页面看起来更加整洁美观。但是传统的布局方式往往需要使用 JavaScript 或表格布局等方法来实现，这些方法存在兼容性问题和代...

    1 年前
  • Custom Elements 中如何处理跨组件通信

    前言 在前端开发中，组件化是一种非常常见的模式。而通过使用 Custom Elements，我们可以自定义 HTML 元素，进一步实现组件的封装和复用。但是，组件之间的通信显然是不能被忽略的，同时，如...

    1 年前

相关推荐

    暂无文章