Supporting Legacy Browsers With Sharepoint Jsom

The Problem of Legacy Browser Support in SharePoint

Many organizations still need to support older browsers like Internet Explorer 8 and 9 for SharePoint. Although Microsoft ended support for these legacy browsers, a considerable number of users still rely on them for various business reasons. However, these older browsers lack support for newer web standards and JavaScript capabilities utilized by the SharePoint JavaScript Object Model (JSOM). This causes common issues when using JSOM from legacy IE versions:

• Limited HTML5, CSS3, and modern JavaScript support causes page layout and styling issues
• Absence of Promises often breaks asynchronous SharePoint code written using modern techniques
• Outdated AJAX and HTTP implementations create problems for REST and CSOM calls
• Lack of standards support like querySelector and Fetch prevents direct use of many JSOM APIs

Continuing to support IE8, IE9, and other legacy browsers is still a reality for many organizations due to having older PCs and custom in-house web apps that require these legacy browsers. Upgrading all user devices and re-engineering custom web apps can carry significant upgrade costs. As a result, SharePoint developers need techniques to enable continued use of SharePoint sites and portals from legacy browsers even when using modern JSOM code.

Polyfilling Older Browsers for SharePoint JSOM Compatibility

A “polyfill” is code that retrofits older browsers with support for modern standards they lack. Polyfill scripts add implementations of newer APIs and object methods directly into legacy browser environments. This enables legacy browsers to run modern JavaScript code they couldn’t support natively. Polyfills are extremely useful for getting SharePoint JSOM code working across legacy IE 8/9 and other outdated browsers. Some key polyfill abilities enabling JSOM support in older browsers include:

• Promise – Polyfills like Bluebird add Promise functionality for async code support
• Fetch – Polyfills like Github’s Fetch API shim enable Ajax REST calls
• querySelector – Polyfills add missing element selection methods
• classList – Enables easier use of CSS classes and styles in JS
• Custom Event – Provides missing event targeting and triggering

Below is sample polyfill code to retrofit Promise and Fetch API support into legacy IE browsers:

By using conditional comments, these polyfill scripts target just IE 10 and lower without impacting modern browsers. To use these polyfills, simply reference them from your SharePoint master pages and pages anywhere you want to call JSOM code from potential legacy browsers. They smooth over the gaps in functionality that would otherwise prevent your JSOM solutions from working in IE 8/9/10.

Translating Modern JSOM Code to Legacy-Compatible Code

In additional to polyfills, you need to translate some modern JavaScript syntax, APIs and techniques to alternative code forms when targeting legacy browsers with JSOM:

• Avoid arrow functions and use regular anonymous functions instead
• Replace const and let variable declarations with var
• Use anonymous function callbacks rather than promises for async logic
• Omit modern Array, String, and Math methods lacking support

For example, the below modern async SharePoint call needs to be rewritten for legacy IE support:

// Modern async JSOM code NOT supported in legacy IE 

const clientContext = new SP.ClientContext(url);

clientContext.executeQuery()
  .then(function() {     
    // query succeeded 
  })
  .catch(function(error) {
    // query failed 
  });

Here is async approach updated legacy IE browser support:

 
// Legacy-compatible async JSOM code

var clientContext = new SP.ClientContext(url);

clientContext.executeQueryAsync(
  function() { 
    // Success callback  
  }, 
  function(error) {
    // Error callback
  }
);

Note the changes from modern promises to older asynchronous callbacks. Also let and arrow functions are replaced with var and anonymous functions. With proper code translation layered on top of polyfills, SharePoint JSOM solutions can achieve broad legacy browser compatibly.

Testing Cross-Browser Compatibility

Verifying functionality across older IE versions is critical when supporting legacy browsers with SharePoint JavaScript solutions. Useful techniques for testing JSOM browser support include:

• Set up dedicated virtual machines for testing specific IE versions like IE8 or IE9
• Use browser syncing tools to catch JavaScript errors and debug locally on legacy browsers
• Automate UI testing across browsers using Selenium scripts for result validation
• Perform security scans from older IE to catch unsupported encryption cases

Setting up a Windows 7 VM with IE 8/9 and using software like BrowserSync is invaluable for catching any legacy browser issues early in development:

// Invoke browser-sync pointing to VM IP

browser-sync start 
  --proxy "http://" 
  --files "*.js"

With watch capabilities, automated UI testing, and error syncing to your local IDEs, supporting legacy browsers during JSOM development is more achievable.

Legacy Browser Support Beyond JSOM

In additional to polyfills and code translation, some additional techniques for supporting legacy browsers accessing SharePoint sites include:

• Gracefully degrade UI experiences removing unsupported HTML/CSS/JS features
• Server-side browser detection to selectively send legacy-optimized pages
• Hybrid server-rendered pages to minimize dependency on client-side JS
• Static content delivery from CDNs for better legacy browser performance

Carefully scoped use of modern APIs like JSOM along with legacy-focused web development techniques creates the best SharePoint experiences across modern as well as aging browser software.