什么是 PWA？
PWA 全称 Progressive Web App，即渐进式网页应用，是一种使用现代网络技术增强 Web 应用，带来与原生应用类似的用户体验的应用。
这些应用可以通过 Web 浏览器或操作系统执行，并且可以像普通网站一样被搜索引擎索引。
PWA 的目标是为用户提供更好的体验，使 Web 应用能够快速响应、实现离线访问、具有推送通知等特性，从而能够与原生应用竞争。
在 Vue 应用中打造 PWA 如何入手？
PWA 基于 Web 技术，为了让 Web 应用获得 PWA 能力，需要在 Web 应用上添加一些文件和代码，包括 manifest 文件、service worker 文件等。
Vue 应用中可通过使用 vue-cli-plugin-pwa 插件来快速打造 PWA 应用。
vue-cli-plugin-pwa 是 Vue CLI 的插件，它通过 Service Worker 和 App Shell 技术，实现通过缓存和离线访问来提高Web应用性能，并使它们在本地文件中以本机应用的方式运行。
如何安装 vue-cli-plugin-pwa 插件？
要使用 vue-cli-plugin-pwa 插件，需要确保在项目中已经安装了 Vue CLI 3。
然后可以使用以下命令来添加 vue-cli-plugin-pwa 插件：
vue add @vue/cli-plugin-pwa
该命令将在您的项目上设置必须的文件和代码，并添加 manifest.json 和 service-worker.js 文件。
此外，该插件还会自动将 Web 应用附加到主屏幕上，从而使其看起来像本地应用程序。
如何配置 PWA 应用？
- 修改
public/manifest.json文件，使其符合应用的需求。它应该包括应用的图标、昵称和主题颜色等重要信息。
-- -------------------- ---- -------
-
------- --- --- -----
------------- --------
-------- -
-
------ ----------------------------------------
-------- ----------
------- -----------
--
-
------ ----------------------------------------
-------- ----------
------- -----------
-
--
-------------- ----------
------------------- ----------
---------- ------------
-- 修改
src/registerServiceWorker.js文件，以实现在 PWA 应用中启用 service worker。
-- -------------------- ---- -------
-- --------------------- --- ------------- -
------------------------------------------------------
------------------ -- -
-------------------- ------ -------- --------------
--
------------ -- -
---------------------- ------ -------- -------- ------
--
-- 将
src/main.js文件中的import './registerServiceWorker'重命名为import './register-pwa'。
如何测试 PWA 应用？
现在，您可以在浏览器中测试 PWA 应用，将其添加到主屏幕并查看离线体验。
- 启动开发服务器
npm run serve
在浏览器中打开 http://localhost:8080/
点击浏览器中的“安装”按钮，以将应用添加到主屏幕。
关闭服务器并断开网络连接，然后再次打开应用。
您应该能够加载应用程序并访问其页面，即使没有连接到互联网。
总结
通过使用 vue-cli-plugin-pwa 插件在 Vue 应用中打造 PWA 应用是非常简单的。该插件将自动为您生成必要的文件和代码，使用这些文件和代码，您可以获得更好的性能和更好的用户体验。当然，在生产环境中使用 PWA 应用可能还需要更深入地研究该技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7c9d648841e989445f69e