How to check browser compatibility of Svelte application?

user_9276806 0
Viewed 2831

We want to avoid problems with non-supported browsers in our svelte/sapper application.

1. Problem: Detect Internet Explorer

I want to warn users that our application written in Sapper/Svelte is not compatible with Internet Explorer. It can be simple plain-text message or redirect to some error page.

  • What I want in case of message is to stop execution of any further code after displaying warning message.
  • If redirect will be chosen then stopping execution is not needed.

Now I have this code

<head>

  ...

  <!-- IE10+ will switch to IE9 behaviour and will respect IE HTML conditional tags -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

  ...

</head>

<body>

  <![if !IE]>
  <div id='sapper'>%sapper.html%</div>
  %sapper.scripts%
  <![endif]>

  <!--[if IE]>
  <h1 style="color: #333; font-family: 'Arial'; font-size: 18px; padding: 24px 18px; text-align: center;">
    We do not support Internet Explorer.
  </h1>
  <p style="font-size: 46px; text-align: center; padding: 12px 0;">:/</p>
  <![endif]-->

</body>

in the template.html file. Will this be enough to detect all IE browsers (with old engine)?

2. Problem: Detect any other missing feature on run-time

I was thinking that detecting the IE may not be enough for proper browser compatibility detection. Is there some universal Svelte compatibility detection function that I can use?

I still want some last-resort block of code that if application will crush in runtime on SOME not supported feature (local storage, spread operator, service worker, ...) than i want to display message or redirect user to error page.

UPDATE: I used IE conditional tags with meta tag. If there will be requirement to better detect browser features I would implement it in form of tests that would be performed during app initialisation.

svelte internet-explorer javascript
2 Answers

The rollup sapper template includes support for "legacy mode". It's not documented anywhere but it creates separate javascript files for older browsers using babel. If you are using this ES6 syntax shouldn't cause problems, if babel is configured appropriately. Your site should still function without a service worker. For other features, such as local storage, I would test for specific features as required and try to fail gracefully.

If you are curious here is the code Sapper uses to detect legacy browsers and load the appropriate js files:

(function() {
    try {
        eval("async function x(){}");
        var main = "${main}"
    } catch (e) {
        main = "${legacy_main}"
    };
    var s = document.createElement("script");
    try {
        new Function("if(0)import('')")();
        s.src = main;
        s.type = "module";
        s.crossOrigin = "use-credentials";
    } catch (e) {
        s.src = "${req.baseUrl}/client/shimport@${build_info.shimport}.js";
        s.setAttribute("data-main", main);
    }
    document.head.appendChild(s);
}());
user_13909270

You're using conditional comment to detect IE which is not supported by IE 10 and 11. If you want to detect all IE version, you could execute the function below at the beginning of the app:

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))  // If Internet Explorer
{
    // If you want to redirect
    window.location.href = "http://www.example.com";
}

For the features, I don't find API in Svelte to detect them all. I think you can use JavaScript to detect the support of the features when you need.

user_114903470
Related