How to create an Add to Home screen instructions page for iOS web applications

Question

I have a web application that can be easily added to the main screen of an iOS device, with a fancy icon.

However, I noticed that some applications may load what appears to be a completely separate page when viewed from Safari before the user adds it to the main screen.

This "special" page tells the user how to add it to the main screen, and when that happens, this is another page.

Noticeably, http://darksky.net used this before they made the real application. The Workflows application does this when you add Workflow to the home screen. See screenshot below.

I don’t understand things correctly or is there a way to have a different page load when viewing with Safari and another one when it is added to the main screen?

Answer 1

You can determine whether the site visitor is on the iOS device with some JavaScript , or show or hide cookie-based instructions:

• Check if iOS works on the device:

  if(!(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)){ return false; }
  

• Verify that the current view is already in webapp:

  if(window.navigator.standalone == true){ return false; }
  

• Check that you have already created a cookie for this user:

  if(document.cookie.search("alreadAsked") >= 0){ return false; }
  

• Request a user by displaying the "Add to Homescreen" element on your page or by redirecting it to another page:

  document.getElementById("hiddenPrompt").style.display = 'inherit';
  

• cookie, . cookie , "", , " ":

  document.cookie = "alreadAsked=true; expires=Thu, 18 Dec 2099 12:00:00 UTC";
  

:

// On page load
(function() {
  // Check if iOS
  if(!(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)){ return false; }

  // Check if already in webapp
  if(window.navigator.standalone == true){ return false; }

  // Check if you already asked them to add to homescreen
  if(document.cookie.search("alreadAsked") >= 0){ return false; }

  // Ask user to add to homescreen
  document.getElementById("hiddenPrompt").style.display = 'inherit';
});

// After clicking a button to dismiss prompt
function hidePromptInFuture(){
  // Do not show prompt again
  document.cookie = "alreadAsked=true; expires=Thu, 18 Dec 2099 12:00:00 UTC";
}