如何在安卓设备上为一个Web应用程序指定添加到主屏幕的快捷方式图标？

Question

如何在安卓设备上为一个Web应用程序指定添加到主屏幕的快捷方式图标？

androidhtmlweb-applicationsjquery-mobilehomescreen

3

我正在开发一个基于HTML 5的应用程序，当我在Android上创建主屏幕快捷方式时，其应用程序图标会变成默认的书签图标或fav-icon +书签图标。如何像在iPhone中一样为Android指定应用程序图标？

是否有适用于Android的标签来指定应用程序图标？

- sushant

4个回答

1

看一下这段代码。由元标记设置。

<!-- ***  Written in HTML5 *** -->

<!-- Button - dialog - slidedown - inline + mini w/ checkmark -->
<span><a href='#' data-rel='dialog' data-transition='slidedown' data-role='button' data-icon='check' data-inline='true' data-mini='true' data-theme='b'>TEXT</a></span>
<!-- Button (blue) - inline (not the full width) -->
<span><a href='#' data-role='button' data-inline='true' data-theme='b'>TEXT</a></span>
<!--  Start a Listview -->
<ul data-role='listview' data-theme='c'>
<!--  List element as pseudo BACK button -->
<li data-theme='a'><a href='#'>Back</a></li>
<!--  List element with COUNT present -->
<li>TEXT<span class='ui-li-count'>VALUEGOESHERE</span></li>
<!--  List DIVIDER -->
<li data-role='list-divider'>Inventory</li>
<!--  Disable AJAX processing on FORM -->
<form data-ajax='false' method='post' action='#' id='form_name' name='form_name'>
<!--  Fixed FOOTER with ACTIVE links for NAVigation -->
<div data-role='footer' data-position='fixed' data-id='fixed-footer'>
    <div data-role='navbar'>
        <ul>
            <li><a href='#' class='ui-btn-active ui-state-persist'>TEXT</a></li>
            <li><a href='#'>TEXT</a></li>
        </ul>
    </div>
</div><!-- /footer -->
<!--  List with SEARCH and custom keyword: Search -->
<ul data-role='listview' data-filter='true' data-filter-placeholder='Search' data-theme='c'>
<!--  List element with extra keywords for searching -->
<li data-filtertext='KEYWORDS'><a href='#'>TEXT</a></li>
<!--  Hidden LABEL for input -->
<label for='input_name' class='ui-hidden-accessible'>TEXT</label>
<!--   -->

<!-- Common Header Info for HTML5 Mobile Web App -->
<!doctype html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta NAME="robots" CONTENT="noindex, nofollow">
    <title>TEXT</title>
    <meta name="author" content="Mario Lurig - http://mariolurig.com/" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" /><!-- 129x129 -->
    <link rel="apple-touch-startup-image" href="/startup.png"><!-- 320x460 -->
</head> 

<!--  Input TYPEs for differing keyboards -->
<input type='date' name='date' id='date' value='2012-01-01' />
<input type='time' name='time' id='time' value='12:00:00' />
<input type='text' name='text' id='text' value='readonly' readonly /><!-- readonly can't be edited, MAYBE the same as disabled='disabled' -->
<input type='datetime-local' name='datetime-local' id='datetime-local' value='2012-01-01 12:00:00' />
<input type='url' name='url' id='url' placeholder='Enter URL' /><!-- placeholder automatically disappears when input begins or default value is present -->
<input type='email' name='email' id='email' autofocus /><!-- autofocus only added as an example; not required -->
<input type='tel' name='tel' id='tel' /> <!-- Keypad for integers only -->
<input type='number' name='number' id='number' /> <!-- numbers and symbols -->
<input type='range' name='range' id='range' min='0' max='50' /><!-- HTML5 slider, not as nice as jQueryMobile version -->

- Pranav Labhe

0

使用 JavaScriptBridge

声明你的JavaScriptBridge

private class JavaScriptBridge {

  private Context mContext;

  public JavaScriptBridge(Context context) {
    mContext = context;
  }

  public void launchHome() {
    Intent intent = new Intent(Intent.ACTION_MAIN);
    intent.addCategory(Intent.CATEGORY_HOME);
    intent.addCategory(Intent.CATEGORY_DEFAULT);
    mContext.startActivity(intent);

  }
}

在WebView实例中添加该桥接的引用

mWebView.addJavascriptInterface(new JavaScriptBridge(theContext), "MyAndroidBridge");

HTML方式访问该按钮

<html>
  <head>
    <script type="text/javascript">
      function launchHome() {
        if (typeof MyAndroidBridge === 'undefined') {
          alert('bridge not declared');
        } else {
         MyAndroidBridge.lauchHome();
        }
      }
    </script>
  </head>
  <body>
    <a href="javascript:launchHome();">启动主页</a>
  </body>
</html>

- Vishal Pawar

0

2014年9月更新

<link rel="shortcut icon" sizes="196x196" href="icon-196x196.png">

首先您需要在Chrome for Android浏览器的设置中启用“添加到主屏幕”选项。

可以使用以下起始模板：

<!doctype html>
<html>
<head>
    <title>HTML5 app</title>
    <link rel="shortcut icon" sizes="128x128" href="./icns/1410745473_39412.ico">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
    <h1>Adventures in HTML5 android apps</h1>
</body>
<script type="text/javascript">
    navigator.standalone = navigator.standalone || (screen.height-document.documentElement.clientHeight<40)

    alert(navigator.standalone == true);
    alert(screen.height-document.documentElement.clientHeight)
</script>
</html>

适用于最新的 Android Chrome 应用程序（版本 35）。

添加https://stackoverflow.com/users/67606/pablo-santa-cruz的答案，这样也应该与 iOS 兼容（我不再拥有任何 iOS 设备，所以无法百分之百确认）。

- David

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pablo Santa Cruz · Accepted Answer

使用这个：

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

想要更多信息吗？