从web应用程序动态更新ios apple-touch-icon

Question

I'm trying to see if updating a mobile app icon image is possible, without opening the page again. 我正在尝试查看是否可以更新移动应用程序图标图像，而无需再次打开页面。

My DEMO is here: http://charliehield.com/sandbox/IconUpdate 我的DEMO在这里： http ： //charliehield.com/sandbox/IconUpdate

Step 1: navigate to the URL on iOS device (haven't tested Android, but should work) 第1步：导航到iOS设备上的URL（尚未测试Android，但应该可以工作）
Step 2: Click the arrow button and select "Add to Home Screen" 第2步：单击箭头按钮，然后选择“添加到主屏幕”
Step 3: Click "Add" button 第3步：单击“添加”按钮

Now, the icon should be green. 现在，图标应为绿色。

I'm using a simple PHP if statement for testing, setting $i = 0; 我正在使用一个简单的PHP if语句进行测试，设置$ i = 0;

So, if $i = 0, set the apple-touch-icon to GREEN.png, else use RED.png 因此，如果$ i = 0，请将apple-touch-icon设置为GREEN.png，否则使用RED.png

Here is my PHP code: 这是我的PHP代码：

<?php $i = 0; ?>
<!doctype html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>IconUpdate</title>
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" media="all" href=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
    <?php

    if ($i == 0) {

        echo '<link rel="apple-touch-icon-precomposed" href="green.png">';

    } else {

        echo '<link rel="apple-touch-icon-precomposed" href="red.png">';

    }

    ?>

</head>

<body lang="en">

add to home screen for DEMO

</body>

</html>

The way it works, is I can manually change $i and if it's not = 0, and I click the icon, open the page in Mobile Safari, then press the home button, the icon will be RED.png 它的工作方式是，我可以手动更改$ i，如果它不是= 0，我点击图标，在Mobile Safari中打开页面，然后按主页按钮，图标将是RED.png

I'm wondering if there's a way to "push" (for lack of a better word) the new icon to the homescreen without having to re-open the page? 我想知道是否有一种方法可以“推”（缺少一个更好的词）新图标到主屏幕而不必重新打开页面？ Can this be done? 可以这样做吗？

Any ideas / suggestions? 有什么想法/建议吗？

Answer 1

Ive done some experimenting and found if you can format up a fullscreen image on the page, and leave out the icon meta tag, the icon will become a thumbnail image of the page each time you reload. 我做了一些实验，发现如果你可以在页面上格式化全屏图像，并省略图标元标记，每次重新加载时图标将成为页面的缩略图。

vivvvi. vivvvi。

Answer 2

It appears that with iOS 7.1 a new icon will automatically be downloaded when your installed web-app is run. 看来，在iOS 7.1中，当您运行安装的Web应用程序时，将自动下载新图标。

This is what I am using to reference the icons: 这是我用来引用图标的方法：

<link rel="apple-touch-icon-precomposed" href="icon.png"/>

<!-- iOS 7 iPad (retina) -->
<link href="/images/icon_152x152.png" sizes="152x152" rel="apple-touch-icon">

<!-- iOS 6 iPad (retina) -->
<link href="/images/icon_144x144.png" sizes="144x144" rel="apple-touch-icon">

<!-- iOS 7 iPhone (retina) -->
<link href="/images/icon_120x120.png" sizes="120x120" rel="apple-touch-icon">

<!-- iOS 6 iPhone (retina) -->
<link href="/images/icon_114x114.png" sizes="114x114" rel="apple-touch-icon">

<!-- iOS 7 iPad -->
<link href="/images/icon_76x76.png" sizes="76x76" rel="apple-touch-icon">

<!-- iOS 6 iPad -->
<link href="/images/icon_72x72.png" sizes="72x72" rel="apple-touch-icon">

<!-- iOS 6 iPhone -->
<link href="/images/icon_57x57.png" sizes="57x57" rel="apple-touch-icon">

<link rel="shortcut icon" sizes="196x196" href="/images/icon_196x196.png">

Answer 3

在iOS上，没有办法（在使用公共API的库存OS设备上）本机应用程序或Web剪辑来更改其图标（除了标记本机应用程序之外）。

从web应用程序动态更新ios apple-touch-icon

问题描述

3 个解决方案

解决方案1
1 2013-01-29 01:32:01

解决方案2
0 2014-04-09 18:56:26

解决方案3
0 2012-01-19 21:46:38

从web应用程序动态更新ios apple-touch-icon

问题描述

3 个解决方案

解决方案1 1 2013-01-29 01:32:01

解决方案2 0 2014-04-09 18:56:26

解决方案3 0 2012-01-19 21:46:38

解决方案1
1 2013-01-29 01:32:01

解决方案2
0 2014-04-09 18:56:26

解决方案3
0 2012-01-19 21:46:38