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

2020-08-13 14:32发布

         点击此处--->   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)。

一周热门 更多>