gpt4 book ai didi

javascript - 如何检查 Svelte 应用程序的浏览器兼容性?

转载 作者:行者123 更新时间:2023-12-05 01:12:00 30 4
gpt4 key购买 nike

我们希望避免在我们的 svelte/sapper 应用程序中出现不受支持的浏览器的问题。

1。问题:检测 Internet Explorer

我想警告用户,我们用 Sapper/Svelte 编写的应用程序与 Internet Explorer 不兼容。它可以是简单的纯文本消息或重定向到某个错误页面。

  • 如果出现消息,我想要的是在显示警告消息后停止执行任何进一步的代码。
  • 如果将选择重定向,则不需要停止执行。

现在我有了这个代码

<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>

template.html 文件中。这是否足以检测所有 IE 浏览器(使用旧引擎)?

2。问题:在运行时检测任何其他缺失的功能

我认为检测 IE 可能不足以进行正确的浏览器兼容性检测。我可以使用一些通用的 Svelte 兼容性检测功能吗?

我仍然想要一些最后的代码块,如果应用程序会在运行时在某些不受支持的功能(本地存储、扩展运算符、服务 worker ...)上崩溃,而不是我想要的显示消息或将用户重定向到错误页面。

更新: 我使用带有 meta 标签的 IE 条件标签。如果需要更好地检测浏览器功能,我会以在应用初始化期间执行的测试形式实现它。

最佳答案

rollup sapper 模板包括对“传统模式”的支持。它没有在任何地方记录,但它使用 babel 为旧浏览器创建单独的 javascript 文件。如果你使用这个 ES6 语法,如果 babel 配置正确,应该不会出现问题。你的站点应该在没有 service worker 的情况下仍能正常运行。对于其他功能,例如本地存储,我会根据需要测试特定功能并尝试优雅地失败。

如果您对这里的 Sapper 用来检测旧版浏览器并加载适当的 js 文件的代码感到好奇:

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

关于javascript - 如何检查 Svelte 应用程序的浏览器兼容性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62559415/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com