引言
随着移动端崛起，越来越多的应用需要支持离线访问和缓存，这就要求我们使用 PWA 技术来开发。Vue 作为当今流行的前端框架之一，也提供了很好的支持。本文将分享我在使用 Vue 开发 PWA 过程中遇到的一些问题以及解决办法。
开发工具
做 PWA 开发首先需要确保本地开发环境的 HTTPS 协议，否则浏览器会跳出安全提示。可以考虑使用 ngrok 工具将本地环境转发到 HTTPS 环境，或者使用 vue-cli-service 内置的 serve 命令，该命令在默认情况下会自动启动 HTTPS 环境。
# 开启 HTTPS 环境 npm run serve -- --https
离线访问
PWA 技术最核心的部分就是 offline caching，即缓存应用程序的资源使得离线状态下能够访问。在 Vue 中实现离线访问可以复用 Service Worker 技术。下面是一个简单的 Service Worker 脚本：
-- -------------------- ---- -------
----- ---------- - ------------------
-------------------------------- ----- -- -
----------------
---------------------------------- -- -
------ --------------
--------------
-------------
--------------
---
--
--
---
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---在这个例子中，Service Worker 在安装时缓存了三个资源：index.html、app.js 和 app.css。在后续的页面访问中，Service Worker 会优先从缓存中读取请求所需的资源，如果缓存中不存在则向服务器发起请求。
需要注意的是，在 Service Worker 安装时为了避免缓存污染，应该清理旧版本缓存：
-- -------------------- ---- -------
--------------------------------- ----- -- -
----------------
----------------------------- -- -
------ ------------
---------------------- -- -
------ ---- --- -----------
----------- -- -
------ --------------------
--
--
--
--
---Manifest 配置
PWA 技术中还有一个必不可少的部分就是 Web App Manifest，它是一个 JSON 文件，描述了应用程序的各种元数据（如名称、图标、主题色等），浏览器会根据此文件来显示应用程序。下面是一个简单的 Web App Manifest 配置：
-- -------------------- ---- -------
-
------- --- -----
------------- --------
------------ --------------
---------- -------------
-------------- ----------
------------------- ----------
-------- -
-
------ ----------------------------------------
-------- ----------
------- -----------
--
-
------ ----------------------------------------
-------- ----------
------- -----------
-
-
-在 Vue 中，可以将 Web App Manifest 配置放在 public 目录下的 manifest.json 文件中。需要注意的是，在使用自定义图标时，应该将其放置在 public/img/icons 目录下，并在 Manifest 配置文件中指定相对路径。
总结
PWA 技术作为现代 web 应用的基础之
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6529e1517d4982a6ebc45323