preface

Recently, I made a requirement in the code of ride, adding a shortcut to the desktop, and clicking the desktop icon to open the APP and enter the corresponding page. The function is small, but it involves a lot of knowledge points, including openURL, HTML, JavaScript, Data URI Scheme, Base64 and so on. By the way, all these knowledge are learned through this requirement, and then sorted out.

The principle of

The operation process is actually very simple, just open a boot page in the app through Safari browser, and then click Add to the home screen, as shown in the picture below

“, then click “Add”. Click the icon to open the APP directly and jump to the corresponding page. There are two problems involved in this process

  1. The url of the boot page is saved when you add it to the desktop. Why is the boot page not opened when you click open, but directly jumped to the app? How to achieve this?
  2. How can I load the page content and open the app by clicking the icon when there is no Internet connection?

Solution to the first question is that opened from inside the app to guide the default page is full, but from mobile phone desktop is full screen click on the icon to open, so you can according to whether the full screen to perform the corresponding script, if it is full screen so long executing scripts to jump to the app, if not a full screen to add the corresponding HTML content, Render the lead page. To judge whether a full-screen JavaScript method is the window. The navigator, standalone, to true is full screen, is false is not a full screen.

The solution to the second problem is as follows: the boot page needs to be loaded even when the Internet is off, so obviously the first thing is to save it in our app. The page opened through openURL in the APP cannot be directly opened in this app. So we write an HTML page that goes through and saves it on our server, and we get the URL of the HTML on that server. Then we use the Data URI Scheme technology to turn our local HTML page into a string after the URL question mark of the server HTML. When the assembled URL is opened through openURL, the page is loaded successfully. Then, through JavaScript method, get the string of our local boot page HTML, use window.location.replace() to directly replace the current page with the local page, and then add the added local page to the desktop. The link saved here is a string generated from a local page through the Data URI Scheme.

steps

1. Develop the boot page

The HTML code for the boot page is as follows


      
<html>
<head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta content="text/html charset=UTF-8" http-equiv="Content-Type" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0, user - scalable = no" />
    <link rel="apple-touch-icon" href="TransitCodeIconImageData">
    <title>TransitCodeAppTitle</title>
</head>
<body>
    <a href="TransitCodeAppScheme" id="qbt" style="display:none"></a>
   <span id="msg"></span>
</body>
<script>
    if (window.navigator.standalone == true) {
       var lnk = document.getElementById("qbt").click();
    } else {
        document.getElementById("msg").innerHTML='
       
 
         
       
';
    }
</script>
</html>
Copy the code

Some strings contained in the code have the following meanings: TransitCodeIconImageData: shortcut icon on desktop TransitCodeAppTitle: shortcut name TransitCodeAppScheme: Jump pages corresponding to the scheme, such as hellobike://hellobike.com/transitcode/home TransitCodeLaunchImageData: guide the page background

General these several strings instead of the actual content, mainly for the unified replacement behind, but also convenient for other business side to use, or write dead can only ride code a business used.

Here by the window. The navigator. Standalone page guide can know whether the full screen display, if is full screen then jump to the corresponding page app, not full screen is inserted into the specific HTML content, lead content.

2. Convert the boot page to a string using the Data URI Scheme technique

The following code

- (NSString *)oppcreateDesktopWithPreUrl:(NSString *)preUrl iconUrl:(NSString *)iconUrl launchImageUrl:(NSString *)launchImageUrl appTitle:(NSString *)title scheme:(NSString *)scheme { if ([preUrl length] == 0) { return nil; } NSString *contentHtmlString = [self contentHtmlWithIconImageString:iconUrl launchImageString:launchImageUrl title:title appScheme:scheme]; contentHtmlString = [contentHtmlString base64EncodedString]; NSString *DataURIString = [NSString stringWithFormat:@"data:text/html;charset=utf-8;base64,%@",contentHtmlString]; NSString *urlString = [NSString stringWithFormat:@"%@%@", preUrl, DataURIString]; return urlString; } -(NSString *)contentHtmlWithIconImageString:(NSString *)iconImageString launchImageString:(NSString *)launchImageString title:(NSString *)title appScheme:(NSString *)scheme{ NSString *contentHtmlPath = [self getcontentHTMLTempletPath]; NSString *contentHtmlString = [NSString stringWithContentsOfFile:contentHtmlPath encoding:NSUTF8StringEncoding error:nil]; Replacement string / * * / contentHtmlString = [contentHtmlString stringByReplacingOccurrencesOfString: @ "TransitCodeIconImageData" withString:iconImageString]; contentHtmlString = [contentHtmlString stringByReplacingOccurrencesOfString:@"TransitCodeLaunchImageData" withString:launchImageString]; contentHtmlString = [contentHtmlString stringByReplacingOccurrencesOfString:@"TransitCodeAppTitle" withString:title]; contentHtmlString = [contentHtmlString stringByReplacingOccurrencesOfString:@"TransitCodeAppScheme" withString:scheme]; return contentHtmlString; } - (NSString *)getcontentHTMLTempletPath{ NSString *path = [[JYTransitCodeBundle() resourcePath] stringByAppendingPathComponent:@"/content.html"]; return path; }Copy the code

The Data URI Scheme technology is to convert a file, image or HTML file into a string and load it directly in HTML through Base64 encryption, so there is no need to request the server. Here we need to convert the local bootstrap HTML page described above to a string, which we then spell to the end of the server’S HTML URL.

See code can know, through getcontentHTMLTempletPath method to obtain a local HTML file path is then replaced with rides inside content code shortcut related content. The HTML content is then base64 encoded. NSString stringWithFormat:@”data:text/ HTML;charset=utf-8;base64,%@”,contentHtmlString; With data: text/HTML; charset=utf-8; Base64, which we’ll see later when we store it.

3. Open the SERVER HTML page and replace it with the local boot page

Use the string generated above to spell the url of the server HTML page (here I put the HTML file directly on the CDN and get the link), the code is as follows

- (void)addShortcutToDesk { NSString *preUrl = @"https://m.hellobike.com/resource/app/transitcode/Wqwc6vYfE-hrud7-nBDeU.html"; preUrl = [NSString stringWithFormat:@"%@?dataurl=", kSafeStr(preUrl)]; NSString *title = @" hello "; NSString *scheme = @"hellobike://hellobike.com/transitcode/home"; NSString *iconUrl = @"https://m.hellobike.com/resource/app/transitcode/OZtmwCABaAMfiaE2IAC6E.png"; NSString *launchImageUrl = @"https://m.hellobike.com/resource/app/transitcode/SRJ3IqkkcZIn2MPAzVmS4.png"; NSString *urlString = [self oppcreateDesktopWithPreUrl:preUrl iconUrl:iconUrl launchImageUrl:launchImageUrl appTitle:title scheme:scheme]; UIApplication *application = [UIApplication sharedApplication]; NSURL *URL = [NSURL URLWithString:urlString]; If (@available(iOS 10.0, *)) {[Application openURL:URL options:@{} completionHandler:^(BOOL success) {}]; } else { [application openURL:URL]; }}Copy the code

The HTML page saved by the server is very simple. After loading, the main task is to obtain the local boot page content through the above spliced links, and then load the boot page. The code is as follows


      
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
</body>
<script type="text/javascript">
    const dataurl = ' ';
    var url = location.search;
    if (url && url.length > 1 && url.indexOf('? dataurl=')! = =- 1) {
        url = url.replace("? dataurl="."");
        window.location.replace(url);
    } else {
        window.location.replace(dataurl);
    }
</script>
</html>
Copy the code

Use the location.search method to get the concatenated URL content, then get the content we put together, and use the window.location.replace method to replace the content again to display our local boot page. At this point, the display is not full screen display, which is not the same as opening the shortcut key.

4. Follow the instructions on the guide page

There is a detailed flow chart on the guide page. You can save it according to the diagram.

Afterword.

This requirement function is very simple, but it still involves a lot of knowledge, which is relatively weak when it comes to the front end. Therefore, it is necessary to accumulate more relevant knowledge to better complete the relevant requirements.