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

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文件

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

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

基础教程推荐