admin管理员组

文章数量:1335625

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 patible 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 patibility detection. Is there some universal Svelte patibility 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.

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 patible 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 patibility detection. Is there some universal Svelte patibility 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.

  • javascript
  • internet-explorer
  • svelte
Share Improve this question edited Jul 10, 2020 at 21:42 Martin Sršeň asked Jun 24, 2020 at 16:07 Martin SršeňMartin Sršeň 4275 silver badges15 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 6

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);
}());

You're using conditional ment 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.";
}

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.

本文标签： javascriptHow to check browser compatibility of Svelte applicationStack Overflow

版权声明：本文标题：javascript - How to check browser compatibility of Svelte application? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742379330a2463789.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。