Native App Features - Progressive Web Apps

Web App Manifest

在网站根目录的Manifest文件。例如:https://yongqiang.live/manifest.json

{
  "name": "ABC Site",
  "short_name": "ABC",
  "description": "ABc",
  "display": "standalone",
  "start_url": ".",
  "orientation": "portrait",
  "background_color": "#ffffff",
  "theme_color": "teal",
  "icons": [
    {
      "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

web manifest generator

Add to Homescreen

如果网站实现了PWA的基本功能,当在手机上访问时,浏览器会提示用户是否将应用添加到桌面。这就是所谓的Add to Homescreen功能。这个功能时浏览器控制的,它会在合适的时机对用户发出提示,开发者不用控制。要实现这个功能,需要具备下面几个条件。

  1. 网站支持HTTPS访问。
  2. 有manifest.json文件
  3. 注册了service-worker

Safari App Icons

Safari和IOS需要特殊处理。

相关文章: