现代 Web 应用程序的目标是带来快速且无阻碍的用户体验，对于前端开发者而言，现代化的工具和技术正在以惊人的速度涌现。其中，Now（ZEIT）和 PWA 是两项备受欢迎的技术。
Now（ZEIT）是一个广受欢迎的 Serverless 部署平台，而 PWA（Progressive Web App）则是现代 Web 应用程序的标志之一。本文将介绍如何使用 Now（ZEIT）将您的 PWA 部署到生产环境，并深入探讨如何使用 PWA 为您的应用程序带来更快、更优秀的用户体验。
什么是 PWA
Progressive Web App 通常被视为 Web 应用程序的下一步发展。PWA 具有许多原生应用程序所具备的功能，例如脱机支持、推送通知和设备访问权限等。PWA 能够通过 Web 技术提供类似于原生应用程序的体验，例如快速加载时间、可靠性和通用性等，并且可以运行在不同的设备平台上，从而降低了应用程序的开发和维护成本。
下面是一个简单的 PWA 示例代码：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
------------ --------------
----- -------------- ----------------------
----- --------------- ---------------------------- -------------------
----- ------------------ ------------------
-------
------
--------- -----------
------- -- - --- ------------
-------
--------- -------------------- ---- -------
-- -------------
-
------- ---- ---------
------------- ------
-------- -
-
------ ------------
-------- ----------
------- -----------
-
--
------------ ----
---------- -------------
------------------- ----------
-------------- ---------
-在示例代码中，我们通过定义 Web App Manifest 文件和使用 Service Worker 实现了 PWA 的核心功能，这些功能包括：
- Web App Manifest 文件：定义 Web 应用程序的主屏幕图标、提示语和其他属性。
- Service Worker：使应用程序可以充分利用浏览器缓存，并且在脱机时仍然可以使用。
什么是 Now（ZEIT）
Now（ZEIT）是一项 Serverless 部署平台，可以帮助 Web 开发者快速、安全地将应用程序部署到云端。Now（ZEIT）允许在几秒钟内创建全球可用的应用程序，并且允许免费使用。当然，Now（ZEIT）也有专业版供使用者选择。
将 PWA 部署到 Now（ZEIT）
将您的 PWA 部署到 Now（ZEIT）需要进行以下步骤：
确保您的 PWA 已通过 Lighthouse 前端分析工具分析
Lighthouse 是 Google 提供的一个用于评估 Web 应用程序性能和可用性的工具，您可以安装 Chrome 浏览器插件使用它。您可以通过 Lighthouse 来测试您的应用程序是否符合 PWA 标准。例如，检查 Manifest 文件和 Service Worker 是否已正确设置、您的应用程序是否符合 PWA 的安全要求等。
配置您的 Now（ZEIT）账户
如果您还没有 Now（ZEIT）账户，请先创建一个。然后安装 Now 的命令行工具，并运行 now login 登录 Now（ZEIT）账户。
npm i -g now now login
构建和部署您的应用程序
现在，您只需要配置 Now（ZEIT）的配置文件——now.json，并在您的应用程序中添加一个静态 Web 应用程序服务器（例如 http-server 或 serve），即可部署您的 PWA。
-- -------------------- ---- -------
-- --------
-
---------- --
------- ---- ---------
--------- -
-
------ -------------
------ -------------
-
--
--------- -
-
------ --------
------- -------------
-
-
-在配置文件中，我们把 index.html 文件和 manifest.json 文件部署到了 Now 环境中，并且将 PWA 作为一个静态 Web 应用程序运行。通过配置路由选项，我们已经将所有请求重定向到了 index.html 文件，这样 Service Worker 就可以拦截这些请求。
最后，运行 now 命令即可将应用程序部署到 Now（ZEIT）。
now
现在，您的 PWA 已经部署到 Now（ZEIT）上，并且可以在全球范围内访问。
总结
使用 Now（ZEIT）和 PWA 可以帮助您将 Web 应用程序带到全新的高度。PWA 可以为您的应用程序带来快速、可靠且通用性强的用户体验，而 Now（ZEIT）则可以帮助您快速且安全地将应用程序部署到全球。
希望本文可以帮助您深入了解如何将 Now（ZEIT）和 PWA 结合使用，同时也能为您提供一个真实的例子来启发您的下一个 Web 应用程序开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d5652cb5eee0b525d3436a