随着移动设备和网络的快速发展，现代 Web 应用程序日益成为一种流行的选择，PWA (Progressive Web App) 作为其中的一部分，为用户提供了良好的响应性和离线访问能力。其中，Service Worker 和 App Shell 是 PWA 的两个最大的构成要素，下面将会详细介绍如何使用它们。
Service Worker
Service Worker 是一个在浏览器中运行的独立脚本，它充当 Web 应用程序与网络之间的代理，能够帮助应用程序处理网络请求和响应，以及实现离线缓存。使用 Service Worker 来创建 PWA，能够大幅提高应用程序的性能，并增加应用程序的可靠性，以下是如何注册和使用 Service Worker 的代码：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- ---------- -
---------------------------------------------------------------------- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
-- ------------- -
-------------------------- ------------ ------- -- -----
---
---
-在以上代码中，我们使用 navigator.serviceWorker.register() API 将 sw.js 注册为我们的 Service Worker 脚本，并在成功或失败时给出相应的控制台输出。通过 Service Worker 脚本，我们能够缓存我们的应用程序资源，以便在下次离线访问时，能够快速地加载，以下是如何添加资源到缓存中的代码：
-- -------------------- ---- -------
-------------------------------- --------------- -
----------------
-------------------------------------- -
------ --------------
----
--------------
--------------
-------------
------------------
---
--
--
---在以上代码中，我们使用 caches.open() API 创建一个名为 v1 的新缓存，并使用 cache.addAll() API 将我们想要缓存的资源添加到缓存中，其中 URL 是相对路径，以“/”开头。
在 Service Worker 脚本中，我们还可以监听事件来处理来自客户端的请求和响应，以下是如何处理离线缓存的请求和响应的代码：
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});在以上代码中，我们监听脚本的 fetch 事件，每次客户端请求数据时，我们使用 caches.match() API 从缓存中读取相应的资源，如果缓存中有该资源，我们使用缓存的响应，否则从网络中获取响应。通过离线缓存，我们能够使应用程序快速响应并且离线时也能够良好地运行，从而提高用户体验。
App Shell
App Shell 是 PWA 的一种基础架构模式，意思是创建一个简单但功能强大的 UI，以便在离线状态下显示内容，这个 UI 称为 App Shell，通过 App Shell，我们能够给用户提供很好的体验，并在它们离线时仍然能够提供服务，下面是如何创建一个基础的 App Shell 的代码：
-- -------------------- ---- -------
--------- -----
------
------
---
-------
------
---- ---------------
---
------
-------
-------在以上代码中，我们定义了一个基本的 HTML 模板，其中 app-shell 是 App Shell 的容器。在这个容器中，我们可以添加我们应用程序的动态内容，如下所示：
function renderPosts(posts) {
var html = '';
for (var i = 0; i < posts.length; i++) {
html += '<div class="post">' + posts[i].title + '</div>';
}
document.querySelector('#app-shell').innerHTML = html;
}在以上代码中，我们使用 JavaScript 在 App Shell 容器中渲染一个简单的博客帖子列表。作为 PWA 的一部分，我们使用 Service Worker 将这些帖子缓存起来，并使用 App Shell 将它们离线呈现，从而提供更好的用户体验。
结论
通过使用 Service Worker 和 App Shell，我们能够构建出更快、更稳定的 PWA 应用程序，它们能够在离线状态下快速响应，并能够给用户更好的用户体验。在构建 PWA 应用程序时，请务必深入了解这两个重要的构成要素，并将它们集成到您的代码中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f22f06a44b36ee5764677b