什么是 PWA
PWA (Progressive Web Apps，渐进式 Web 应用) 是一种应用程序的开发方式，结合了传统 Web 应用的优势和 Native 应用的体验，使用户可以通过浏览器安装并使用即可。具有离线使用、推送通知等能力，可以在桌面端和移动端使用。PWA 的应用场景非常广泛，如电商、新闻、社交等。
PWA 的优势
1. 离线缓存
PWA 可以实现页面资源和数据的离线缓存，即使在没有网络连接的情况下访问 Web 应用，甚至可以在没有网络连接的情况下进行交互。
2. 安装式应用
PWA 应用可以被用户桌面安装，这样可以像 Native 应用一样从桌面启动，并且不需要通过应用商店下载。
3. 推送通知
PWA 应用可以使用推送通知，即使应用关闭也能向用户发送消息，类似于 Native 应用的通知。
4. 更好的性能
PWA 应用充分利用浏览器的优势，具有更快的加载速度和更好的响应性能。
5. 跨平台兼容性
PWA 应用可以在多个平台上运行，因为它是 Web 应用，不需要额外开发针对不同操作系统的版本。
PWA 的开发
1. 创建一个基本的 Web 应用
首先，我们需要创建一个基本的 Web 应用，这包括 HTML、 CSS 和 JavaScript 文件。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- ---------------------------- -------------------
----- ----------------
---------- -------------------
----- ---------------- -----------------
-------
------
---------- -----------
------- ----------------------
-------
-------2. 创建一个 manifest.json 文件
manifest.json 文件是一个包含关于应用信息的 JSON 文件。它描述了应用的名称、图标、主题色、支持的屏幕方向等信息。它的内容如下：
-- -------------------- ---- -------
-
------- ---- -------------
------------- ---- -----
------------ ---------------
---------- -------------
------------------- ----------
-------------- ----------
-------- -
-
------ -----------------------
------- ------------
-------- -------
--
-
------ -----------------------
------- ------------
-------- -------
--
-
------ -------------------------
------- ------------
-------- ---------
--
-
------ -------------------------
------- ------------
-------- ---------
--
-
------ -------------------------
------- ------------
-------- ---------
--
-
------ -------------------------
------- ------------
-------- ---------
--
-
------ -------------------------
------- ------------
-------- ---------
--
-
------ -------------------------
------- ------------
-------- ---------
-
-
-3. 注册 Service Worker
Service Worker 是一个允许开发者缓存资源、控制网络请求的脚本。它可以实现离线缓存和推送通知。要注册 Service Worker，需要将以下代码添加到 app.js 文件中：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- ---------- -
----------------------------------------------------------------------- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
---------------------- -
-------------------------- ------------ ------- -- -----
---
---
-4. 实现离线缓存
PWA 应用的重要功能是在网络不稳定或无网络连接的情况下仍能够像 Native 应用一样运行。提供这一功能的方式是使用离线缓存。要实现离线缓存，需要使用 Service Worker 缓存资源。将以下代码添加到 sw.js 文件中：
-- -------------------- ---- -------
--- ---------- - -------------------
--- ----------- - -
----
--------------
-------------
----------
------------------------
------------------------
--------------------------
--------------------------
--------------------------
--------------------------
--------------------------
-------------------------
--
-------------------------------- --------------- -
----------------
-----------------------
--------------------- -
------------------- --------
------ --------------------------
--
--
---5. 添加应用安装按钮
为了让用户能够将 PWA 应用安装到桌面，需要添加一个安装按钮。使用以下代码在应用中添加一个按钮：
<button id="install-btn" hidden>Install App</button>
使用以下代码在 app.js 文件中完成按钮注册和显示的过程：
-- -------------------- ---- -------
--- ---------------
---------------------------------------------- --- -- -
-- ------- --- ------------ ---- --------- -- ------
-------------------
-- ----- --- ----- -- -- --- -- --------- ------
-------------- - --
-- ------ -- ------ --- ---- ---- --- ------- --- ---
--------------------
---
-------- ------------------- -
----- ------------- - ---------------------------------------
-------------------- - ------
--------------------------------------- --- -- -
-- ---- --- ------- ------
------------------------
-- ---- --- --- ---- -- ------- -- --- ------
-------------------------
-------------------- -- -
-- --------------------- --- ----------- -
----------------- -------- --- ---- ---------
- ---- -
----------------- --------- --- ---- ---------
-
-- ----- -------------- --------
-------------- - -----
---
---
-PWA 的发布
1. 部署到服务器
在开始发布之前，需要先将应用部署到服务器上。任何支持 HTML、CSS 和 JavaScript 的服务器都可以用来部署 PWA 应用。
2. 配置 HTTPS
由于 PWA 在 Service Worker 和离线缓存方面的特殊性质，必须通过 HTTPS 访问以保证安全。如果你不使用 HTTPS，则需要配置 HTTPS，以便用户能够使用 PWA 应用。
3. 添加 manifest.json
manifest.json 文件必须放在网站的根目录下，并且需要在 HTML 文件中引用。在 HTML 的头部添加以下代码：
<link rel="manifest" href="/manifest.json">
4. 注册 Service Worker
要在网站上注册 Service Worker，需要将以下代码添加到 HTML 文件的头部：
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js'));
}
</script>5. 部署应用安装按钮
当用户访问您的 PWA 应用时，会首先检查是否需要安装应用。如果您的应用符合条件，它会显示一个“安装”按钮。您需要将“安装”按钮添加到您的应用中，以便用户可以一键安装。使用以下代码实现此功能：
-- -------------------- ---- -------
------- ---------------- -------------- ------------
--------
----- --------------- -- --- - -------- -- ----- --- -----
---------------------------------------------- ------- -- -
-- ------- ------ -- --- ----- ---- ------------- ------- --- ------------
-----------------------
-- ----- --- ----- -- -- --- -- --------- ------
-------------- - ------
-- ------ -- -- ------ --- ---- ---- --- --- -- ---- ------
--------------------
---
-------- ------------------- -
----- ------------- - ---------------------------------------
-------------------- - ------
--------------------------------------- ------- -- -
-- ---- --- ------- ------
------------------------
-- ---- --- --- ---- -- ------- -- --- ------
-------------------------
-------------------- -- -
-- --------------------- --- ----------- -
----------------- -------- --- ---- ---------
- ---- -
----------------- --------- --- ---- ---------
-
-- ----- -------------- --------
-------------- - -----
---
---
-
---------6. 提交应用
提供一个 Web 应用清单文件（manifest.json）和一个 Service Worker 脚本（sw.js）后，您的 PWA 应用程序可以在各种平台上提供给用户。Web 应用打包工具，如 webpack、Parcel 和 Rollup，或者 PWA 打包工具，如 PWA Builder，都可以打包构建并上传您的应用到应用商店或主机服务。
结论
以上内容是 PWA 安装式应用的开发与发布指南。PWA 拥有许多优点，例如离线缓存、安装式应用、推送通知等。通过这篇文章，你也学会了如何创建一个 PWA 应用程序并发布到不同的平台。相信这些内容对你的前端开发工作，特别是 PWA 应用的开发和部署，应该有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67144f53ad1e889fe2132872