App Icon for Your Web Page

Ways to do this has been around for some years: Make an icon for a smart phone or tablet that, when tapped, opens the browser and loads the desired page.

It's extremely handy when visiting certain web pages repetitively — tap and there you are.

Nowadays, Safari and Chrome make it easy and quick to set up an icon on the home screen. Those are the only browsers I've looked into, so far, related to this feature.

However, no matter how easy it is, people won't do it if they don't know they can.

So I decided to do something about it, for a page I visit at least once a day — the Wordle Hints page. When applicable, the page has a link for instructions, "(How to App This Web Page)" below the web page menu.

When you visit the Wordle Hints page (or any other willbontrager.com page) with an Android phone/tablet or with an iPhone or iPad, the link shows up. Tap it for instructions.

With Android, you get Chrome instructions. With iOS, you get Safari instructions.

Note that Safari on iPad has a setting to request the desktop website instead of the mobile website. iPads with that setting enabled will be seen as a Mac instead of an iPad and the how-to-app link won't be visible.

If you are viewing this web page with an Android phone/tablet or with iPhone/iPad, then you should see a "(How to App This Web Page)" link immediately below this paragraph.

Implementing the App-on-Home-Screen Link

First step —

To implement this feature, first download Mobile Detect and upload it to your server.

Mobile Detect is a PHP script downloaded from GitHub.com to detect the type of computer or device being used. I use it because it is sophisticated and generally accurate. And I have inspected the code.

To download Mobile Detect, go to the raw code Mobile Detect page. Save the page to your hard drive as Mobile_Detect.php (or other *.php file name).

Upload Mobile_Detect.php to your server. The file can be uploaded into any document directory that public browsers can reach. I generally put stand-alone PHP files in the /php directory, but you may have a different directory for that purpose.

When Mobile_Detect.php is on your server, make a note of its location and you are ready for the second step.

Second step —

The second step is the code that provides instructions for your web page visitors.

Here is the code. Below the code, I'll mention the customization and how to use the code.

<?php
$LocationOfMobile_Detect = '/php/Mobile_Detect.php';
$IsMobile = $iOS = $Android = false;
require_once($_SERVER['DOCUMENT_ROOT'].$LocationOfMobile_Detect);
$detectDevice = new Mobile_Detect;
$IsMobile = $detectDevice->isMobile();
if( $detectDevice->isiOS() ) { $iOS = true; }
elseif( $detectDevice->isAndroidOS() ) { $Android = true; }
?>

<?php if( $IsMobile and ($iOS or $Android) ): ?>
<p style="margin-bottom:0;"><a href="javascript:OpenApplikeExperience()">(How to App This Web Page)</a></p>

<div id="applike-experience" style="display:none; border:3px solid #ccc; border-radius:1em; padding:1em;">

   <p style="margin:0;">
   To create an icon on your home screen for an app-like experience.
   </p>

   <?php if( $iOS ): ?>
      <ol style="margin-bottom:0;">
      <li>
      In Safari, select the share icon (perhaps at bottom of screen but more likely at the top).
      </li>
      <li>
      Tap "Add to Home Screen".
      </li>
      </ol>
   <?php endif; ?>

   <?php if( $Android ): ?>
      <ol style="margin-bottom:0;">
      <li>
      In Chrome, select the page menu (may be 3 vertical dots) or the Share icon.
      </li>
      <li>
      Tap "Add Page Shortcut" or "Add to Home Screen", whichever applies to your browser version.
      </li>
      </ol>
   <?php endif; ?>

</div><!-- id="applike-experience" -->
<?php endif; ?>

<script>
function OpenApplikeExperience() { document.getElementById("applike-experience").style.display="block"; }
</script>

There is one customization. Replace /php/Mobile_Detect.php with the location where you put Mobile_Detect.php when you uploaded it to your server.

With that customization complete, you are ready to use the code.

Put the instruction code into your web page wherever you want to make the instructions available. The instruction code can be inserted directly into the web page source code or it can be included from an external file.

To include the instruction code from an external file:

1. Upload the instruction code as AppInstructions.php or other *.php file name that you prefer. Make a note of the uploaded file's location on the server.

2. Now, put this into the web page wherever you want the app icon instructions link to be published.

   <?php include($_SERVER['DOCUMENT_ROOT'].'/php/AppInstructions.php'); ?>
   

   Replace /php/AppInstructions.php with the location of AppInstructions.php on your server.

When the instruction code is inserted directly into your web page or included from an external file, you are good to go.

Use Chrome on an Android phone/table or Safari on iPhone/iPad to load the page. The instructions should appear.

If the instructions do not appear, /php/Mobile_Detect.php might not be correct. Or, if you are using an iPad, it may be set to display the desktop version of web pages rather than the mobile version.

With the instructions, site visitors learn how to save an app icon on their home screen for a 1-tap revisit of your web page.

This article first appeared with an issue of the Possibilities newsletter.

Will Bontrager