提问
SAPUI5 iOS home screen icon webapp

将SAPUI5 Web应用程序添加到iOS主屏幕时使用的图标所需的帮助

2020-08-13 14:32发布

站内问答 / UI5
2660 2 6

         点击此处--->   EasySAP.com群内免费提供SAP练习系统（在群公告中）

加入QQ群：457200227（SAP S4 HANA技术交流） 群内免费提供SAP练习系统（在群公告中）


专家您好，

提前道歉是因为多年来我今天提出的问题已经提出，而我试图实现当时给出的答案，但没有成功。

我一直在尝试指定当iOS用户将在Safari中运行的网络应用保存到其主屏幕时将使用的图标。

为了测试这一点，我在试用版的WebIDE帐户中创建了一个小项目，并将其部署到NEO环境中。

创建应用程序的步骤摘要：

1。 在webIDE中-使用用于NEO环境的SAPUI5应用程序从模板创建新项目。 根据需要填充必填字段，并保留其他所有默认值。

2。 将图标.png文件导入到webapp文件夹中。 这是文件之一的示例：

3。 还将.ico文件导入到webapp文件夹中（该网站不允许我上传示例）。

4。 根据此处的文档 https ：//developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

将以下行添加到索引文件：

这给出了：

 <！DOCTYPE html>
 
 <头>
 
 
 
 

 图标测试

4b。 根据SAPUI5文档，此处 https： //sapui5.hana.ondemand.com/#/api/module:sap/ui/util/Mobile

方法sap/ui/util/Mobile.setIcons可用于设置相同的图标。 请注意，当前在下面的代码（view1控制器文件）中将其注释掉了：

 sap.ui.define（[
 " sap/ui/core/mvc/Controller"，
 " sap/ui/util/Mobile"
 ]，功能（控制器，移动版）{
 "使用严格"；


 return Controller.extend（" dt.icontest.controller.View1"，{
 onInit：函数（）{
/*
 Mobile.setIcons（{
 " phone"：" Globe60x60.png"，
 " phone @ 2"：" Globe180x180.png"，
 " tablet"：" Globe152x152.png"，
 " tablet @ 2"：" Globe167x167.png"，
 "预设"：false，
 " favicon"：" Globe.ico"
 }）;
 */
 }
 }）;
 }）;

5。 而已。 测试并部署到SAP Cloud Platform（NEO环境）。

我的结果好坏参半。

使用Chrome桌面浏览器，我可以看到以下内容：

.ico文件正在工作。

如果我使用第4b步而不是第4步，则链接位于头部的结尾而不是开头附近，但结果保持不变。

在iOS中令人沮丧：

就是这样，我被困住了。

我记得其他信息：

所使用的SAPUI5版本是最新版本-1.78.1。

iOS版本是13.5.0（尚未扩展到13.5.1）。

如果您使用的是iOS设备，则可以在将以下网站添加到主屏幕时看到正在使用的图标：

https://www.bbc.co.uk

http://www.redtypewriter.com

对于红色打字机，图标的显示方式与我做的相同。 对于英国广播公司，我没有发现它是如何完成的。

感谢您阅读本文。 希望答案能给我带来更多帮助。

DT

（7.4 kB）

         点击此处--->   EasySAP.com群内免费提供SAP练习系统（在群公告中）

加入QQ群：457200227（SAP S4 HANA技术交流） 群内免费提供SAP练习系统（在群公告中）


专家您好，

提前道歉是因为多年来我今天提出的问题已经提出，而我试图实现当时给出的答案，但没有成功。

我一直在尝试指定当iOS用户将在Safari中运行的网络应用保存到其主屏幕时将使用的图标。

为了测试这一点，我在试用版的WebIDE帐户中创建了一个小项目，并将其部署到NEO环境中。

创建应用程序的步骤摘要：

1。 在webIDE中-使用用于NEO环境的SAPUI5应用程序从模板创建新项目。 根据需要填充必填字段，并保留其他所有默认值。

2。 将图标.png文件导入到webapp文件夹中。 这是文件之一的示例：

3。 还将.ico文件导入到webapp文件夹中（该网站不允许我上传示例）。

4。 根据此处的文档 https ：//developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

将以下行添加到索引文件：

这给出了：

 <！DOCTYPE html>
 
 <头>
 
 
 
 

 图标测试

4b。 根据SAPUI5文档，此处 https： //sapui5.hana.ondemand.com/#/api/module:sap/ui/util/Mobile

方法sap/ui/util/Mobile.setIcons可用于设置相同的图标。 请注意，当前在下面的代码（view1控制器文件）中将其注释掉了：

 sap.ui.define（[
 " sap/ui/core/mvc/Controller"，
 " sap/ui/util/Mobile"
 ]，功能（控制器，移动版）{
 "使用严格"；


 return Controller.extend（" dt.icontest.controller.View1"，{
 onInit：函数（）{
/*
 Mobile.setIcons（{
 " phone"：" Globe60x60.png"，
 " phone @ 2"：" Globe180x180.png"，
 " tablet"：" Globe152x152.png"，
 " tablet @ 2"：" Globe167x167.png"，
 "预设"：false，
 " favicon"：" Globe.ico"
 }）;
 */
 }
 }）;
 }）;

5。 而已。 测试并部署到SAP Cloud Platform（NEO环境）。

我的结果好坏参半。

使用Chrome桌面浏览器，我可以看到以下内容：

.ico文件正在工作。

如果我使用第4b步而不是第4步，则链接位于头部的结尾而不是开头附近，但结果保持不变。

在iOS中令人沮丧：

就是这样，我被困住了。

我记得其他信息：

所使用的SAPUI5版本是最新版本-1.78.1。

iOS版本是13.5.0（尚未扩展到13.5.1）。

如果您使用的是iOS设备，则可以在将以下网站添加到主屏幕时看到正在使用的图标：

https://www.bbc.co.uk

http://www.redtypewriter.com

对于红色打字机，图标的显示方式与我做的相同。 对于英国广播公司，我没有发现它是如何完成的。

感谢您阅读本文。 希望答案能给我带来更多帮助。

DT

（7.4 kB）
付费偷看设置
发送
2条回答
半个程序猿
1楼 · 2020-08-13 15:01.采纳回答

就像很多人一样，我最终找到了解决自己问题的方法。 我说的是解决方案，但可以说是一种解决方法。

在互联网上寻找修复程序时，我偶然在Stack Overflow的此聊天中发现了问题：

https：//chat.stackoverflow .com/rooms/185053/discussion-ween-flyingalemannian-hannes

关于在将应用添加到主屏幕之前输入密码的评论让我开始思考。 要在部署在SCP中时访问我的应用程序，我必须输入我的SCP凭证。 因此，应用中我的png图像文件需要进行身份验证，然后才能查看。 某些非"如何添加到主屏幕"过程可以看到html代码以找到" "行， href图像的经过身份验证的路径。

我的解决方法是使用一个数据URL，其中包含以base64编码的png图像。

这是生成的index.html文件：

（请注意，由于还有30000个字符，因此我已截断了base64数据）

 <！DOCTYPE html>
 
 <头>
 
 
 
 <！-->
 图标测试

对于那些不喜欢30000个字符长的代码行的用户，可以将数据URL存储在JSON文件中，并将其作为模型添加到应用的manifest.json文件中。 以下是此版本的变通办法的关键细节。

image.json文件：

 {
 " Globe180x180.png"：" data：image/png; base64，iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAYAAAA9z ..."
 }

要创建数据网址，我使用了许多可用的在线工具之一：

https://www.base64-image.de/

manifest.json文件的模型部分：

"型号"：{
 " i18n"：{
 " type"：" sap.ui.model.resource.ResourceModel"，
 "设置"：{
 " bundleName"：" dt.icontest.i18n.i18n"
 }
 }，
 "图片"： {
 " type"：" sap.ui.model.json.JSONModel"，
 "设置"：{}，
 " uri"：" model/image.json"，
 " preload"：是
 }
 }，

视图controller.js文件：

 sap.ui.define（[
 " sap/ui/core/mvc/Controller"，
 " sap/ui/util/Mobile"
 ]，功能（控制器，移动版）{
 "使用严格"；


 return Controller.extend（" dt.icontest.controller.View1"，{
 onInit：函数（）{
 var oModelImage = this.getOwnerComponent（）。getModel（" image"）;
 var sURL = oModelImage.getProperty（"/img/Globe180x180.png"）;
 Mobile.setIcons（{
 "电话"：sURL，
 " precomposed"：否，
 " favicon"：" Globe.ico"
 }）;
 }
 }）;
 }）;

现在，我们在iOS中看到了我们想要的图标。

就是这样。 感谢您的阅读。

DT

大道至简
2楼-- · 2020-08-13 15:03

我明白了您使用移动数据而不是wi-fi时图标不存在的含义。
但是在添加应用时会显示图标 进入主屏幕并不是屏幕上的小版本。 我怀疑30000个以上字符的数据URL下载时间太长。 （今天，Speedtest显示14 Mbps的下载速度和0.54 Mbps的上传速度（不是很好，但仅显示1条4G）。wi-fi的相同数字分别为72 Mbps和18 Mbps）。
进一步观察。 我将iPhone放在"添加到主屏幕"页面上了几分钟，没有按"取消"或"添加"。 一段时间后，我按了"取消"，然后再次重新启动"添加到主屏幕"过程。 这次的图标是来自数据URL的图标。
这不是解决方案，只是一种观察。

有一天，我可能会尝试使用较小的数据网址。 也许这将需要使用更简单的图标或更低的分辨率（180x180）。

一周热门 更多>

点击此处---> EasySAP.com 一起学习S4 HANA ...