Native App Features - Progressive Web Apps

让网站看起来就好像是一个原生安装的App

如何将网站放在手机桌面上

在网站的根目录下添加一个manifest.json文件,就可以实现一个功能,当用手机浏览器访问网站时,会有一个弹出提示:“您是否愿意将该网站添加到桌面”,如果点击“同意”,那么在手机的桌面上就会出现一个图标,当用户点击这个图标时,就会调用浏览器并打开链接指向的网站。

这就实现了向原生App体验更进一步了。所以叫做app-like experience。和微信小程序中“添加到桌面”的功能类似。

为网站添加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需要特殊处理。

其他功能

我们还可以实现一些其他功能,比如Splash页面。

相关文章: