Involves OpenUrl, iOS SHceme, Data URI Scheme, JS, and Socket

Realize the function

Add a page or function of an application to the desktop in the form of a shortcut. Users can click the desktop icon to invoke the application and open the corresponding page or function.

background

When users use weibo, Taobao, Tieba and Baidu Map, some pages are opened frequently, or even an application only for these few single functions. At this time, you can consider adding the corresponding function pages to the desktop by shortcut.

The basis for implementing this feature

There is no open API for this, so we have to use Safari. In Safari, there is a feature called Add to home screen, and we will use this entry to implement this feature.

Add to the home screen in Safari means add the url of the current page to the desktop in the form of an icon, click on the icon, still open Safari and open the corresponding URL, which is not what we want, keep watching.

The iOS OpenUrl

OpenUrl(Open link)

Such as:

[[UIApplication sharedApplication] openURL:[NSURLURLWithString:@"tel://xxx"]];
Copy the code

In iOS, if we want to invoke a dial-up application in an application, we use the following approach: “tel://” is the scheme that the dial-up application registers in the application. All applications can register scheme in the application, and this scheme is universal across the phone. Third party sharing also relies on this method to invoke their own applications through openURL: Scheme.

How do I register my own scheme? There’s a lot of information about this online, so post a link here.

The use of OpenUrl in this function is:

  1. Call Up Safari with OpenUrl and let Safari visit a specific page.
  2. Safari saves the icon to the desktop and invokes our app via OpenUrl when clicked. (You can type tel:// XXX in the Safari address bar.)

What page does Safari open?

With OpenUrl, we can make the application open Safari and visit a page. We know that Safari adds the current URL to the desktop, so when we click on the icon, we also access the page. This page needs to display some boot page or something when it’s first opened, and then invoke a Scheme when the desktop is opened. That seems unlikely, so let’s move on.

JS

Not too familiar with JS, the following methods from the network

< script > if (window. The navigator. Standalone = = true) {var LNK = document. GetElementById (" your scheme with the < a > tag ID "). Click (); // Open a scheme in the way you know how, with a link tag like: <a href="tel:// XXX ">} else {document.getelementById (" MSG "). InnerHTML ='<div style="font-size:12px"> // Here you can load your boot page} </script>Copy the code

You can try saving a page in Safari to your desktop, and when you open the page, you’ll find that Safari is not full screen, and Safari is full screen when you open it with a shortcut. This is a breakthrough.

if (window.navigator.standalone == true)
Copy the code

Determine if the current page is full screen, if not, then we display the boot page, if it is full screen, we open a link. At this point, the previous problem is solved.

You can already do this

Now you can deploy a web page on the server to do this. However, there are still disadvantages, each click shortcut we need to visit this page, if the network is not good, then it is a great delay, (such as xx post bar current situation).

Further optimization using Data URI Scheme

We want this page to be web-independent. In this process, I have tried many schemes, but here is only one that I think is the best.

A Data URI Scheme (data-URI is a kind of URI that can contain an image on a Web page without requiring any additional HTTP requests), for example, if you want to put an image on a Web page, the image will have an address. The acquisition of pictures is the need to access the network. But with DataURI, we can base64 encode images directly to the page.

! [](http://xxxx/xx.png) -> ! [](http://upload-images.jianshu.io/upload_images/1971004-4e4b821f981fd216.png)Copy the code

Here, we are going to use this way to store our web page in the address bar, first, we will do the page (including the boot page and jump scheme) through base64 encoding into DataURIScheme, then, we put such a new page label. The purpose of this new page is to act as an intermediary, so nothing else can be written.

<meta http-equiv="refresh" content="0; URL = 'your datauri >'Copy the code

This new page you need to deploy to the server, and then the application opens this page, and when it does, the page will refresh itself once, and you’ll find that your encoded page appears in the address bar, isn’t that amazing? Then you add a shortcut to the page to the desktop. Disconnect from the Internet and try opening this shortcut again.

Project Demo: iOS add shortcut to desktop