Vue+PWA初尝试

前阵子在个项目做缓存的过程中，无意间发现PWA这个好东西，当时比较忙没来细细研究，现在回过来头来看看。

什么是PWA

介绍就不介绍了，这里有更详细的，直接开始实验。

创建项目

使用vue-cli3来构建项目基本的结构，在选择配置项的时候把PWA support勾上。

1559207702.png

配置项

首先我们需要配置一下webpack打包后的路径，不然我们将会看到一片空白和一堆404的报错。
在根目录下创建vue.config.js,然后写一些简单的配置。

module.exports = {
    publicPath: './'
};

然后来到src里面找到registerServiceWorker.js文件，这个就是service workers的配置文件,可以对sw的各个生命周期进修改，这次主要是简单的体验功能所以我并没有修改

/* 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(
        '准备完成'
      )
    },
    registered () {
      console.log('注册成功')
    },
    cached () {
      console.log('缓存')
    },
    updatefound () {
      console.log('正在下载新内容.')
    },
    updated () {
      console.log('新内容可用；请刷新.')
    },
    offline () {
      console.log('找不到Internet连接。应用程序正在脱机模式下运行')
    },
    error (error) {
      console.error('服务工作者注册过程中出错:', error)
    }
  })
}

接下来进入public文件加找到manifest.json文件，这个是为了实现 PWA 应用添加至桌面的功能，可以配置用的图标、名称等信息。详细可以看https://pwa.baidu.com/pwa/engage-retain-users/add-to-home-screen/introduction，打不开的复制链接再打开。

{
  "name": "PWA-DEMO",   //项目主名称
  "short_name": "DEMO",   //项目小名
  "icons": [   //设置你需要的logo图标，我这里随便找了一张
    {
      "src": "./timg.jpg",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./timg.jpg",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",    //启动页面
  "display": "standalone",      //启动过渡动画
  "background_color": "#000000",    //背景颜色
  "theme_color": "#4DBA87"    //导航栏颜色
}

然后

接下来打包，然后部署的服务器（sw为了安全起见要求在https环境下），打开。
因为进本没有修改任何的页面代码，所以长这样的。

1559210648(1).png

打开开发者工具，到application下的service workers勾选Offline，模拟一个断网的情况。

1559210897(1).png

然后按F5刷新，你就会神奇的发现即使没有网络依然能够正常的访问，这就是pwa的神奇之处。

最后附上git地址：https://gitee.com/HelpG/pwa-demo.git