A2HS使用记录

一个笔记

Posted by zichuana on April 5, 2023

方法来自于https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps/Add_to_home_screen
敲重点!!!!
在manifest内容中start_url上述连接作者介绍:
提供启动添加到主屏幕应用程序时应加载的资源的路径。请注意,这必须是一个相对 manifest 指向网站主页的相对路径。另请注意,Chrome 需要这条字段才能显示安装标语,而 Firefox 即使没有这条字段也会显示用于添加到主屏的含加号的主页图标。提供代码如下:

{
  "background_color": "purple",
  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
  "display": "fullscreen",
  "icons": [
    {
      "src": "icon/fox-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "name": "Awesome fox pictures",
  "short_name": "Foxes",
  "start_url": "/pwa-examples/a2hs/index.html"
}

在实际使用中,用于flask写的demo就这个例子:
https://github.com/Zichuana/Hand-Acupoint-Recognition-System start_url填主页面的路由,放在static下。

{
  "background_color": "orange",
  "description": "Hand acupoint recognition based on mediapipe.",
  "display": "fullscreen",
  "icons": [
    {
      "src": "/icon/hand-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "name": "HAND",
  "short_name": "Hand",
  "start_url": "/"
}