设置PWA的窗口标题和图标

时间:2019-11-06 14:59:18

标签: progressive-web-apps

我正在将我的网站变成PWA,并逐步进行了使其可下载的步骤,并在主屏幕上带有其自己的图标。

但是,我找不到有关如何设置窗口标题和图标的任何文档,因为该窗口当前是chrome的图标,名为Application ...。这可能吗?如果可以,我该如何实现呢?


该应用的清单:

{
  "name": "AppName",
  "short_name": "AppName",
  "lang": "en-US",
  "start_url": "/",
  "display": "standalone",
  "background_color": "white",
  "theme_color": "black",
  "icons": [{
    "src": "../content/themes/AppName/images/fuzz.png",
      "sizes": "512x512",
      "type": "image/png"
    }]
}

应用程序的窗口(出于隐私目的,该窗口的内容已已删除

1 个答案:

答案 0 :(得分:1)

某些Android发行版未在应用程序切换器中显示PWA名称和图标,您可以转到已知良好的PWA来检查您的发行版是否是其中之一。

来自Airhorner的清单清单示例:

{
  "name": "The Air Horner",
  "short_name": "Airhorner",
  "description": "The world's best airhorner, and it's free",
  "icons": [
      {
        "src": "/images/touch/android-launchericon-48-48.png",
        "type": "image/png",
        "sizes": "48x48"
      }, 

      {
        "src": "/images/touch/android-launchericon-72-72.png",
        "type": "image/png",
        "sizes": "72x72"
      }, 
      {
        "src": "/images/touch/android-launchericon-96-96.png",
        "type": "image/png",
        "sizes": "96x96"
      }, 
      {
        "src": "/images/touch/android-launchericon-144-144.png",
        "type": "image/png",
        "sizes": "144x144"
      }, 
      {
        "src": "/images/touch/android-launchericon-192-192.png",
        "type": "image/png",
        "sizes": "192x192"
      }, 
      {
        "src": "/images/touch/android-launchericon-512-512.png",
        "type": "image/png",
        "sizes": "512x512"
      } 
      ],
  "start_url": "/?homescreen=1",
  "scope": "/",
  "display": "standalone",
  "background_color": "#2196F3",
  "theme_color": "#2196F3"
}

Pixel启动器上的结果: enter image description here