什么是 PWA？
PWA（Progressive Web App）是一种新型的 Web 应用程序，它结合了 Web 和原生应用程序的优势，具有离线访问、推送通知、添加到主屏幕等原生应用程序的功能，同时又具有 Web 应用程序的优势，例如可访问性、可发现性和跨平台等。PWA 可以在所有现代浏览器中运行，并且可以安装在用户的设备上。
什么是 App Shell？
App Shell 是一种设计模式，用于提高 Web 应用程序的性能。它将应用程序的基本 UI 和核心功能分离，将 UI 存储在浏览器缓存中，以便在用户访问应用程序时快速呈现。App Shell 通常包括应用程序的导航、标头、页脚和菜单等元素。
为什么要使用 App Shell？
使用 App Shell 可以显著提高 Web 应用程序的性能。由于 App Shell 是在浏览器缓存中存储的，因此用户可以快速访问应用程序的基本 UI 和核心功能，而无需等待服务器响应。这可以大大减少首次加载时间和页面切换时间，提供更好的用户体验。此外，由于 App Shell 可以离线访问，因此用户可以在没有网络连接的情况下使用应用程序。
如何使用 App Shell？
使用 App Shell 可以通过以下步骤实现：
- 将应用程序的基本 UI 和核心功能分离，并将它们存储在浏览器缓存中。
- 在应用程序的入口点加载 App Shell。
- 在 App Shell 中加载应用程序的内容。
以下是一个使用 App Shell 的示例代码：
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -------------------
--------- -----------
----- -------------- ---------------------
----- ---------------- ---------------------
-------
------
---- ---------------
-----
----
------ ----------------------
------ ----------------------------
------ --------------------------------
-----
------
--------
------ --------
---------
------
---- ------- ---- -- ------ ----------- ---
-------
--------
--------- ---- -- -------
---------
------
------- ----------------------------
-------
-------在这个示例中，我们将应用程序的基本 UI 和核心功能存储在 app-shell.css 文件中，并在入口点 app-shell.js 中加载 App Shell。在 App Shell 中，我们定义了应用程序的导航、标头、页脚和菜单等元素。当用户访问应用程序时，App Shell 将立即呈现，然后加载应用程序的内容。
总结
使用 App Shell 是提高 PWA 性能的关键。它可以显著降低首次加载时间和页面切换时间，并提供更好的用户体验。通过将应用程序的基本 UI 和核心功能分离，并将它们存储在浏览器缓存中，可以实现 App Shell。在入口点加载 App Shell，然后在 App Shell 中加载应用程序的内容，可以实现快速呈现和更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66120352d10417a222297384