html5创建桌面快捷方式,iOS APP创建桌面快捷方式
Safari有一个“添加至屏幕”的功能,其实就是在桌面上添加了一个网页书签,App可以使用这个功能来实现创建桌面快捷方式。
一、运用基本技术点
1、JavaScript
2、Data URI Schema
3、Socket基本知识
4、Base64编码
二、基本原理
程序内部创建一个简单的Web站点,通过这个站点调用Safari,站点将自定义的Html页面返回给Safari,此时利用Safari的“添加至主屏幕”功能,将自定义的Html制作成桌面书签,当用户点击桌面图标时,则运行自定义的Javascript来进行跳转至App。
三、什么是 data URI scheme?
假设你有以下的图像:
A .png
把它在网页上显示出来的标准方法是:
这 种取得资料的方法称为 http URI scheme ,同样的效果使用 data URI scheme 可以写成:
换句话说我们把图像档案的内容内置在 HTML 档案中,节省了一个 HTTP 请求。
网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数,例如通过合并多个JS文件,合并CSS样式文件。除此之外,还有一个data URL 的密技,让我们直接把图像的内容崁入网页里面,这个密技的官方名称是 data URI schema 。
Data URI scheme 的语法
我们来分析一下这句 img 标签的语法:
它包含以下部分:
data – 取得数据的协定名称
image/png – 数据类型名称
base64 – 数据的编码方法
iVBOR…. – 编码后的数据
: , ; – data URI scheme 指定的分隔符号
总结:这里也就是在网上把图片编码成base64的数据,就会得到如上的数据。
四、什么是 Base64 编码?
简单地说它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具。
五、Socket基本知识
自行脑补,这里我用了iOS中很棒的一个HttpServer第三方框架CocoaHttpServer。
六、实现
上面基本知识介绍完毕,下面开始撸代码。
iOS 的代码很简单,我们使用CocoaHttpServer创建一个本地的站点即可。
一、可以通过点击事件,开启CocoaHttpServer。
- (IBAction)action:(id)sender {
[DDLog addLogger:[DDTTYLogger sharedInstance]];
_httpServer = [[HTTPServer alloc] init];
[_httpServer setType:@"_http._tcp."];
NSString *webPath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"Web"];
DDLogInfo(@"Setting document root: %@", webPath);
[_httpServer setDocumentRoot:webPath];
[self startServer];
}
创建HttpServer
- (void)startServer {
// Start the server (and check for problems)
NSError *error;
if([_httpServer start:&error]) {
DDLogInfo(@"Started HTTP Server on port %hu", [_httpServer listeningPort]);
// open the url. 这里的url和端口号都是如下代码。
NSString *urlStrWithPort = [NSString stringWithFormat:@"http://localhost:%d",[_httpServer listeningPort]];
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:urlStrWithPort]];
} else{
DDLogError(@"Error starting HTTP Server: %@", error);
}
}
小结:以上内容是通过一个点击事件,创建一个httpserver服务器、开启服务器、获取端口号。
ok。核心代码来了…
二、创建一个index.html文件,里面内容如下:
什么意思呢?
页面定期刷新,如果加url的,则会重新定向到指定的网页,content后面跟的是时间(单位秒),把这句话加到指定网页的里一般也用在实时性很强的应用中,需要定期刷新。
这个文件放在文件夹WEB目录下,切记这个文件在工程中是实体文件夹,folder references。
接下来我们会再创建一个content.html的文件,但是这个文件不会放在WEB文件夹内,而是转换成data URI schema 放在上面的重定向到指定网页的位置。
以下是我demo的content.html文件的内容:
相信稍微做过前端开发的同学们都看懂是什么意思了,我这里大概讲一下。
上面代码中 href=""参数的解释:
addicon:// 代表APP的URLscheme,后面可以带参数,如下:
href="addicon://?testapp&token=123&appid=123"
上面这那几个meta标签其实就是为了设置样式,更多详情请看苹果官方文档关于这部分的介绍。
下面这个link就是快捷方式的启动图标,这个图片是经过Base64编码的。
再下面的title就是快捷方式的名称。
接下来body标签中的超链接就是我demo的URL Schemes,通过URL Schemes来跳转进我们的App。下面的span标签用来占位,我们使用JS代码来控制它的显示内容。
这段JS代码的意思就是检测iOS WebApp是否运行在全屏模式。
iOS上的Safari浏览器可以让Web应用程序全屏显示,以取得类似本地应用的显示效果。但是这需要用户把Web应用程序的图标添加到主屏幕才可以。作为开发者,为了更好的显示效果,我们可能希望自己开发的Web应用程序在非全屏状态下运行时提示用户把Web应用程序的图标添加到主屏幕。要检测Web应用程序当前是否运行在全屏状态,只要检测window.navigator.standalone是否为true就可以了,如果这个属性为true则表示Web应用程序当前运行在全屏状态,否则运行在非全屏状态。检测到Web应用程序运行在非全屏状态时就可以提示用户把Web应用程序的图标添加到主屏幕。
最后再把content.html里的这段代码通过这个网站转换成data URI schema 放在index.html中,就完成了。
最后补充:
index.html里面的
上面代码中的 content = "0;URL = data:text/html;charset=utf-8;base64,.............(后面的内容是什么呢)",是content.html页面中全部内容经过base64编码之后的所有数据。
把content.html中所有数据编码成base64,再粘贴再后面就可以实现快捷方式这个功能了。
html5创建桌面快捷方式,iOS APP创建桌面快捷方式相关推荐
- iOS App创建桌面快捷方式
http://www.cocoachina.com/ios/20150827/13243.html 先mark,暂时用不到 转载于:https://www.cnblogs.com/Keys/p/478 ...
- iOS app添加桌面快捷方式
场景描述:app针对某一功能或者新闻频道,向手机桌面添加一个快捷方式 解决思路: 1.需要一个可以展示的网页,跳转到Safari 2.利用Safari的"添加到主屏幕"的方法,向手 ...
- apex创建快捷方式_桌面图标美化 - 快捷方式生成器 App Shortcut Maker Pro
使用App Shortcut Maker在手机上创建应用程序和活动的快捷方式. 热门评论: XDA: 轻松创建应用和应用活动的快捷方式,允许您使用自定义图标甚至附带图标包支持 Android警察: 应 ...
- linux如何创建快捷,如何在Linux的桌面上创建快捷方式或启动器
如果在Linux桌面系统中你经常使用一个程序,你可能想去创建一个"桌面快捷方式",以便于你在桌面只要点击一下快捷方式就可以启动它.虽然不少带有图形界面的程序会在安装时自动在桌面上创 ...
- win10计算机到桌面显示器,win10系统创建桌面快捷方式关闭电脑显示器的操作方法...
win10系统创建桌面快捷方式关闭电脑显示器的操作方法? 很多win10用户在使用电脑的时候,会发现win10系统创建桌面快捷方式关闭电脑显示器的的现象,根据小编的调查并不是所有的朋友都知道win10 ...
- 如何用 React Native 创建一个iOS APP?(二)
我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...
- 【Rust日报】2022-02-22 Slint - 为桌面和嵌入式设备创建一个新的GUI框架
SixtyFPS现已更名为Slint SixtyFPS becomes Slint - Slint Blog 我们将SixtyFPS改名为Slint. 为什么要改变? 在2020年春天,我们启动了Si ...
- iOS APP打包上架-账号创建_谷歌应用商店上架
一.iOS APP打包流程-苹果账号创建 1.苹果开发者账号几种开发者账号类型 个人开发者账号 1.费用:99 美元/年(688.00元) 2.协作人数:仅限开发者自己 3.不需要填写公司的邓百氏编码 ...
- APP稀有资源及19种无需编程的App创建工具
如果你在尝试为你的工作.网站或者产品开发一款既实用又具高品质特征的移动App,却又困于缺乏资金和时间,那你就来对地方了.本文罗列了一些应用和工具,它们可用于开发满足你需求.在工作上助你一臂之力的App ...
- android 动态添加快捷方式,Android动态创建快捷方式
一. 摘要 以Android O为分界,介绍两种动态创建快捷方式的途径:广播和ShortcutManager. 二. Android O以前 在Android O(8.0)以前,动态创建快捷方式是通过 ...
最新文章
- 远程监控 – 数据采集管道
- 使用Session服务未开启错误解决方案
- 【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏
- 【渝粤教育】国家开放大学2018年秋季 0014-21T秘书学(一) 参考试题
- 在数据库中outlet、code、outline为联合组件。hibarnate插入可如此插入
- html研究中心,新媒体研究中心.html
- 4python全栈之路系列之scrapy爬虫s
- 横屏模式(landscape)下的UIDatePicker
- JAVA面向对象OOP→继承extends、构造方法super、方法重写override、样例代码
- 安川机器人外部信号怎么接线_安川机器人通用输入输出信号定义.pdf
- 使用AppNode部署IT资产管理平台(Chemex 3.2.0版本)- 肥仔Sam
- 时间戳转换成YY-MM-DD HH:MM:SS格式
- mkv文件怎么无损转成mp4?
- 纽约大学研究生 计算机科学 申请,纽约大学计算机科学理学硕士理学硕士研究生申请要求及申请材料要求清单...
- Application.mk Android.mk
- 打造一套安全的UI组件库!
- 幕布,为知笔记和 Effie 哪个更适合单口或脱口秀作者?
- C 语言 宏定义 :字符串化 stringify 的应用
- python3 unicode字符串类型_Python str与unicode类型
- ESP8266 NodeMCU引脚说明
热门文章
- Excel 查找函数
- Java 拾遗补阙 ----- 继承私有属性
- kron matlab_Matlab运用kron()函数计算Kronecker乘法
- 服务器pci光卡 系统不显示,工控机系统读取不到PCI卡的原因及解决办法
- AIDL 方法参数的in out inout前缀作用
- 解决打开excel报文件格式或文件扩展名无效的问题
- 元转万元单位换算_元要以万元为单位要怎么换算
- 【支付宝商家中心】支付功能签约,产品签约失败;修改经营类目;系统检测到您的账户不符合国家相关法律法规或《支付宝用户服务协议》约定
- Android版微信跳一跳小游戏如何利用技术手段达到高分!
- opencv:基于凹点匹配的重叠分割