Run an app for Office consistently in different browsers

Apps for Office can run in different browsers, such as Internet Explorer 9 and 10, Firefox, Chrome, and Safari. However, different browsers support web standards differently . In this article, we use the Wikipedia app for Office as an example to show that the document.selection method is not supported in Chrome. In general, a feature supported by one browser is not necessarily supported by another, so ensuring cross-browser compatibility of apps for Office remains the developers’ responsibility. You need to test the apps thoroughly in different browsers.

Open your app in Excel 2013 Web App

Right now, the “Napa” Office 365 Development Tools can deploy apps for Office straight to Office Web App (OWA), but Visual Studio does not. In this section, we describe a workaround to publish and open a Visual Studio app with Excel 2013 Web App.

1. Create an App Catalog site using your Office 365 developer subscription account. For detailed information, see Use the App Catalog to make custom business apps available for your SharePoint Online environment.
2. In Visual Studio, publish the app. Note that this includes both publishing the web content to a testing site and generating the XML manifest. For more information on how to publish an app for Office, see How to: Publish an app for Office.
3. Upload your app manifest to the App Catalog site. For detailed information, see Use the App Catalog to make custom business apps available for your SharePoint Online environment.
4. Add the address of the App Catalog site that you just created to the Trusted App Catalogs in Excel 2013: Choose Options > Trust Center > Trusted App Catalogs > Trusted Catalogs Table > Add catalog. Figure 1. Add an App Catalog site to the Trusted Catalog Table in Excel 2013
5. Insert the app into your workbook, and save the workbook: Apps for Office > Find more apps at the Office Store. Figure 2. Insert the app to a workbook
6. Upload the workbook file to your SharePoint Online site.
7. Open the workbook from SharePoint Online in Excel Web App.

The problem

For this post, we will use the Wikipedia app for Office as a running example. The Wikipedia app for Office is an open-source project, and you can download the source code from the Wikipedia App for Office source (GitHub) .

Here is the issue that we encountered when we developed the Wikipedia app for Office. This app supports the insertion of highlighted text. This function uses the pop-up insert button “+” when a block of text is highlighted.

In Excel 2013 Web App in Internet Explorer 10, the function works well as shown in Figure 3.

Figure 3. The Wikipedia app for Office in Internet Explorer 10

In Excel 2013 Web App in Chrome, however, we can’t show the insert button “+”.

Figure 4. The Wikipedia app for Office in Chrome

The cause

The Wikipedia app implements the pop-up insert button with the mouseup event and the document.selection().createRange() method in jQuery.

In Excel Web App, the following error appears in the developer tool when the user selects text. The error message shows that the document.selection method isn’t defined. This is because document.selection is not supported in Chrome.

Figure 5. The error message in Chrome

The fix

Fixing the problem is straightforward.

1. Update the jQuery version to 1.9.1 in the sandbox.html and Wikipedia_dev.html files.
2. Call the document.getSelection method instead of document.selection.
3. Try it again in Excel Web App. The pop-up insert button appears when a block of text is selected.

How to ensure that the app behaves consistently across browsers

Before submitting an app to the Office Store, do sanity checks in various browsers. An app for Office running in an Office Web App must be fully functional within the following browsers:

• Internet Explorer 9 and 10
• The latest version of Safari
• The latest version of Chrome
• The latest version of Firefox

For any cross-browser compatibility issue, the Cross-browser Test Results table on the Internet Explorer Testing Center is a good reference to find causes. Note that although the test results are for Internet Explorer 11 and 10, Internet Explorer 9 has similar results. And you can also refer to the HTML5 test site.

References

• Wikipedia App for Office source (GitHub)
• Internet Explorer Testing Center
• HTML5 test site
• Use the App Catalog to make custom business apps available for your SharePoint Online environment
• How to: Publish an app for Office

About the author

This article was written by Tao Wu, SDET on the Microsoft Ecosystem team, and content publisher Tony Liu. Program manager Michael Zlatkovsky provided valuable feedback.