detect-ios-webview/index.html at main · SachinCodeMatrix/detect-ios-webview · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Detect iOS WebView</title>
  <base href="/">

  <style>
      html {
          height: 100vh;
      }

      body {
          height: 100%;
          position: fixed;
      }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/1.0.35/ua-parser.min.js"></script>

</head>
<body >

<pre>
  This page tries to detect iOS WebView (WKWebView, SFSafariViewController and UIWebView)
</pre>

<div>OS:      <span id="os-text"></span></div>
<div>WebView: <span id="web-view-text"></span></div>


    <script>
      function detectIosWebView()
      {
        // Method #1
        // See: https://developer.apple.com/documentation/webkit/wkscriptmessagehandler
        // window.webkit.messageHandlers is defined in WKWebView with WKScriptMessageHandler
        // 1) if window.webkit.messageHandlers is present then it is 100% WKWebView
        // 2) if window.webkit.messageHandlers is not present then it could be:
        //    2.1) WKWebView without WKScriptMessageHandler
        //    2.2) not a WKWebView
        if(window?.webkit?.messageHandlers)
        {
            return true;
        }

        // Method #2
        // This code relies on CSS styles
        /*
            html {
                height: 100vh;
            }

            body {
                height: 100%;
                position: fixed;
            }
        */

        const webViewMode = window.document?.documentElement?.clientHeight === window.document?.documentElement?.scrollHeight;
        return webViewMode
      }


      function isMobileSafariInDesktopMode()
      {
          // iOS 13 and iPadOS have a setting: Settings -> Safari -> Request Desktop Website -> All websites
          // It reports Mobile Safari as Desktop Safari.

          const uaParser = new UAParser(window.navigator.userAgent);
          const browser = uaParser.getBrowser();

          if ((browser.name !== 'Safari') || (Number(browser.major) < 13))
          {
              // Not a Safari 13+
              return false;
          }

          let mobilePoints = 0;

          // maxTouchPoints is 0 on desktop Safari
          if (window.navigator.maxTouchPoints > 1)
          {
              mobilePoints += 1;
          }

          // 'ontouchstart' is not defined on desktop Safari
          if ('ontouchstart' in window)
          {
              mobilePoints += 1;
          }

          // navigator.standalone is not defined on desktop Safari
          if ((typeof (window.navigator).standalone) !== 'undefined')
          {
              mobilePoints += 1;
          }

          return mobilePoints >= 2;
      }

      function isiOS()
      {
          const uaParser = new UAParser(window.navigator.userAgent);
          const browser = uaParser.getBrowser();
          const os = uaParser.getOS();

          return (os.name === 'iOS') ||
                 (browser.name === 'Mobile Safari') ||
                 isMobileSafariInDesktopMode();
      }
    </script>

    <script>
      let osEl = document.querySelector("#os-text");
      let webViewEl = document.querySelector("#web-view-text");


      if (isiOS())
      {
        osEl.textContent = "iOS";
        webViewEl.textContent = detectIosWebView() ? "Yes" : "No";

if( detectIosWebView()){
window.open()

}


      } else {
        osEl.textContent = "This is not an iOS browser";
        webViewEl.textContent = "n/a";
      }

    </script>
</body>
</html>