pwa安装

安装pwa

命令行 vue add @vue/pwa
安装前提是要先安装yarn
yarn安装： npm install -g yarn
mac可能会报错，要用sudo npm install -g yarn
安装的pwa版本最好是4.0版本的，不然运行报错
安装完pwa后会添加以下文件

vue.config.js 文件中配置pwa

pwa: {
    workboxOptions: {
      // https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin
      skipWaiting: true,
      clientsClaim: true,
      importWorkboxFrom: 'local',
      importsDirectory: 'js',
      navigateFallback: '/',
      navigateFallbackBlacklist: [/\/api\//]
    }
  }

registerServiceWorker.js文件内容（安装时生成的）

/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n' +
        'For more details, visit https://goo.gl/AFskqB'
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

这个文件在pwa安装后会自动在main.js中引入

import './registerServiceWorker'

配置public/manifest.json文件

这是pwa的添加至桌面的功能主要就是依赖于这个文件（在实际开发中不能加注释会报错）

{
    "short_name": "短名称",
    "name": "这是一个完整名称",
    // 桌面图标，是一个数组，注意图片大小和格式
    "icon": [  
        {
         "src": "./img/icons/icon-192x192.png",  // 可以自定义的icon
         "sizes": "192x192",   // 要注意尺寸要和实际尺寸相同
         "type": "image/png"        },
        {
         "src": "./img/icons/android-chrome-512x512.png",
         "sizes": "512x512",
         "type": "image/png"
        }
    ],
    "start_url": "index.html" // 启动网址
    "display": "standalone",  // 显示模式
    "background_color": "#002140", // 启动背景颜色
    "theme_color": "#002140" //  （index.html文件中也要设置）主题颜色，强烈建议和ui主题颜色保持一致，看起来更有原生app的感觉

显示模式	描述
fullscreen	全屏显示, 所有可用的显示区域都被使用, 并且不显示状态栏chrome。
standalone	让这个应用看起来像一个独立的应用程序，包括具有不同的窗口，在应用程序启动器中拥有自己的图标等。这个模式中，用户代理将移除用于控制导航的UI元素，但是可以包括其他UI元素，例如状态栏。
minimal-ui	该应用程序将看起来像一个独立的应用程序，但会有浏览器地址栏， 样式因浏览器而异。
browser	该应用程序在传统的浏览器标签或新窗口中打开，具体实现取决于浏览器和平台， 这是默认的设置。

文件配置好后在public/index.html 中引入

<link rel="manifest" href="manifest.json" rel="external nofollow" >

最后运行完成

执行npm run build，查看dist下的index.html文件中是否引入了manifest.json文件，再看看相应的配置有没有生成，如果有，恭喜你，第一个pwa项目完成了！
谷歌浏览器和safari浏览器都支持，safari中会有一个添加到主屏幕都选项