Dev Tips : Planning IE11 compatibility with SPFx components and PnPJS library
3.6(71.67%) 12投票

我在使用SPFx组件时遇到的一个常见挑战是,尽管该应用程序在其他浏览器上运行良好,但它在IE11上并不像预期的那样运行。This has delayed many of my projects and puts a lot of risk on production releases.因此在这个博客中,我将试着指出在IE11和其他较老的浏览器中部署复杂的SPFx组件时可能遇到的一些挑战,and some workarounds/rectifications for the same.

限制和挑战

To start with,lets' start with some of the limitations for the complex components in older browsers.

  1. SPFx webparts严重依赖于客户端浏览器,运行在一个隔离的环境中,因此需要有效地计划更重的数据负载。For example,if you are retrieving 1000s of records from a SharePoint list,建议在呈现它们的时候用更小的数据集来分页,所以浏览器内存可以处理它。
  2. 带有react的SPFx Web部件在与第三方库(如pnpjs)一起使用时,主要使用承诺和异步/等待功能。Async/Await是一个很好的功能,与ES6及更高版本兼容。IE11等较旧的浏览器无法通过此授权工作。
  3. 旧的浏览器不能有效地处理承诺链,这有时会丢弃正在进行的委托调用。因此,规划promise调用更简单的方法是按顺序使用它们,而不是将它们链接到三个以上的级别。A brief example is below.
  4. Memory management in IE 11 and some older browsers are not effective for large and complex operations (clickhere)。因此,有效的方法是在需要时使用轻量级类和分页来提取数据。For large datasets use paging to get the data in batches.

How to make it work with IE11?

In order for the solution work on IE11,below are few workarounds and recommendations for the same.

1.使用IE 11 polyfill的PnPJS库。The polyfill allows to load the missing libraries before calling the dependant calls.然而,当polyfill库加载不包含在PnPJS库中的脚本时,可能会有风险。More details could be foundhere.

2.使用sphtpclient和httpclient。The SPHttpClient and HttpClient are core libraries of SPFx and will work fine on IE 11.Elio Struf has a quickblog同时也谈到了这两种方法。下面是每个调用和使用负载处理请求和响应的快速示例。
Get操作

添加操作

三。Avoid using Async/Await calls to minimal usage.使用“then”调用并使用上面所示的响应解析调用。

第四章。使用Ajax调用具有成功和失败处理程序的数据更改调用。This is an old way of doing this but works fine with old browsers.

5.在使用PnPJs的搜索和分类模型等数据密集型调用时要注意。使用SharePoint REST调用并处理响应JSON。我们将在另一个博客中讨论它。

结论

如果没有提前计划,老版本的浏览器总是会给数据建模和解决方案开发带来挑战。黄金法则是在开始任何开发之前考虑解决方案的浏览器兼容性要求。This will help and save lot of pain later.

类别:
应用程序开发和集成, Office 365, SharePoint
标签:
, , ,

留下一个回复

留下一个回复

Subscribe
通知的
Follow Us!

Kloud Solutions Blog - Follow Us!