前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用VuePress搭建了一个博客，并看到了最终效果：TypeScript中文文档。在本文中，我们将讨论如何与PWA兼容。PWAPWA，英文全称：ProgressiveWebApps，中文译名：ProgressiveWebApps。引用MDN的介绍：PWA是指使用特定的技术和标准模式开发的Web应用程序，这使得它们同时具有Web应用程序和原生应用程序的特性。例如，一方面，Web应用程序更容易被发现：访问网站显然比安装应用程序更容易、更快捷。您还可以通过链接共享网络应用程序。另一方面，原生应用和操作系统可以更加完美的融合，从而为用户提供无缝的用户体验。您可以安装一个应用程序以使其离线工作；用户还更喜欢通过单击主页上的图标来访问他们最喜欢的应用程序，而不是使用浏览器来访问它。PWA使我们能够创建具有上述两种优点的应用程序。经验如果你之前没有了解过PWA，很有可能你不明白它是什么效果。没关系。我们直接来看一个PWA应用示例。我们打开https://m.weibo.cn/，这里是在电脑上打开：我们可以看到在地址栏中有一个安装图标，点击它，会弹出一个安装应用的选项框：我们点击安装后，页面会自动关闭，然后打开一个应用程序窗口：同时，打开Mac启动台，我们会看到已经添加的微博图标：点击它会直接打开在应用程序窗口上方。简单来说，我们之所以兼容PWA，是因为我们要实现这样一个桌面图标的功能。当然PWA还有离线缓存、推送通知等其他功能，这里不再赘述。开启PWA开启PWA需要注意三点：提供一个manifest.json文件，描述应用名称、图标等信息开启ServiceWorker，这个交给现有的PWA插件实现HTTPS做法1、安装插件地址：https://v1.vuepress.vuejs.org/zh/plugin/official/plugin-pwa.htmlyarnadd-D@vuepress/plugin-pwa#ORnpminstall-D@vuepress/插件-pwa2。修改config.jsmodule.exports={head:[['link',{rel:'icon',href:'/logo.png'}],['link',{rel:'manifest',href:'/manifest.json'}],['meta',{name:'theme-color',content:'#3eaf7c'}],['meta',{name:'apple-mobile-web-app-capable',内容：'是'}]，['元'，{名称：'apple-mobile-web-app-status-bar-style'，内容：'黑色'}]，['链接'，{rel：'苹果-touch-icon',href:'/icons/apple-touch-icon-152x152.png'}],['link',{rel:'mask-icon',href:'/icons/safari-pinned-tab.svg',color:'#3eaf7c'}],['meta',{name:'msapplication-TileImage',content:'/icons/msapplication-icon-144x144.png'}],['meta',{名称：'msapplication-TileColor'，内容：'#000000'}]],plugins:[['@vuepress/pwa',{serviceWorker:true,updatePopup:{message:"Newcontentfoundavailable",buttonText:"Refresh"}}]]}3.添加manifest.json等资源接下来我们添加需要的资源，在.vuepress目录下创建一个public文件夹，然后添加manifest.json文件等需要的文件：{"name":"TypeScriptChineseDocumentation","short_name":"TypeScriptDocs","display":"standalone","background_color":"#fff","start_url":"/learn-typescript-test/","scope":"/learn-typescript-test/","description":"TypeScript中文文档入门级教程","icons":[{"src":"logo52.png","sizes":"52x52","type":"image/png"},{"src":"logo288.png","sizes":"288x288","type":"image/png"}]}字段的具体含义可以查看MDN的Manifest介绍。注意start_url和范围。如果你使用的是GitHub或者Gitee仓库的Pages服务，并且地址中包含仓库名，需要将这里的learn-typescript-test替换成你的仓库名，如果是直接域名，就写start_urlas\,scope写为.或根本不写。然后填写需要的图标图片：4.部署生产环境测试虽然我们在上一篇文章《VuePress 博客如何开启本地 HTTPS 访问》中讲了如何在本地启用HTTPS，但是因为我们使用的插件只会在生产环境中启用ServiceWorker：所以好吧，我们部署到网上看看效果。顺利的话，会看到地址栏出现安装图标：FAQ但是如果没有显示图标，我们可以查看开发者工具中的“应用”-“列表”，里面会显示出现的错误：根据此处报错进行排查。如果它出现在可安装性中：没有检测到匹配的服务工作者。您可能需要重新加载页面，或者检查当前页面的服务工作者是否也控制清单错误中的起始URL。也有可能是你的start_url和scope设置有问题。正常安装后，如果打开应用，发现背景色是Vue绿色，比如这个：这是因为忘记在config.js中修改背景色：系列文章博客搭建系列是唯一实用的系列目前为止我写的教程，预计20篇左右，讲解如何使用VuePress搭建和优化博客，以及部署到GitHub、Gitee、私服等平台。本文为第23篇，全系列文章地址：https://github.com/mqyqingfeng/博客微信：“mqyqingfeng”，加我到SaeYu的唯一读者群。如有错误或不准确的地方，请务必指正，万分感谢。如果你喜欢或者有启发，欢迎star，这也是对作者的鼓励。
