简介
PWA（Progressive Web App）是一种使用 Web 技术来构建的应用程序，具有类似原生应用的体验。App Shell 架构是 PWA 中一种常用的优化手段，其核心思想是将应用的基础 UI 元素提前缓存到客户端，以提高应用的启动速度和性能。
本篇文章将深入介绍 App Shell 架构，说明其实现方法及其在 PWA 应用中的优势和指导意义，并提供实例代码以便读者实践。
App Shell 架构的实现方法
App Shell 架构通常由两部分组成：
- Shell：应用的基础 UI 元素，例如：导航栏、标签栏、底部菜单、侧边栏等，其作为整个应用的框架进行缓存
- Content：应用的具体页面内容，例如：用户信息、文章列表、订单等
下面将详细介绍将 App Shell 架构应用在 PWA 中具体的实现方法：
1. 在 Service Worker 中缓存 Shell
在 Service Worker 的 install 生命周期中，我们需要将应用的基础 UI 元素缓存到客户端。具体实现方式如下：
-- -------------------- ---- ------- -------------------------------- --------------- - ---------------- ----------------------------------------------- - ------ -------------- -------------- -------------- ------------- --- -- -- ---展开代码
其中，caches.open('shell-cache') 用于打开 Shell 的缓存文件，cache.addAll([]) 用于将各个 Shell 的资源进行缓存。
2. 动态向 Service Worker 中注入 Content
在 Service Worker 的 fetch 生命周期中，需要根据 URL 查询请求的资源是否存在于缓存中。如果不存在，则动态请求 Content 的数据，并将数据缓存到客户端。具体实现方式如下：
-- -------------------- ---- ------- ------------------------------ --------------- - ------------------ --------------------------------------------------- - -- ---------- - ------ --------- - ---- - ------ -------------------------------------------- - ----- -------------- - ----------------- ------------------------------------------------- - ------------------------ ---------------- --- ------ --------- ------------------------ - ------------------- --- - -- -- ---展开代码
其中，caches.match(event.request) 用于查询缓存是否存在请求的资源，如果存在则返回，否则动态请求 Content 并缓存至客户端。
App Shell 架构在 PWA 中的优势和指导意义
通过 App Shell 架构的实现，PWA 可以获得以下优势：
- 较快的启动速度：缓存 Shell 可以实现应用的快速启动，使得用户可以快速看到应用的基础 UI 元素
- 更好的性能体验：缓存 Shell 可以减少每次跨网络请求资源的开销，使得应用的性能更好，并且动态注入 Content 的策略也可以减少对网络带宽的依赖
通过 App Shell 架构的实践，我们可以得到以下的指导意义：
- 需要减少应用的加载时间并优化性能体验时，可以选择使用 App Shell 架构进行优化
- 在实现 App Shell 架构时，需要将重点放在缓存 Shell 和动态注入 Content 上，在实现时要充分考虑各种情况。例如：缓存清除的时机、网络断开时的处理等
结语
通过本文的介绍，读者应该能够正确理解 App Shell 架构的实现方法及其在 PWA 中的优势和指导意义，并且能够成功实现 App Shell 架构的优化。在应用实践中，读者根据实际情况可以灵活运用 App Shell 架构，以创造更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67930799504e4ea9bd7105cb
