PWA 简介
PWA (Progressive Web Apps) 是一种可以让网站更像本地应用程序的技术。 PWA 可以在离线情况下运行，具有更快的加载速度，更好的性能以及与桌面应用程序相似的用户体验。 Google 是 PWA 的主要倡导者，因为它们可以提供更激动人心的互联网体验，同时还可以提高网站的可访问性和可发现性。
原生 PWA 和非原生 PWA
在 PWA 的世界中，有两个术语，即原生 PWA 和非原生 PWA。原生 PWA 意味着使用 Web APIs 功能来增强应用程序。非原生 PWA 意味着在页面 header 中使用一些链接来增加应用程序的功能，例如添加到主屏幕、离线缓存和推送通知。
本篇文章将重点介绍原生 PWA 的技术。
实现原生 PWA 的技术
以下是实现原生 PWA所需的主要技术：
Service Worker
Service Worker 是一个独立的 JavaScript 文件，它可以在 Web 应用程序和网络之间充当代理服务器。它可以缓存 Web 应用程序的文件，以便它们离线访问并跟踪离线数据，例如表单提交和推送通知。
以下是 Service Worker 典型的生命周期：
- Service Worker 文件注册
- Service Worker 安装
- Service Worker 激活
- Service Worker 变得可以接收 fetch 事件
- Service Worker 卸载
App Manifest
App Manifest 是一个 JSON 文件中的配置，它提供有关 PWA 如何显示和行为的信息。它包括 PWA 的名称，图标和颜色主题。App Manifest 还定义了 PWA 的启动 URL 和起始页，以及屏幕方向和显示模式设置。
Push API
Push API 是一种 Web API，用于向用户设备推送消息。 在 PWA 中，Push API 用于与后台推送通知服务通信以接收推送通知。
PWA 的构建实例
我们将创建一个简单的幻灯片应用程序（Carousel App）作为 PWA 的示例程序，来演示 PWA 的主要特点。
步骤 1 - 创建基本的 HTML 结构
我们将在 index.html 文件中编写我们的 HTML。以下是我们示例的 HTML 结构：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ------ ---------------- ------ --------------- ---------------------------- ---------------- ----------------- ---------------- ----------- ------- ------ ----- ----------------- ------ --------------- ------- ------ --------------- ------- ------ --------------- ------- ------- ------- -------
步骤 2 - 引入必要的 CSS
我们需要一些 CSS 样式来构建我们的 Carousel App。
-- -------------------- ---- ------- - - -------- -- --------- -- ------------ ----------- - --------- - --------- ----- ----------- ------- ------------ ----- ---------------------------- ------ ------------------ - ---------- - --------- --- - ------------------- ------- ------- ----- -------- ----- ------------ ------ -
步骤 3 - 实现 PWA 的核心功能
注册 Service Worker
我们需要向 index.html 文件添加以下脚本来注册 Service Worker。
-- -------------------- ---- ------- -------- -- -------- ------- ------ -- ---------------- -- ---------- - -------------------------------- ---------- - ------------------------------------------------------------------------ - ----------------------- ------ ------------ ------------- -------------- -------------------------- - ----------------------- ------ ------------ --------- ------- ----- ---- - ---------
缓存 App Shell
我们需要使用 Service Worker 缓存应用程序的 资源 和 文件。我们的应用程序只有一张图片，我们将它们缓存在缓存中。
我们需要创建一个名为 sw.js 的 JavaScript 文件，如下所示：
-- -------------------- ---- ------- --- ---------- - ------------------------ --- ----------- - - ----- -------------- ------------------ -------------- ------------- ------------- ------------ -- -------------------------------- --------------- - --- ------- ------- ----- ------- --- ----- ----------------- ------------------------- ------------------------ - ----------------------- -------- ---------- -------------------------- ----- --- --- ------------------------------ --------------- - ------------------- ----------------------------- --------------------------- - ------ ------ ----- ---------- ------ ---- ------ ---------- - ----------- --------- ----- ------ -- ----- -- ------ --- ------- ------- ------- ---------- --------------------- ----- --- ---
安装应用程序
我们需要使用 Web App Manifest 定义应用程序的元数据，包括名称、图标、背景颜色和主题色。我们在 index.html 文件的头部添加一些元素：
<link rel="manifest" href="/manifest.json"> <meta name="theme-color" content="#1976d2"> <link rel="apple-touch-icon" href="/img/icons/app-icon-144x144.png">
其中，href="/manifest.json"引入了我们的 Manifest 文件。Manifest 文件包含以下内容：
-- -------------------- ---- ------- - -------------- --------- ----- -------- --------- ----- -------- -------- --------- - --- --------- ------------------------------- ---------- ------------ ----------- ------- ---- --- --------- ------------------------------- ---------- ------------ ----------- ------- ---- --- --------- --------------------------------- ---------- ------------ ----------- --------- ---- --- --------- --------------------------------- ---------- ------------ ----------- --------- ---- --- --------- --------------------------------- ---------- ------------ ----------- --------- --- --- ------------- -------------- ----------- ------------ -
步骤 4 - 集成 Push API
我们需要向 Service Worker 添加接受 Push 通知的功能。我们需要在 sw.js 文件中添加以下代码：
-- -------------------- ---- ------- ----------------------------- --------------- - ------------------ ------------ ----------- ------- ---- ----- - --------- ----- ---- ------- - - ------- ---------- - ----------------- - --------- --- -------------- ------- ---------------------------------- -------- -------------------------------- ------- - ------- ----------------------------------- --- --- ----------------- ------------------------------------------- -------- --- ---
结论
通过 Service Worker、App Manifest 和 Push API，我们可以创建优秀的 PWA。本文已经为你介绍了如何创建一个简单的 Carousel App，并演示了 PWA 的核心技术、模式和结构。能够使用 PWA 技术开发更好的 Web 应用程序，将会是未来 Web 开发的重要方向，我们鼓励开发者继续深入了解 PWA 的技术与应用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efc2d26fbf96019730c27d