要求网站访问者在移动设备上添加家庭桌面快捷方式(渐进式网络应用程序)

Ask the visitor of the website to add a home desktop shortcut on mobile (progressive-web-app)(要求网站访问者在移动设备上添加家庭桌面快捷方式(渐进式网络应用程序))

问题描述

我记得当我用Chrome Android访问某些网站时，有一个底部弹出窗口，显示如下： 要在您的家庭桌面上安装快捷方式(&Q)？单击此处。

如何为Android浏览器和iOS浏览器启用此行为，并提供安装桌面快捷方式图标？

以下是我已经尝试过的内容，但没有成功：在HTML本身中：

<link rel="manifest" href="manifest.json" />
<link href="32.png" rel="icon shortcut" sizes="3232" />
<link href="192.png" rel="apple-touch-icon" />

manifest.json包含：

{
  "short_name": "myapp",
  "name": "myapp",
  "icons": [
    {
      "src": "48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "72.png",
      "type": "image/png",
      "sizes": "72x72"
    },
   /// etc. same for 96, 144, 192, 512
  ],
  "start_url": "https://example.com",
  "background_color": "#000000",
  "display": "standalone",
  "theme_color": "#000000",
  "description": "Test"
}

注意：在给定网站上调试和添加到主屏幕并不容易，因为如果您以前访问过该网站，提示并不总是显示，请参阅我对How to bring back "Add to home" banner for progressive web app after removed the icon from home screen?

推荐答案

您是否注册了服务工作者？如果您还没有这样做，可以使用下面的代码。

navigator?.serviceWorker.register('/service-worker.js');

您需要在主JS文件所在的文件夹中创建service-worker.js文件

这篇关于要求网站访问者在移动设备上添加家庭桌面快捷方式(渐进式网络应用程序)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！