What do I mean is that I want to use the app to create a shortcut with icon on the desktop which will allow user to speed access some functions of this app.
How could I do that, any suggestions? Or anyone have experience with this.
最近，我花了很长时间尝试在应用程序中实现此功能，并希望提供我在该主题上找到的一些资源，以免其他人感到头疼。这是一个越来越受欢迎的功能，并在 Workflow 和 Facebook 的 Groups 应用程序等主要应用程序中使用。鉴于 Workflow 现在是 Apple 应用程序，看起来 Apple 在使用此技术方面也没有任何问题。 @jin 提供的答案基本上是正确的。该过程如下所示：
Apple 关于自定义 URL 方案的文档： https://developer.apple.com/library/content/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Inter-AppCommunication/Inter-AppCommunication.html
显示如何在 Javascript 中对 HTML 进行 Base64 编码的示例： https://stackoverflow.com/questions/9238890/convert-html-to-datatext-html-link-using-javascript
如果有人有任何疑问，请告诉我！
I spent a good while trying to implement this functionality into an app recently and wanted to put out some of the resources I found on the subject to save someone else a major headache. This is becoming an increasingly popular feature and is used in major apps like Workflow and Facebook's Groups app. Given that Workflow is now an Apple app, it doesn't look like Apple has any issues with using this technique either. The answer provided by @jin is essentially correct. The process looks something like this:
Register a custom URL scheme for your app. Create dynamic URL links that, when followed, lead to content you wish to shortcut to. The only way currently to add a shortcut to the iOS springboard is via Safari's "add to homescreen" function. So what we want to do is use Safari to save our custom URLs that lead to our app to the springboard. The trick is, you can't just send your URL to Safari and save it because doing so will cause Safari to immediately follow the link and the user will never have a chance to hit "Add to homescreen". So to circumvent this issue you'll need to host a web-service somewhere that takes your URL and returns a base64 URL which your user can save to the homescreen.
To create this webservice you can either host it remotely,which will require your user to be online to use, or embed one into your app, which is what Workflow and Facebook Groups does. For embeded servers theres some great fairly easy to use options. If you're using objective-c theres CocoaHTTP and if you're using Swift I'd recommend Swifter, which is what I used.
Your webserver will need to display a page which returns another page in an base64 encoded format so that the user can use the shortcut after the webserver stops running (obviously you can't leave the embedded server running 24/7). The encode page will need to detect if the page was launched in standalone mode. If it was, then it should take you to your app, otherwise it should present you with a page where the user can save the page to the homescreen. Here's a sample of how my html looked for the service:
<!DOCTYPE html>
<html>
<div id="html">
<!DOCTYPE html>
<html>
<head>
<title>Add to Homescreen</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" name="viewport"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="SHORTCUT NAME HERE" name="apple-mobile-web-app-title"/>
<link rel="icon" type="image/png" href="data:image/png;base64, ICON IMAGE DATA"/>
<link rel="apple-touch-icon" href="data:image/png;base64, ICON IMAGE DATA"/>
<link rel="apple-touch-startup-image" href="data:image/png;base64, ICON IMAGE DATA"/>
</head>
<body>
<a id="redirectURL" href="YOUR CUSTOM URL" name = "redirectURL"></a>
<script>
if (window.navigator.standalone) {
var e = document.getElementById('redirectURL');
var ev = document.createEvent('MouseEvents');
ev.initEvent('click', true, true);
e.dispatchEvent(ev);
window.close();
} else {
document.write("<center><h1>Valet</h1><img id=\"imageIcon\" src=\"data:image/png;base64, IMAGE ICON DATA\"></img><h2> Add this page to your homescreen </h2></center>")
}
</script>
</body>
</html>
</div>
<script type="text/javascript">
var html = document.getElementById("html").innerHTML;
html = html.replace(/\s{2,}/g, '')
.replace(/%/g, '%25')
.replace(/&/g, '%26')
.replace(/#/g, '%23')
.replace(/"/g, '%22')
.replace(/'/g, '%27');
var dataURI = 'data:text/html;charset=UTF-8,' + html;
window.location.href = dataURI
</script>
</html>
Here's a list of resources on the topic that helped me out (Sorry, I don't have enough reputation to include more than 2 links... so you'll have to copy pasta these):
Great example of how the web-service works with a live demo: https://gist.github.com/FokkeZB/5899387
Another stack overflow question describing the process: https://stackoverflow.com/questions/28042152/link-to-safari-add-to-home-screen-from-inside-app
Great javascript widget for prompting the user to hit "Add to homescreen" once in Safari: http://cubiq.org/add-to-home-screen
Apple's documentation on custom URL schemes: https://developer.apple.com/library/content/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Inter-AppCommunication/Inter-AppCommunication.html
Apple's documention for built in schemes, which will be better for shortcutting simple task i.e. sending an email: https://developer.apple.com/library/content/featuredarticles/iPhoneURLScheme_Reference/Introduction/Introduction.html
Example showing how to base64 encode your HTML in Javascript: https://stackoverflow.com/questions/9238890/convert-html-to-datatext-html-link-using-javascript
注意： 如果您的应用程序被删除，网络剪辑将不再起作用并且会让用户感到困惑。 Apple 也可能拒绝您的应用程序。
You can not add icons to the 'desktop' (Springboard) other than your application's. What this app is doing is displaying a replica of the iPhone 'desktop' within their app.
UPDATE: The link now points to an app which does this and it seems it is somewhat possible although rather hack in my opinion.
This is how I believe the application works (it is similar to answer
below but in more detail).
The application creates the webclip image and sends it and the phone number to a web service.
The web service then creates a page with the webclip information attached. The phone number/email is converted to a url which will trigger the corresponding app (Mail/Messages/Phone). i.e "+834 895 734" -> tel:834895734 or sms:834895734
The app then opens that page in MobileSafari and that page
presumably has instructions on how to "Add to Homescreen".
The user will then have to navigate to and tap the "Add to Homescreen" button. This will add the webclip to the Springboard as an icon.
When tapped the webclip activates the url and the Mail/Messages/Phone is launched with the number/email
You could implement something similar (although I wouldnt suggest it). These are the steps to follow:
Host a page somewhere which contains a webclip for each function/url you want a shortcut for. If the urls are not static or you want dynamic icons, you will need a web service.
Handle the url in your application in this AppDelegate method
2) It using the safari functionality "Add to home screen"
Found an excellent answer for simulating the safari functionality,
I created an link from Safari using the "Add To Home Screen" button. It created a directory called 54C86B09482D4560BAB46091CC75825A.webclip inside of /private/var/mobile/Library/WebClips/. That directory contains two files, icon.png and Info.plist. icon.png is simply the icon that gets shown when looking at the apps screen.
The contents of Info.plist are where the real information is:
So, to test this out I created a new folder called C28C8FDC2F184AAD84F77B511442548F.webclip and copied the Info.plist file over from the other directory, edited the url to http://google.com. I then re-sprung the phone and it showed up just like any other webclip. The folder name is simply a hex encoded GUID, I used http://www.somacon.com/p113.php and just selected what was after 0x for this simple test
发布评论
评论（3）
最近，我花了很长时间尝试在应用程序中实现此功能，并希望提供我在该主题上找到的一些资源，以免其他人感到头疼。这是一个越来越受欢迎的功能，并在 Workflow 和 Facebook 的 Groups 应用程序等主要应用程序中使用。鉴于 Workflow 现在是 Apple 应用程序，看起来 Apple 在使用此技术方面也没有任何问题。 @jin 提供的答案基本上是正确的。该过程如下所示：
您的网络服务器需要显示一个页面，该页面以 Base64 编码格式返回另一个页面，以便用户可以在网络服务器停止运行后使用快捷方式（显然您不能让嵌入式服务器 24/7 运行）。编码页面需要检测页面是否以独立模式启动。如果是，那么它应该将您带到您的应用程序，否则它应该向您显示一个页面，用户可以在其中将页面保存到主屏幕。以下是我的 html 如何查找该服务的示例：
这是帮助我解决该主题的资源列表（抱歉，我没有足够的声誉来包含超过 2 个链接...因此您必须复制意大利面这些）：
https://gist.github.com/FokkeZB/5899387https://stackoverflow.com/questions/28042152/link-to-safari-add-to-home-screen-from-inside-apphttp://cubiq.org/add-to-home-screenhttps://developer.apple.com/library/content/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Inter-AppCommunication/Inter-AppCommunication.htmlhttps://developer.apple.com/library/content/featuredarticles/iPhoneURLScheme_Reference/Introduction/Introduction.htmlhttps://stackoverflow.com/questions/9238890/convert-html-to-datatext-html-link-using-javascript如果有人有任何疑问，请告诉我！
I spent a good while trying to implement this functionality into an app recently and wanted to put out some of the resources I found on the subject to save someone else a major headache. This is becoming an increasingly popular feature and is used in major apps like Workflow and Facebook's Groups app. Given that Workflow is now an Apple app, it doesn't look like Apple has any issues with using this technique either. The answer provided by @jin is essentially correct. The process looks something like this:
Your webserver will need to display a page which returns another page in an base64 encoded format so that the user can use the shortcut after the webserver stops running (obviously you can't leave the embedded server running 24/7). The encode page will need to detect if the page was launched in standalone mode. If it was, then it should take you to your app, otherwise it should present you with a page where the user can save the page to the homescreen. Here's a sample of how my html looked for the service:
Here's a list of resources on the topic that helped me out (Sorry, I don't have enough reputation to include more than 2 links... so you'll have to copy pasta these):
https://gist.github.com/FokkeZB/5899387https://stackoverflow.com/questions/28042152/link-to-safari-add-to-home-screen-from-inside-apphttp://cubiq.org/add-to-home-screenhttps://developer.apple.com/library/content/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Inter-AppCommunication/Inter-AppCommunication.htmlhttps://developer.apple.com/library/content/featuredarticles/iPhoneURLScheme_Reference/Introduction/Introduction.htmlhttps://stackoverflow.com/questions/9238890/convert-html-to-datatext-html-link-using-javascriptLet me know if anyone has any questions!
您不能将图标添加到除您的应用程序之外的“桌面”(Springboard)。这个应用程序正在做的是在他们的应用程序中显示 iPhone“桌面”的复制品。
更新：该链接现在指向一个执行此操作的应用程序，尽管在我看来这有点可能，但相当黑客。
这就是我相信应用程序的工作方式（它类似于答案
如下但更详细）。
大概有关于如何“添加到主屏幕”的说明。
您可以实现类似的操作（尽管我不建议这样做）。以下是要遵循的步骤：
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url注意： 如果您的应用程序被删除，网络剪辑将不再起作用并且会让用户感到困惑。 Apple 也可能拒绝您的应用程序。
You can not add icons to the 'desktop' (Springboard) other than your application's. What this app is doing is displaying a replica of the iPhone 'desktop' within their app.
UPDATE: The link now points to an app which does this and it seems it is somewhat possible although rather hack in my opinion.
This is how I believe the application works (it is similar to answer
below but in more detail).
presumably has instructions on how to "Add to Homescreen".
You could implement something similar (although I wouldnt suggest it). These are the steps to follow:
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)urlNote: If your application is deleted, the webclips will no longer work and will confuse the user. Apple may also reject your app.
我猜应用程序的工作原理如下，
1）它只是为每个联系人创建一个 html
2）它使用 safari 功能“添加到主屏幕”
找到了模拟 safari 功能的绝佳答案，
我从 Safari 创建了一个链接使用“添加到主屏幕”按钮。它在 /private/var/mobile/Library/WebClips/ 内创建了一个名为 54C86B09482D4560BAB46091CC75825A.webclip 的目录。该目录包含两个文件：icon.png 和 Info.plist。 icon.png 只是查看应用程序屏幕时显示的图标。
Info.plist 的内容是真实信息所在：
因此，为了测试这一点，我创建了一个名为 C28C8FDC2F184AAD84F77B511442548F.webclip 的新文件夹，并从其他目录复制了 Info.plist 文件，编辑了网址为 http://google.com。然后我重新弹出手机，它就像其他网络剪辑一样显示出来。文件夹名称只是一个十六进制编码的 GUID，我使用 http://www.somacon.com/p113.php 并只是选择了 0x 之后的内容来进行这个简单的测试
I guess the application works as follows,
1) It just creating a html for each contact
2) It using the safari functionality "Add to home screen"
Found an excellent answer for simulating the safari functionality,
I created an link from Safari using the "Add To Home Screen" button. It created a directory called 54C86B09482D4560BAB46091CC75825A.webclip inside of /private/var/mobile/Library/WebClips/. That directory contains two files, icon.png and Info.plist. icon.png is simply the icon that gets shown when looking at the apps screen.
The contents of Info.plist are where the real information is:
So, to test this out I created a new folder called C28C8FDC2F184AAD84F77B511442548F.webclip and copied the Info.plist file over from the other directory, edited the url to http://google.com. I then re-sprung the phone and it showed up just like any other webclip. The folder name is simply a hex encoded GUID, I used http://www.somacon.com/p113.php and just selected what was after 0x for this simple test