Monday, September 8, 2014

Browser Compatibility Matrix

If you are deploying your new UI5 app for the public, you maybe will run into additional support needs.

The reason for this are the UI5 SDK restrictions concerning supported devices. Currently the following plattforms/devices are supported by the UI5 SDK:

UI5 Browser Compatibility Matrix

Maybe this will change in the future, so the latest support information can be found at the SAP Plattform Availability Matrix (PAM) or inside the UI5 SDK Documentation.

The following post will show you, how we handle unsupported browsers to decrease the needs for customer support...

Today Modernizr is the state-of-the-art feature detection library used for a lot of public web projects. This library will help to find out, which features are supported by the used browser.

The UI5 SDK offers some classes "sap.ui.Device.*" to get additional information on supported operating systems, devices and features.

By adding the css class "no-js" to the HTML tag (the same way prefered by Modernizr), you have a special css class for styling unsupported information. Modernizr will remove this class, if JavaScript is enabled, so the same is done using the corresponding UI5 feature.

To recognize disabled JavaScript, the HTML page contains a "noscript" tag that loads a support page using an iframe. This way a user will be informed to enable JavaScript. The support page also contains a table with additional support information.

If the first level check (JavaScript enabled) is handled successfully, the app launch process will check custom conditions. If the user is running on IE lower version 9, we will inject the support iframe and stop the general app launch behavior. This is to make sure, that the user is using a supported browser.

One of the most annoying things is, that an IE that runs in the compatibilty mode is recocnized/handled as a lower version beyond the currently used one. In company intranets, the compatibility mode is controlled by the admins (not the user itself) and maybe all new apps are automatically started in compatibility mode.

This makes a lot of trouble, so we will inform the user how he can switch off the compatibility mode "How to change IE Compatibility Mode" and use "EDGE = Newest Runtime" instead.

Even if your app is running inside an iframe (e.g. portal/portlet) IE is not able to give the iframe a higher rendering engine than the parent window itself! You see there are a lot of things to know if it will come to a customer support case.

Currently the is no feature like "isSupported" inside the SDK so you have have to implement your custom tests (maybe check UserAgent for Opera, etc.). Also our support.html page uses only plain cross browser JavaScript to add additional information to the output.

The following UI5 page example will give you an idea how it works.

<!DOCTYPE HTML>
<html class="no-js">
  <head>
    <!-- ... (general sapui5 head tags) -->
    <style>
      .no-js body {
      padding: 0;
      margin: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
      background-color: darkgray;
      }
    </style>
    <script>
      sap.ui.getCore().attachInit(function () {   
       // SOF BROWSER COMPATIBILITY TEST
       var bSupportedBrowser = true,
        sErrorCode = null,
        sError = null,
        sVersion = sap.ui.Device.browser.version;
       
       // remove no-js class
       $("html").removeClass("no-js");
       
       if (sap.ui.Device.browser.msie && sap.ui.Device.browser.version < 9) {
        bSupportedBrowser = false;
        sErrorCode = "IE";
       } 
       // EOF BROWSER COMPATIBILITY TEST
       
       if (!bSupportedBrowser) {
        var sSupportUri = "support.html?" + jQuery.sap.encodeURLParameters({
         errorCode: sErrorCode,
         error: sError,
         version: sVersion
        });         
        $("#content").append("<iframe src='" + sSupportUri + "' width='100%' height='100%' frameborder='0'>");
       } else {
        // normal UI5 component launch code... 
       }   
      });
    </script>
  </head>
  <body id="content" class="sapUiBody" role="application">
    <noscript>
      <iframe src="support.html" width="100%" height="100%" frameborder="0"></iframe>
    </noscript>
  </body>
</html>

No comments:

Post a Comment

Thank you for your comment!

The comment area is not intended to be used for promoting sites!
Please do not use such links or your comment will be deleted.

Holger

Note: Only a member of this blog may post a comment.