随着移动互联网的普及，PWA（Progressive Web Apps）成为越来越多企业的首选解决方案，其具有许多优势，比如可离线访问、类原生应用的界面交互、快速加载性能等等。但是，将 PWA 在生产环境中具体落地实现需要考虑到多个因素。
架构设计
要将 PWA 在生产环境中成功地落地，需要从下面几个方面考虑：
Service Worker
Service Worker 是 PWA 的核心技术，为了实现页面的离线访问、缓存以及消息推送等功能，必须要先通过 Service Worker 实现固定资源的离线缓存。在落地实现中，可以使用 Workbox 这样的库来简化 Service Worker 的编写和管理。
以下是一个基本的 Service Worker 示例，用于缓存静态 CSS 和 JavaScript 文件：
-- -------------------- ---- -------
-- -----
----- ------- - -----
-- -------
----- ------------- - -
---- -- -----
--------------
--------------------
-----------------------
--
-- -- ------- --
-------------------------------- ----- -- -
-------------------- ------ ----------------
-- -------
----------------
------------------------------- -- ----------------------------
--
---
-- -- ----- --
------------------------------ ----- -- -
-------------------- ------ --------------
-- -------------------
------------------
----------------------------------------- -- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---
-- -- -------- --
--------------------------------- ----- -- -
-------------------- ------ ----------------
-- --------
----------------
----------------------------- -- -
------ ------------
----------
----------------- -- --------- --- --------
-------------- -- -------------------------
--
--
--
---HTTPS 协议
由于 Service Worker 具有在本地存储敏感数据的功能，因此使用 HTTPS 协议是必须的，以确保网站的安全性和可靠性。
https 可信证书
当然，安全的 HTTPS 还需搭载可信的安全证书来确保用户信息的安全。这里我们可以采用免费的 Let's Encrypt 工具包，并通过云平台来进行证书的和续期管理。
构建和部署
在前端开发中，我们需要考虑到前端代码的构建和发布问题。对于 PWA，需要在构建工具中添加 Service Worker 的编译和部署命令。同时，还要考虑到代码的缩减、资源压缩以及启用 HTTP/2 加速等问题。
这里以 Vue CLI 为例，演示如何添加 Service Worker 支持：
在项目根目录下运行如下命令，安装 Workbox 和 Workbox-Webpack-Plugin：
npm install workbox-webpack-plugin --save-dev npm install workbox-sw --save
在 vue.config.js 中添加如下配置：
-- -------------------- ---- -------
----- -------------------- - ----------------------------------
-------------- - -
----------------- -
-- ----
-------- -
-- -- ------- ------ ----
--- ---------------------------------
------- --------------------
------------- -----
------------ ----
--
-
-
--部署和测试
在 PWA 架构设计和代码编写完成后，可以进行部署和测试。
部署
部署可以通过 CDN 服务或服务器搭建等方式来实现。该部分不再赘述，但要注意部署时先将 Service Worker 的注册文件 push 到服务器中，然后再刷新页面，这样才能让 Service Worker 成功注册并生效。
测试
测试环节也非常重要，可以使用 Chrome DevTools 中的 Lighthouse 跑分工具来测试落地 PWA 的安装、离线访问、启动速度等等。
总结
以上是 PWA 在生产环境的落地架构设计和实现思路，希望能为大家带来指导意义。PWA 技术日新月异，未来还将有更多的新特性和变化，我们应该把握机会保持学习和跟进的步伐，让我们的 PWA 能够更加完美的为用户服务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1fd0bf6b2d6eab3d4da12