How to check if an app is installed from a web-page on an iPhone

Question

I want to create a web-page  a page that will redirect an iPhone to the app-store if the iPhone does not have the application installed  but if the iPhone has the app installed I want it to open the application   I have already implemented a custom url in the iPhone application so I have an url for the application that is something like   myapp      And if this url is invalid  I want the page to redirect to the app store  Is this possible at all   If I don t have the application installed on the phone and write the myapp    url in safari  all I get is an error message   Even if there exists an ugly hack with javascript I would really like to know

User · Answer

You can check out this plugin that tries to solve the problem. It is based on the same approach as described by missemisa and Alastair etc, but uses a hidden iframe instead.

https://github.com/hampusohlsson/browser-deeplink

User · Answer

As of 2017  it seems there s no reliable way to detect an app is installed  and the redirection trick won t work everywhere   For those like me who needs to deep link directly from emails  quite common   it is worth noting the following    Sending emails with appScheme    won t work fine because the links will be filtered in Gmail Redirecting automatically to appScheme    is blocked by Chrome  I suspect Chrome requires the redirection to be synchronous to an user interaction  like a click  You can now deep link without appScheme    and it s better but it requires a modern platform and additional setup  Android iOS     It is worth noting that other people already thought about this in depth  If you look at how Slack implements his  magic link  feature  you can notice that    It sends an email with a regular http link  ok with Gmail  The web page have a big button that links to appScheme     ok with Chrome

User · Answer

I need to do something like this I ended up going with the following solution   I have a specific website URL that will open a page with two buttons   1  Button One go to website   2  Button Two go to application  iphone   android phone   tablet  you can fall back to a default location from here if the app is not installed  like another url or an app store    3  cookie to remember users choice    lt head gt   lt title gt Mobile Router Example  lt  title gt     lt script type  text javascript  gt      function set cookie name value                  js code to write cookie           function read cookie name              jsCode to read cookie            function goToApp appLocation            setTimeout function                 window location   appLocation                  this is a fallback if the app is not installed  Could direct to an app store or a website telling user how to get app              25           window location    custom-uri   AppShouldListenForThis              function goToWeb webLocation            window location   webLocation             if  readCookie  appLinkIgnoreWeb       true              goToWeb  http   somewebsite               else if  readCookie  appLinkIgnoreApp       true             goToApp  http   fallbackLocation              lt  script gt   lt  head gt   lt body gt     lt div class  iphone table padding  gt   lt table border  0  cellspacing  0  cellpadding  0  style  width 100    gt       lt tr gt           lt td class  iphone table leftRight  gt  amp nbsp  lt  td gt           lt td gt               lt  -- INTRO -- gt               lt span class  iphone copy intro  gt Check out our new app or go to website lt  span gt           lt  td gt           lt td class  iphone table leftRight  gt  amp nbsp  lt  td gt       lt  tr gt       lt tr gt           lt td class  iphone table leftRight  gt  amp nbsp  lt  td gt           lt td gt               lt div class  iphone btn padding  gt                    lt  -- GET IPHONE APP BTN -- gt                   lt table border  0  cellspacing  0  cellpadding  0  class  iphone btn  onclick  set cookie  appLinkIgnoreApp  document getElementById  chkDontShow   checked  goToApp  http   getappfallback    gt                       lt tr gt                           lt td class  iphone btn on left  gt  amp nbsp  lt  td gt                           lt td class  iphone btn on mid  gt                               lt span class  iphone copy btn  gt                                  Get The Mobile Applications                              lt  span gt                           lt  td gt                           lt td class  iphone btn on right  gt  amp nbsp  lt  td gt                       lt  tr gt                   lt  table gt                lt  div gt           lt  td gt           lt td class  iphone table leftRight  gt  amp nbsp  lt  td gt       lt  tr gt       lt tr gt           lt td class  iphone table leftRight  gt  amp nbsp  lt  td gt           lt td gt               lt div class  iphone btn padding  gt                    lt table border  0  cellspacing  0  cellpadding  0  class  iphone btn   onclick  set cookie  appLinkIgnoreWeb  document getElementById  chkDontShow   checked  goToWeb  http   www website com    gt                       lt tr gt                           lt td class  iphone btn left  gt  amp nbsp  lt  td gt                           lt td class  iphone btn mid  gt                               lt span class  iphone copy btn  gt                                  Visit Website com                              lt  span gt                           lt  td gt                           lt td class  iphone btn right  gt  amp nbsp  lt  td gt                       lt  tr gt                   lt  table gt                lt  div gt           lt  td gt           lt td class  iphone table leftRight  gt  amp nbsp  lt  td gt       lt  tr gt       lt tr gt           lt td class  iphone table leftRight  gt  amp nbsp  lt  td gt           lt td gt               lt div class  iphone chk padding  gt                    lt  -- CHECK BOX -- gt                   lt table border  0  cellspacing  0  cellpadding  0  gt                       lt tr gt                           lt td gt  lt input type  checkbox  id  chkDontShow    gt  lt  td gt                           lt td gt                               lt span class  iphone copy chk  gt                                   lt label for  chkDontShow  gt  amp nbsp Don amp rsquo t show this screen again  lt  label gt                               lt  span gt                           lt  td gt                       lt  tr gt                   lt  table gt                lt  div gt           lt  td gt           lt td class  iphone table leftRight  gt  amp nbsp  lt  td gt       lt  tr gt   lt  table gt    lt  div gt    lt  body gt   lt  html gt

User · Answer

After compiling a few answers  I ve come up with the following code  What surprised me was that the timer does not get frozen on a PC  Chrome  FF  or Android Chrome - the trigger worked in the background  and the visibility check was the only reliable info   var timestamp               new Date   getTime    var timerDelay                5000  var processingBuffer    2000   var redirect   function url        window location   url    log  ts      timestamp      redirecting to      url     var isPageHidden   function         var browserSpecificProps    hidden 1  mozHidden 1  msHidden 1  webkitHidden 1       for  var p in browserSpecificProps            if typeof document p       undefined            return document p                     return false     actually inconclusive  assuming not   var elapsedMoreTimeThanTimerSet   function        var elapsed   new Date   getTime   - timestamp    log  elapsed      elapsed     return timerDelay   processingBuffer  lt  elapsed    var redirectToFallbackIfBrowserStillActive   function       var elapsedMore   elapsedMoreTimeThanTimerSet      log  hidden     isPageHidden       time     elapsedMore     if  isPageHidden      elapsedMore        log  not redirecting       else      redirect  appStoreUrl          var log   function msg       document getElementById  log   innerHTML    msg     lt br gt       setTimeout redirectToFallbackIfBrowserStillActive  timerDelay   redirect  nativeApp         JS Fiddle

User · Answer

Alistair pointed out in this answer that sometimes users will return to the browser after opening the app   A commenter to that answer indicated that the times values used had to be changed depending on iOS version   When our team had to deal with this  we found that the time values for the initial timeout and telling whether we had returned to the browser had to be tuned  and often didn t work for all users and devices   Rather than using an arbitrary time difference threshold to determine whether we had returned to the browser  it made sense to detect the  pagehide  and  pageshow  events   I developed the following web page to help diagnose what was going on   It adds HTML diagnostics as the events unfold  mainly because using techniques like console logging  alerts  or Web Inspector  jsfiddle net etc all had their drawbacks in this work flow   Rather than using a time threshold  the Javascript counts the number of  pagehide  and  pageshow  events to see whether they have occurred   And I found that the most robust strategy was to use an initial timeout of 1000  rather than the 25  50  or 100 reported suggested by others     This can be served on a local server  e g  python -m SimpleHTTPServer and viewed on iOS Safari   To play with it  press either the  Open an installed app  or  App not installed  links   These links should cause respectively the Maps app or the App Store to open   You can then return to Safari to see the sequence and timing of the events    Note  this will work for Safari only   For other browsers  like Chrome  you d have to install handlers for the pagehide show-equivalent events    Update  As  Mikko has pointed out in the comments  the pageshow pagehide events we are using are apparently no longer supported in iOS8    lt html gt   lt head gt   lt  head gt   lt body gt   lt a href  maps     onclick  clickHandler    gt Open an installed app lt  a gt   lt br  gt  lt br  gt   lt a href  xmapsx     onclick  clickHandler    gt App not installed lt  a gt   lt br  gt    lt script gt   var hideShowCount   0   window addEventListener  pagehide   function         hideShowCount         showEventTime  pagehide          window addEventListener  pageshow   function         hideShowCount         showEventTime  pageshow          function clickHandler        var hideShowCountAtClick   hideShowCount       showEventTime  click         setTimeout function                     showEventTime  timeout function    hideShowCount-hideShowCountAtClick    hide show events                    if  hideShowCount    hideShowCountAtClick                          app is not installed  go to App Store                     window location    http   itunes apple com app                                    1000      function currentTime         return Date now   1000      function showEventTime event       var time   currentTime         document body appendChild document createElement  br         document body appendChild document createTextNode time     event       lt  script gt   lt  body gt   lt  html gt

User · Answer

iOS Safari has a feature that allows you to add a  smart  banner to your webpage that will link either to your app  if it is installed  or to the App Store   You do this by adding a meta tag to the page   You can even specify a detailed app URL if you want the app to do something special when it loads   Details are at Apple s Promoting Apps with Smart App Banners page   The mechanism has the advantages of being easy and presenting a standardized banner   The downside is that you don t have much control over the look or location  Also  all bets are off if the page is viewed in a browser other than Safari

User · Answer

To further the accepted answer  you sometimes need to add extra code to handle people returning the browser after launching the app- that setTimeout function will run whenever they do  So  I do something like this   var now   new Date   valueOf    setTimeout function          if  new Date   valueOf   - now  gt  100  return      window location    https   itunes apple com appdir      25   window location    appname        That way  if there has been a freeze in code execution  i e   app switching   it won t run

User · Answer

As far as I know you can not  from a browser  check if an app is installed or not   But you can try redirecting the phone to the app  and if nothing happens redirect the phone to a specified page  like this   setTimeout function      window location    https   itunes apple com appdir      25   window location    appname        If the second line of code gives a result then the first row is never executed   Hope this helps   Similar question    iPhone browser  Checking if iPhone app is installed from browser Is it possible to register a http domain-based URL Scheme for iPhone apps  like YouTube and Maps

User · Answer

The date solution is much better than others  I had to increment the time on 50 like that  this is a Tweeter example     on click or your event handler   var twMessage    Your Message to share   var now   new Date   valueOf    setTimeout function         if  new Date   valueOf   - now  gt  100  return     var twitterUrl    https   twitter com share text   twMessage     window open twitterUrl    blank       50   window location    twitter   post message   twMessage    the only problem on Mobile IOS Safari is when you don t have the app installed on device  and so Safari show an alert that autodismiss when the new url is opened  anyway is a good solution for now

User · Answer

Didn t read all of these but may be use an iframe and adding the source to   my app   whatever    Then check regularly on set interval of the page is 404or not    You could also use Ajax call  If 404 response then app is not installed

[iphone] How to check if an app is installed from a web-page on an iPhone?

Examples related to iphone

Examples related to ios

Examples related to web-applications

Examples related to mobile-safari