什么是PWA：

Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验

PWA 的主要特点包括下面三点：

• 可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现
• 体验 - 快速响应，并且有平滑的动画响应用户的操作
• 粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面

PWA 具有下面一些特性：

• 渐进式 - 适用于所有浏览器，因为它是以渐进式增强作为宗旨开发的
• 连接无关性 - 能够借助 Service Worker 在离线或者网络较差的情况下正常访问
• 类似应用 - 由于是在 App Shell 模型基础上开发，因为应具有 Native App 的交互和导航，给用户 Native App 的体验
• 持续更新 - 始终是最新的，无版本和更新问题
• 安全 - 通过 HTTPS 协议提供服务，防止窥探和确保内容不被篡改
• 可索引 - 应用清单文件和 Service Worker 可以让搜索引擎索引到，从而将其识别为『应用』
• 粘性 - 通过推送离线通知等，可以让用户回流
• 可安装 - 用户可以添加常用的 webapp 到桌面，免去去应用商店下载的麻烦
• 可链接 - 通过链接即可分享内容，无需下载安装

如何把vue-cli构建的项目改造成支持PWA呢？

第一：加入Manifest

manifest 的目的是将Web应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。

为了这样做，我们需要添加一个manifest.json文件并且在index.html文件中进行声明

pwa-manifest-webpack-plugin能够让我们在应用构建的时候生成文件：

npm i pwa-manifest-webpack-plugin --save

我们接着能够通过编辑build/webpack.dev.conf.js 以及build/webpack.prod.conf.js来更新构建过程。

在顶部引入pwa-manifest-webpack-plugin ：

const manifestPlugin = require('pwa-manifest-webpack-plugin')

并且将它添加到插件：

plugins: [
    new manifestPlugin({
      name: '最野新闻', // 标题 指定了Web App的名称。
      short_name: '最野', // 短标题 short_name其实是该应用的一个简称。一般来说，当没有足够空间展示应用的name时，系统就会使用short_name。
      description: '最野新闻 - 一款最前线新闻的应用', // 这个字段的含义非常简单，就是一段对该应用的描述。
      display: 'standalone', // fullscreen：全屏显示，会尽可能将所有的显示区域都占满；standalone：独立应用模式，这种模式下打开的应用有自己的启动图标，并且不会有浏览器的地址栏。因此看起来更像一个Native App；minimal-ui：与standalone相比，该模式会多出地址栏；browser：一般来说，会和正常使用浏览器打开样式一致。
      start_url: '/', // 这个属性指定了用户打开该Web App时加载的URL。相对URL会相对于manifest。这里我们指定了start_url为/，访问根目录。
      orientation: 'portrait-primary', // 控制Web App的方向。设置某些值会具有类似锁屏的效果（禁止旋转），例如例子中的portrait-primary。具体的值包括：any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, portrait-secondary。
      icon: {
        // icons本身是一个数组，每个元素包含三个属性：
        //
        // sizes：图标的大小。通过指定大小，系统会选取最合适的图标展示在相应位置上。
        // src：图标的文件路径。注意相对路径是相对于manifest。
        // type：图标的图片类型
        src: path.resolve('src/assets/logo.png'),
        sizes: [200]
      },
      background_color: '#2d8cf0', // background_color是在应用的样式资源为加载完毕前的默认背景，因此会展示在开屏界面。background_color加上我们刚才定义的icons就组成了Web App打开时的“开屏图”。
      theme_color: '#2d8cf0' // 定义应用程序的默认主题颜色。 这有时会影响操作系统显示应用程序的方式（例如，在Android的任务切换器上，主题颜色包围应用程序）。此外，还可以在meta标签中设置theme_color：<meta name="theme-color" content="#5eace0"/>
    })
]

最后，在 index.html中声明使用manifest.json：

<link rel="manifest" href="./manifest.json">

<!-- 针对safari（iOS）的添加到桌面功能进行相关设置 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="最野新闻">
    <link rel="apple-touch-icon" href="./static/images/logo.png">
<!--end-->

<!-- IE的设置 -->
    <meta name="application-name" content="最野新闻" />
    <meta name="msapplication-TileColor" content="#222">
    <meta name="msapplication-square70x70logo" content="./static/images/logo.png" />
    <meta name="msapplication-square150x150logo" content="./static/images/logo.png" />
    <meta name="msapplication-square310x310logo" content="./static/images/logo.png" />
<!--end-->

配置完上面的步骤之后，你可能需要重启一下  npm run dev

相关代码：https://github.com/hwq888/yeye-PWA

就是这么简单，您已经成功的迈出第一步了，如果你想查看你的成果，下面介绍一套简单的方式：

就是使用 “ngrok”  你可以查看 这篇文章试试：https://blog.csdn.net/u012878818/article/details/81234695