Google Play 上架难？！五分钟快速搭建PWA，搞定！

正文

请到「今天看啥」查看全文

一个service-worker, 提供原生体验。 可以通过一张简单的图看出三者之间的区别：

二. 制作一个可安装的PWA

PWA需要浏览器提示将其安装到安卓设备上，安装之后，用户点击应用图标即可使用，而不再需要打开浏览器访问。

制作一个PWA应用，需要以下步骤：

1. 准备一个web应用清单文件

web 应用清单是一个 JSON 文件，它告诉浏览器 PWA 应该如何在安卓设备上显示。 对于一个 H5应用程序来说，要成为一个 PWA应用，它必须是可安装的，而要成为可安装的，它必须包含一个清单文件。

清单文件类似：

{
  "id": "2944123480",
  "name": "Fierce Battle Breakout",
  "short_name": "Fierce Battle Breakout",
  "categories": [
    "photo",
    "productivity",
    "utilities"
  ],
  "start_url": "https://ts.malouapp.com",
  "display": "fullscreen",
  "theme_color": "#000",
  "background_color": "#fff",
  "description": "Fierce Battle Breakout",
  "icons": [
    {
      "src": "./logos/logo192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./logos/logo512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "orientation": "any"
}

清单文件中有一些类型是必须的

类型	值 描述
name	pwa应用的名称，会显示在图标下方
icons	pwa应用的图标，需要准备不同的分辨率适配
start_url	pwa应用打开真实页面
display	显示方式，一般是全屏幕： fullscreen

其他的类型可选，能够设置更多的应用特性。 准备好清单文件之后通过HTML的link标签引入

href 指向清单文件的路径。

2. 添加一个service worker

service worker是一个提供离线体验的 fetch事件处理程序

请到「今天看啥」查看全文