Vue Cli 搭建PWA项目

背景

Native app或者Hybird APP缺点:

1. 软件上线需要审核
2. 版本更新需要将新版本上传到不同的应用商店

传统web网页缺点:

1. 手机桌面入口不够便捷，想要进入一个页面必须要记住它的url或者加入书签
2. 没网络就没响应，不具备离线能力
3. 不像APP一样能进行消息推送

PWA技术优点

1. 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
2. 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
3. 实现了消息推送

项目实战

初始化项目并安装必要依赖

vue create pwa-demo
cd pwa-demo
vue add router
vue add store
vue add pwa
npm i axios
vue add style-resources-loader vue-cli-plugin-style-resources-loader

PWA相关配置

1. 修改public/index.html文件

<!-- 在head标签里面增加以下配置 -->
<link rel="apple-touch-icon" href="<%= BASE_URL %>favicon.ico">
<link rel="manifest" href="<%= BASE_URL %>manifest.json">
<meta name="apple-mobile-web-app-title" content="pwa-demo">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

2. 添加manifest.json文件

{ 
  "name": "pwa-demo",
  "short_name": "pwa",
  "start_url": "/dist/", 
  "icon": [
    {
      "src": "/public/dist/img/icons/favicon-16x16.png",
      "sizes": "16x16", 
      "type": "image/png" 
  },
  {
    "src": "/public/dist/img/icons/favicon-32x32.png",
    "sizes": "32x32", 
    "type": "image/png" 
  },
  {
    "src": "/public/dist/img/icons/android-chrome-128x128.png", 
    "sizes": "128x128", 
    "type": "image/png" 
  }, 
  { 
      "src": "/public/dist/img/icons/android-chrome-192x192.png", 
      "sizes": "192x192",
      "type": "image/png"
  }], 
  "background_color": "white",
  "theme_color": "white",
  "display": "standalone" 
} 

3. 修改main.js文件

// vue add pwa时会增加以下代码,如果没有的话,就手动加下
import './registerServiceWorker'

4. 修改vue.config.js文件

const path = require('path')

module.exports = {
  publicPath: '/dist/', // 此处和manifest.json的配置要对应
  pwa: {
    workboxPluginMode: 'GenerateSW', // 详细配置可以去看workbox-webpack-plugin的说明
    workboxOptions: {
      importWorkboxFrom: 'local',
      skipWaiting: true,
      clientsClaim: true,
      navigateFallback: '/index.html',
      exclude: [/\.(?:map)$/],
      // 定义运行时缓存
      runtimeCaching: [
        {
          urlPattern: new RegExp('^https://laravel.test'), // 需开启https,此处为我本地laravel搭建的站点
          handler: 'NetworkFirst',
          options: {
            networkTimeoutSeconds: 20,
            cacheName: 'cdn-cache',
            cacheableResponse: {
              statuses: [200],
            },
          },
        },
      ],
    },
  },

  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/assets/style/varibles.less')
      ]
    }
  }
}