前言
在移动互联网时代，用户对应用的需求越来越高。然而，移动应用程序开发需要使用不同的技术栈，这也给开发人员带来了挑战。为了让应用程序在移动端更加快速、快速响应和可靠，PWA 应运而生。本文将介绍 PWA 技术的重点，重点关注如何实现 App Shell 。
什么是 PWA？
PWA 指的是“渐进式 Web 应用程序”，它是一种新型移动应用程序的开发方式。PWA 与常规 Web 应用程序不同的是，它与用户设备之间有一层中间接口，使其具有与本机应用程序相似的性能和可用性。PWA 具有以下特点：
- 渐进式增强性：逐步增强性使 PWA 可以在任何环境下与浏览器兼容。
- 可安装性：PWA 可以在用户设备上安装为本机应用，让用户在桌面上拥有一个应用程序图标。
- 离线运行：离线缓存是 PWA 的重要功能，能够提高网页的可用性，通过 Service Worker 缓存应用程序资源，使之在离线状态下能正常访问。
- 可信的 HTTPS 连接：出于安全考虑，PWA 应该采用 HTTPS 协议的加密连接，确保用户信息传输的安全。
- 应用框架：对于像 PWA 这样的应用程序，通常需要使用应用框架才能实现更好的界面和功能。
在这些特点中，我们将关注如何实现 PWA 中的第三个功能—— 离线运行。 我们现在来分析组成 PWA 离线分手：
- App Shell
- Service Worker
App Shell
App Shell 可以被认为是 PWA 体系结构的主干。 App Shell 本质上是一个精简的 HTML、CSS 和 JavaScript 文件，负责为整个应用程序提供稳定的基础结构。
App Shell 工作原理
在 PWA 中，应用程序的核心码是在 App Shell 中实现。 App Shell 往往是一个基本的 HTML、CSS，其中一些用户界面元素和交互的基础 JavaScript 代码。与传统 Web 应用程序不同，PWA 不是等待从服务器下载完整页面，而是初始化初始加载，在用户获取更新时只更新必要部分。
实现一个基本的 App Shell
第一步是创建基本的 HTML 模板和 CSS 样式，如下所示：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----- ---------------------------- ------------------
---------- --- -------------
----- ---------------- ------------------
-------
------
------- ---------------
------- --- ----------
---------
----- -------------
---- ------- ---- ---- ---
-------
------- ---------------
--------- ------- ---- --------
---------
------- ----------------------
-------
-------在 CSS 部分，定义几个颜色、基本布局和 footer 样式：
-- -------------------- ---- ------- ----- - ---------------- -------- ------------------ -------- ------------------- ----- ------------- ----- - ----- ---- - ------- -- -------- -- ------- ----- - ---- - -------- ----- --------------- ------- ------------ ------ ----------- ---------- ----- ------------ ---- ------ ------------------ ----------------- ------------------------ - ------- - ----------------- --------------------- -------- ----- ------ ----- ----------- ------- - ------- - ----------- ----- ----------------- ----------------------- -------- ----- ----------- ------- ------ ----- -
这是我们的简单示例的基础！但是在实际应用中需要生成大量视图文件信息到下方以达到视图效果。
App Shell 的优点
App Shell 的优点如下：
- 加载快：由于 App Shell 中嵌入的是应用程序的核心代码，因此，它可以帮助 PWA 更高效地加载。此外，PWA 在 Web 和本地应用程序之间提供了无缝过渡，可以在不阻塞用户的情况下进行更新和应用程序升级。
- 支持离线浏览：由于 App Shell 是静态的，因此它可以被缓存到用户设备上。这使得应用程序能够脱机工作，同时提供了更好的用户体验。
- 使应用程序在第一次加载时变得更加响应：App Shell 可以使 PWA 比传统 Web 应用程序更快地响应用户输入。
Service Worker
Service Worker 是一种在浏览器中运行的 JavaScript，它可以在网络不可用或缓存 Web 应用程序资源时提供离线支持。在技术层面上，它是未限制网络代理服务工作者的类型。 Service Worker 可以访问特殊缓存 API（https://developer.mozilla.org/en-US/docs/Web/API/Cache）。
Service Worker 工作原理
在 PWA 中，Service Worker 与 App Shell 一起实现。 Service Worker 是一个独立的脚本，它可以拦截并根据缓存在 Service Worker 中的算法来响应请求。此外，Service Worker 还能够使用从服务器获取的缓存控制头压入（push）通知到客户端。
实现一个基本的 Service Worker
首先，我们需要编写一个简单的 Service Worker 文件，方法是将其放置在根目录中：
-- -------------------- ---- -------
-- ------- ------- ------
-------------------------------- ------- -- -
---------------------------
----------------
--------------------------------------------- -
------ --------------
----
-------------
---
--
--
---
-- ----- ------- ----- ------- ------
------------------------------ ------- -- -
------------------
---------------------------
-------------- -- -------- -- ---------------------
--
---上面我们尝试打开名为“app-shell”缓存的命名缓存。在安装过程中，Service Worker 将加载 App Shell 中的文件，并在检测到有缓存的 Service Worker 时从中读取文件。
接下来， 我们需要从我们的项目中打开 ServiceWorker ，将其代码放在 app.js 文件中：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- -- -- -
------------------------------------------------------
------------------ -- -
-------------------- ------ -------------
--
------------ -- -
---------------------- ------ --- ------------ -------
---
---
-Service Worker 的优点
- 离线体验：Service Worker 能够缓存网络请求，使应用程序提供离线体验。因此，即使当网络不通时，应用程序也可以正常工作。
- 快速加载：由于 Service Worker 能够缓存并优化重复请求，因此可以使应用程序更快地加载。
- 保密性：Service Worker 可以为互联网技术中的某些配置提供更好的保密性，并帮助应用程序确保用户数据的特定方面不会被存储在本地存储中。
总结
通过结合 App Shell 和 Service Worker， PWA 可以使移动应用程序实现与本机应用程序类似的性能和可用性。在本文中，我们介绍了 PWA 以及如何实现 App Shell，希望对您开发 PWA 有所帮助！
参考
- PWA — Progressive Web Apps: https://web.dev/progressive-web-apps/
- App Shell pattern: https://developers.google.com/web/fundamentals/architecture/app-shell
- Service Worker API: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6494eed148841e989423ad6b