Safari配置WebApp----添加启动图和桌面图标让你的WebApp在ios设备上体验如原生一样

发布时间:2019-08-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Safari配置WebApp----添加启动图和桌面图标让你的WebApp在ios设备上体验如原生一样脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

现在很多开发者的Web应用程序的设计样式和交互类似本机应用程序,例如,它的缩放比例适合iOS上的整个屏幕。当用户将其添加到主屏幕时,您可以通过使其看起来像本机应用程序一样,在iOS上为您的Web应用程序定制Safari。您可以使用其他平台忽略的iOS设置来执行此操作。

例如,您可以为添加到iOS主屏幕时用于表示Web应用程序的图标指定图标,如指定Web Clip的网页图标所述。当您的Web应用程序从主屏幕启动时,您还可以最小化iOS用户界面上的Safari,如更改状态栏外观和隐藏Safari用户界面组件(搜索栏及工具栏)。这些都是可选设置,添加到您的网页内容时会被其他平台忽略。

阅读Web应用程序的“视口设置”了解如何在iOS上设置Web应用程序的视口

指定Web应用程序的网页图标

您可能希望用户能够将您的Web应用程序或网页链接添加到ios设备主屏幕。这些由图标表示的链接称为Web剪辑。遵循这些简单的步骤来指定一个图标来表示您的iOS应用程序或网页。

要为整个网站(网站上的每个页面)指定一个图标,请将一个图标文件以PNG格式放置在名为root的文档文件夹 apple-touch-icon.png
要为单个网页指定一个图标或者将网站图标替换为网页特定的图标,请向该网页添加一个链接元素,如下所示:

<link rel =“apple-touch-icon”href =“/ custom_icon.png”>

在上面的例子中,custom_icon.png用你的图标文件名替换。
要为不同的设备分辨率指定多个图标(例如,同时支持iPhone和iPad设备),请sizes按以下方式为每个链接元素添加一个属性:

<link rel =“apple-touch-icon”href =“touch-icon-iphone.png”>
<link rel =“apple-touch-icon”sizes =“152x152”href =“touch-icon-ipad.png”>
<link rel =“apple-touch-icon”sizes =“180x180”href =“touch-icon-iphone-retina.png”>
<link rel =“apple-touch-icon”sizes =“167x167”href =“touch-icon-ipad-retina.png”>

使用最适合设备的图标。有关当前图标大小和建议,请参阅iOS人机界面指南的“图形”一章。
如果没有与设备的建议尺寸相匹配的图标,则会使用大于推荐尺寸的最小图标。如果没有大于推荐尺寸的图标,则使用最大的图标。

如果没有使用链接元素指定图标,则会在网站根目录中搜索带有apple-touch-icon...前缀的图标。例如,如果设备的适当图标大小为58 x 58,系统将按以下顺序搜索文件名:

  1. apple-touch-icon-80x80.png
  2. apple-touch-icon.png

注意: iOS 7上的Safari不会为图标添加效果。老版本的Safari不会为使用-PRecomposed.png后缀命名的图标文件添加效果。有关详细信息,请参阅第一步:在iTunes Connect中识别您的应用程序。

  • 指定启动屏幕图像

在iOS上,与原生应用程序类似,您可以指定在Web应用程序启动时显示的启动屏幕图像。当您的Web应用程序处于脱机状态时,这非常有用。默认情况下,使用上次启动时的Web应用程序屏幕截图。要设置另一个启动图像,请在网页中添加一个链接元素,如下所示:

<link rel =“apple-touch-startup-image”href =“/ launch.png”>

在上面的例子中,launch.png用你的启动屏幕文件名替换。有关当前的启动屏幕大小和建议,请参阅iOS人机界面指南的“图形”一章。

添加启动图标标题

在iOS上,您可以为启动图标指定一个Web应用程序标题。默认情况下,使用<title>标签。要设置不同的标题,请在网页中添加元标记,如下所示:

<meta name =“apple-mobile-web-app-title”content =“AppTitle”>

在上面的例子中,替换AppTitle你的标题。

隐藏Safari用户界面组件

在iOS上,作为优化您的Web应用程序的一部分,让它使用独立模式更像本地应用程序。当您使用此独立模式时,Safari不会用于显示Web内容 - 具体来说,屏幕顶部没有浏览器URL文本字段,或者屏幕底部没有按钮栏。只有一个状态栏出现在屏幕的顶部。阅读更改状态栏外观以了解如何最小化状态栏。

将apple-mobile-web-app-capable元标记设置yes为打开独立模式。例如,以下HTML将使用独立模式显示Web内容。

<meta name =“apple-mobile-web-app-capable”content =“yes”>

您可以使用window.navigator.standalone只读布尔JavaScript属性确定网页是否以独立模式显示。有关独立模式的更多信息,请参阅apple-mobile-web-app-capable。

更改状态栏的外观

如果您的Web应用程序以独立模式显示,如本机应用程序,则可以最小化iOS上屏幕顶部显示的状态栏。这样做使用状态栏式元标记。

除非您首先指定了隐藏Safari用户界面组件中所述的独立模式,否则此元标记将不起作用。然后使用状态栏样式meta标签apple-mobile-web-app-status-bar-style来根据您的应用程序需要更改状态栏的外观。例如,如果要使用整个屏幕,请将状态栏样式设置为透明黑色。

例如,下面的HTML将状态栏的背景颜色设置为黑色:

<meta name =“apple-mobile-web-app-status-bar-style”content =“black”>

有关状态栏外观的更多信息,请参阅iOS人机界面指南的“UI栏”一章。

链接到其他原生应用程序

您的Web应用程序可以通过创建具有特殊URL的链接来链接到其他内置的iOS应用程序。可用的功能包括拨打电话号码,发送短信或iMessage,并在其本机应用程序(如果已安装)中打开YouTube视频。例如,要链接到话号码,请按以下格式构造一个点元素:

<a href="tel:1-408-555-5555">给我打电话</a>

有关这些功能的完整视图,请参阅Apple URL Scheme Reference

这是我在项目index.htML上添加的代码:

<!-- Specifying a Webpage Icon for Web Clip for Safari -->
<link rel="apple-touch-icon" href="assets/imgs/LOGo.png">
<!-- Specifying a Launch Screen Image for Safari -->
<link rel="apple-touch-startup-image" href="assets/imgs/splash.png">
<!-- Hiding Safari User Interface components -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Changing the Status Bar Appearance -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

实际体验如下图所示:

Safari配置WebApp----添加启动图和桌面图标让你的WebApp在ios设备上体验如原生一样

可以看到用户添加到主屏幕后,有了自定义的图标及启动图,打开webapp后也不会有safari的地址栏和工具栏,体验跟原生一样。
因为我使用iphone自带的屏幕录制功能,所以顶部状态栏背景被占用,实际体验启动图是全屏的。

脚本宝典总结

以上是脚本宝典为你收集整理的Safari配置WebApp----添加启动图和桌面图标让你的WebApp在ios设备上体验如原生一样全部内容,希望文章能够帮你解决Safari配置WebApp----添加启动图和桌面图标让你的WebApp在ios设备上体验如原生一样所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。