web项目实现PWA和Browsersync的安装及使用方法

vue 项目的 pwa 配置

# 创建 名为 test 的项目，一般默认即可
vue create test# 在test目录下 添加 PWA 功能
vue add pwa

会修改项目，在 src 目录下生成这个文件

registerServiceWorker.js

会修改 public 文件夹，生成很多 icon 作为桌面显示图标。
可以在vue.config.js去配置名字和颜色涉及添加至桌面的应用名，及桌面进入的启动页面的长相。

robots.txt，为了通过 LightHouse 的检测 vuejs/vue-cli#1715
registerServiceWorker.js，注册 Service Worker，并监听生命周期的事件

测试 PWA 需要在打包之后去检测使用，所以这里使用一个插件方便测试。npm run build，再通过browser-sync开本地服务器。达到部署效果。

Browsersync的安装及使用方法

Browsersync是浏览器同步测试工具，Browsersync能让浏览器实时、快速响应文件更改（html、js、css、sass、less等）并自动刷新页面。省去手动F5的事件，更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。即在任何一设备上操作，其他设备也随之改变，大大提高了测试效率。

在项目中安装插件

npm install browser-sync --save-dev

配置运行命令

"serve:bs": "browser-sync dist"···
npm run serve:bs

完成部署！