title: Detect if user is using webview for android/iOS or a regular browser
body: <p>How to detect if the user is browsing the page using <strong>webview</strong> for <strong>android</strong> or <strong>iOS</strong>?</p>
  
  <p>There are <em>various</em> solutions posted all over stackoverflow, but we don't have a bulletproof solution yet for both OS.</p>
  
  <p>The aim is an if statement, example:</p>
  
  <pre><code>if (android_webview) {
      jQuery().text('Welcome webview android user');
  } else if (ios_webview) {
      jQuery().text('Welcome webview iOS user');
  } else if (ios_without_webview) {
      // iOS user who's running safari, chrome, firefox etc
      jQuery().text('install our iOS app!');
  } else if (android_without_webview) {
      // android user who's running safari, chrome, firefox etc
      jQuery().text('install our android app!');
  }
  </code></pre>
  
  <h1>What I've tried so far</h1>
  
  <p><strong>Detect iOS webview</strong> (<a href="https://stackoverflow.com/a/30495399/1185126">source</a>):</p>
  
  <pre><code>if (navigator.platform.substr(0,2) === 'iP'){
  
    // iOS (iPhone, iPod, iPad)
    ios_without_webview = true;
  
    if (window.indexedDB) {
      // WKWebView
      ios_without_webview = false; 
      ios_webview = true; 
    }
  
  }
  </code></pre>
  
  <p><strong>Detect android webview</strong>, we have a number of solutions like <a href="https://stackoverflow.com/questions/12727117/android-webview-user-agent-vs-browser-user-agent">this</a> and <a href="https://stackoverflow.com/questions/6783185/detect-inside-android-browser-or-webview">this</a>. I'm not sure what's the appropriate way to go because every solution seems to have a problem. </p>