pwa

参考pwa
1.添加manifest.json配置页面参数：

{
    "name": "WECIRCLE",
    "short_name": "WECIRCLE",
    "icons": [
        {
          "src": "./img/icons/android-chrome-192x192.png",
          "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": "#000000",
    "theme_color": "#181818"
}

1. name：指定了 Web App 的名称，也就是保存到桌面图标的名称。
2. short_name：当 name 名称过长时，将会使用 short_name 来代替name显示，也就是 Web App 的简称。
3. start_url：指定了用户打开该 Web App 时加载的URL。相对URL会相对于 manifest.json 。这里我们指定了 index.html 作为 Web App 的启动页。
4. display：指定了应用的显示模式，它有四个值可以选择： fullscreen：全屏显示，会尽可能将所有的显示区域都占满。 standalone：浏览器相关UI（如导航栏、工具栏等）将会被隐藏，因此看起来更像一个Native App。 minimal-ui：显示形式与standalone类似，浏览器相关UI会最小化为一个按钮，不同浏览器在实现上略有不同。 browser：一般来说，会和正常使用浏览器打开样式一致。 这里需要说明一下的是当一些系统的浏览器不支持fullscreen时将会显示成 standalone 的效果，当不支持 standalone 属性时，将会显示成 minimal-ui 的效果，以此类推。
5. icons：指定了应用的桌面图标和启动页图像，用数组表示： sizes：图标的大小。通过指定大小，系统会选取最合适的图标展示在相应位置上。 src：图标的文件路径。相对路径是相对于 manifest.json 文件，也可以使用绝对路径例如http://xxx.png。 type：图标的图片类型。 浏览器会从 icons 中选择最接近 128dp(px = dp * (dpi / 160)) 的图片作为启动画面图像。
6. background_color：指定了启动画面的背景颜色，采用相同的颜色可以实现从启动画面到首页的平稳过渡，也可以用来改善页面资源正在加载时的用户体验，结合icons属性，可以定义背景颜色+图片icon的启动页效果，类似与Native App的splash screen效果。
7. theme_color：指定了 Web App 的主题颜色。可以通过该属性来控制浏览器 UI 的颜色。比如状态栏、内容页中状态栏、地址栏的颜色。

更详细的配置–>MDN

由于iOS系统对 manifest.json 是属于部分支持，所以我们需要在head里给配置而外的 meta 属性才能让iOS系统更加完善：

<meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-title" content="WECIRCLE">
 <link rel="apple-touch-icon" sizes="76x76" href="./img/icons/apple-touch-icon-76x76-1.png" />
 <link rel="apple-touch-icon" sizes="152x152" href="./img/icons/apple-touch-icon-152x152.png-1" />
 <link rel="apple-touch-icon" sizes="180x180" href="./img/icons/apple-touch-icon-180x180.png-1" />

1. apple-touch-icon:指定了应用的图标，类似与manifest.json文件的icons配置，也是支持sizes属性，来供不同场景的选择。
2. apple-mobile-web-app-capable：类似于 manifest.json 中的display的功能，通过设置为yes可以进入standalone模式，目前来说iOS系统还支持这个模式。
3. apple-mobile-web-app-title：指定了应用的名称。
4. apple-mobile-web-app-status-bar-style：指定了iOS移动设备的状态栏(status bar)的样式，有Default，Black，Black-translucent可以设置。

manifest.json文件在html中进行引入：

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

注册和使用Service Worker的缓存功能：

1. 要将Service Worker进行注册：
   public文件夹下的index.html中添加如下代码：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function () {
    navigator.serviceWorker.register('/sw-my.js', {scope: '/'})
      .then(function (registration) {
        // 注册成功
        console.log('ServiceWorker registration successful with scope: ', registration.scope)
      })
      .catch(function (err) {
        // 注册失败:(
        console.log('ServiceWorker registration failed: ', err)
      })
  })
}