vue项目的pwa简单使用

简单实现下面的功能

1.可以在chrome浏览器中直接生成

记得勾选上在新窗口打开,你就能在桌面打开百度了.

2.代码生成

2.1 先安装vuecli

例如，在Vue CLI 4.x版的官方文档中，建议使用Node.js版本10+和npm版本6+。如果您要使用Vue CLI 3.x版，则建议使用Node.js版本8.9或更高版本。 推荐:

3.x: npm install @vue/cli@3.0.0 -g

4.x: npm install @vue/cli@4.5.13 -g

2.2 安装pwa

vue add @vue/pwa

安装完成中之后会生成一系列的图片和一些配置文件.注意:main.js会默认引入registerServiceWorker.js文件.

2.3 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\//],
    },
  },

2.4 新建并配置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的感觉
}

配置参考:manifest.json更多配置

2.5 public/index.html中设置一下主题颜色

  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#4DBA87"> 
  //注意: manifest.json的theme_color不生效,content就会生效

还可以参考第二种方式: gitee.com/Fhup/page-t… (使用live serve打开)