{"id":6288,"date":"2021-05-05T13:03:59","date_gmt":"2021-05-05T21:03:59","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=6288"},"modified":"2021-05-05T13:03:59","modified_gmt":"2021-05-05T21:03:59","slug":"understanding-office-add-ins-runtime","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/understanding-office-add-ins-runtime\/","title":{"rendered":"Understanding the Office Add-ins runtime"},"content":{"rendered":"<p><span data-contrast=\"auto\">Office Add-ins require a\u00a0<\/span><a href=\"https:\/\/en.wikipedia.org\/wiki\/Runtime_system\"><span data-contrast=\"none\">runtime environment<\/span><\/a><span data-contrast=\"auto\"> to execute. Think of a runtime as the execution environment for the add-in that&#8217;s a combination of a JavaScript engine and an HTML rendering control. A runtime can be encapsulated in a browser iFrame or an embeddable webview control on desktop clients. Since Office is a cross-platform suite, it uses different browsers, or webview controls, to run add-ins depending on the platform on which it is running. For more information about which browser or control is used by the various platforms, see <\/span><a href=\"https:\/\/docs.microsoft.com\/en-us\/office\/dev\/add-ins\/concepts\/browsers-used-by-office-web-add-ins\"><span data-contrast=\"none\">Browsers used by Office Add-ins<\/span><\/a><span data-contrast=\"auto\">.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">Keep reading this blog post if:<\/span><\/p>\n<ul>\n<li><span data-contrast=\"auto\">You&#8217;ve ever wondered why Office Add-ins need to support Internet Explorer even though Microsoft does not<\/span><\/li>\n<li><span data-contrast=\"auto\">You didn\u2019t know that add-ins can run in eight different runtimes across various platforms<\/span><\/li>\n<li><span data-contrast=\"auto\">You&#8217;re curious to learn how we are making this simpler (at least on Windows)<\/span><\/li>\n<\/ul>\n<p><span data-contrast=\"auto\">In this post, we describe the latest changes in Office&#8217;s use of web runtimes as well as summarize the runtimes that we&#8217;ve used on various platforms in the past.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<blockquote><p><span data-contrast=\"auto\">Note: Office uses a JavaScript runtime for UI-less add-ins, such as custom functions in Excel and autorun add-ins in Outlook. This is covered in <a href=\"https:\/\/developer.microsoft.com\/en-us\/office\/blogs\/use-the-shared-javascript-runtime-to-improve-the-ui-experience-of-your-office-add-in\/\">Use the shared JavaScript runtime to improve the UI experience of your Office Add-in<\/a>.<\/span><\/p><\/blockquote>\n<h3><span data-contrast=\"none\">On Windows desktop,\u00a0the future is\u00a0WebView2<\/span><span data-ccp-props=\"{&quot;335559738&quot;:240}\">\u00a0<\/span><\/h3>\n<p><span data-contrast=\"auto\">Microsoft released the WebView2 browser control in October 2020. WebView2 <\/span>is based on the open source Chromium project <span data-contrast=\"auto\">that popular browsers such as Google Chrome and the new Microsoft Edge use. WebView2 is the most modern web control available and is supported across Windows 8.1 and Windows 10. In addition, WebView2 is \u201cevergreen\u201d, meaning it is kept up-to-date with regular updates and security patches without relying on the operating system to be updated. To learn more about WebView2, see <a href=\"https:\/\/docs.microsoft.com\/microsoft-edge\/webview2\/\">Introduction to Edge WebView2<\/a><\/span><span data-contrast=\"auto\">.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<blockquote><p>Note: Windows 8.0 is no longer supported. Windows 8.1 support window ends in January 2023.<\/p><\/blockquote>\n<p><span data-contrast=\"auto\">Office released support for WebView2 starting with Office version 16.0.13530.20424. This means if you have Office version 16.0.13530.20424 or later, and have the WebView2 runtime installed, Office will use WebView2 as the runtime for add-ins. This is an incredibly exciting step for the Office Platform <em>\u2014 <\/em>not only because of all the benefits of WebView2, but also because it provides for uniformity of the runtime for add-ins across various versions of Windows.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">The WebView2 control is not automatically installed with Edge or Windows, yet. We expect that it will be available soon. In the meantime, there are two other ways to get WebView2 on the Windows computer: <\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<ol>\n<li><span class=\"NormalTextRun SCXW37818531 BCX8\">Shortly after Office version <\/span><span class=\"NormalTextRun SCXW37818531 BCX8\">16.0.13530.20424 or later<\/span><span class=\"NormalTextRun SCXW37818531 BCX8\">\u00a0is installed on a computer (usually within 24 hours), WebView2 is automatically installed, if it isn&#8217;t already. (Administrators can disable this feature.)<\/span><\/li>\n<li><span class=\"TextRun SCXW127451121 BCX8\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW127451121 BCX8\">Users can download WebView2 from the\u00a0<\/span><\/span><a class=\"Hyperlink SCXW127451121 BCX8\" href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-edge\/webview2\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW127451121 BCX8\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW127451121 BCX8\" data-ccp-charstyle=\"Hyperlink\">Webview2<\/span><\/span><\/a><span class=\"TextRun SCXW127451121 BCX8\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW127451121 BCX8\"> page.<\/span><\/span><\/li>\n<\/ol>\n<blockquote><p><span data-contrast=\"auto\">Note: Customers on the Semi-Annual Enterprise channel of Office can expect to receive version Version 2102 in July 2021. Admins at these customers will need to take an additional step to enable the use of WebView2. They must create the registry key <\/span><b><span data-contrast=\"auto\">HKEY_CURRENT_USER\\SOFTWARE\\Microsoft\\Office\\16.0\\WEF\\<\/span><\/b><b><span data-contrast=\"auto\">Win32WebView2<\/span><\/b><span data-contrast=\"auto\">\u00a0and set its value to\u00a0<\/span><b><span data-contrast=\"auto\">dword:00000001<\/span><\/b><span data-ccp-props=\"{}\">.<\/span><\/p><\/blockquote>\n<p><span data-contrast=\"auto\">If the WebView2 control is not installed (or the registry change is not made where needed), then add-ins in subscription desktop Office will run in either the older webview control called EdgeHTML or just &#8220;WebView&#8221; (also known as &#8220;Spartan&#8221;), or the &#8220;Trident&#8221; webview control that originated with Internet Explorer 11. For details, see <\/span><a href=\"https:\/\/docs.microsoft.com\/en-us\/office\/dev\/add-ins\/concepts\/browsers-used-by-office-web-add-ins\"><span data-contrast=\"none\">Browsers used by Office Add-ins<\/span><\/a><span data-contrast=\"auto\">.<\/span><\/p>\n<p><span data-contrast=\"auto\">To check if you have WebView2 installed on a computer, go to <\/span><b><span data-contrast=\"auto\">Settings<\/span><\/b><span data-contrast=\"auto\">\u00a0&gt;\u00a0<\/span><b><span data-contrast=\"auto\">Add or remove programs<\/span><\/b><span data-contrast=\"auto\">\u00a0and then search for\u00a0<\/span><b><span data-contrast=\"auto\">WebView2<\/span><\/b><span data-contrast=\"auto\"> in the search box. You should see something similar to the following screenshot.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-6289 size-full alignnone\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/WebView2_Installed.png\" alt=\"Shows the listing for Microsoft Edge WebView2 Runtime in the list of installed programs in Windows 10.\" width=\"581\" height=\"180\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/WebView2_Installed.png 581w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/WebView2_Installed-300x93.png 300w\" sizes=\"(max-width: 581px) 100vw, 581px\" \/><\/p>\n<h3><span data-contrast=\"none\">Other runtimes used for add-ins on\u00a0Windows<\/span><span data-ccp-props=\"{&quot;335559738&quot;:240}\">\u00a0<\/span><\/h3>\n<p><span data-contrast=\"auto\">Depending on the version of Office and Windows you have, add-ins may be running in older webview controls on your machine. <\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"6\" data-aria-posinset=\"1\" data-aria-level=\"1\"><span data-contrast=\"auto\">EdgeHTML or legacy Edge control, was shipped as part of Windows 10 (1903 and later) and at the time of writing this blog post it is the most widely used runtime for Office add-ins on Windows. <\/span><span data-ccp-props=\"{&quot;134233279&quot;:true,&quot;335559738&quot;:240}\">\u00a0<\/span><\/li>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"6\" data-aria-posinset=\"2\" data-aria-level=\"1\"><span data-contrast=\"auto\">Trident (Internet Explorer 11 based web control) is used by the Office Add-ins as the runtime on older Windows 8.1 and Windows 10 machines, depending on the version of Office that is installed. <\/span><span data-ccp-props=\"{&quot;134233279&quot;:true}\"> For details, see <a href=\"https:\/\/docs.microsoft.com\/en-us\/office\/dev\/add-ins\/concepts\/browsers-used-by-office-web-add-ins\">Browsers used by Office Add-ins<\/a>.<\/span><\/li>\n<\/ul>\n<p><span data-contrast=\"auto\">For detailed information on Office versions and web browser controls used, please see <\/span><a href=\"https:\/\/docs.microsoft.com\/en-us\/office\/dev\/add-ins\/concepts\/browsers-used-by-office-web-add-ins\"><span data-contrast=\"none\">Browsers used by Office Add-ins<\/span><\/a>.<span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h4><span data-contrast=\"none\">Discover what runtime you currently use for add-ins on Windows<\/span><\/h4>\n<p><span data-contrast=\"auto\">There are several ways:<\/span><\/p>\n<p><span data-contrast=\"auto\">1. The easiest way is to click the <a href=\"https:\/\/docs.microsoft.com\/en-us\/office\/dev\/add-ins\/design\/task-pane-add-ins#personality-menu\">Personality Menu<\/a> of your add-in on Windows, and then select <strong>Security Info<\/strong>. The Personality Menu is launched when you click within the add-in (that is, your add-in task pane) and then click the \u201c&lt;\u201d overlay, as shown in the upper right corner of the following screenshot.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-6290 size-full alignnone\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Personality_Menu.png\" alt=\"Screenshot showing the task pane of an add-in with the personality menu overlay in the upper right corner of the task pane.\" width=\"427\" height=\"365\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Personality_Menu.png 427w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Personality_Menu-300x256.png 300w\" sizes=\"(max-width: 427px) 100vw, 427px\" \/><\/p>\n<p><span data-contrast=\"auto\">On machines that use WebView2 as the runtime, the <strong>Security Info<\/strong> dialog looks like the following. Note that the <strong>Runtime<\/strong> property is set to &#8220;Microsoft Edge&#8221;. <\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<p><span data-ccp-props=\"{}\"> <img decoding=\"async\" class=\"alignnone wp-image-6291 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Security_Info.png\" alt=\"Screenshot of the security info dialog that appears when Security Info is selected from the personality menu. The dialog shows that the runtime property is set to &quot;Microsoft Edge&quot;.\" width=\"554\" height=\"291\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Security_Info.png 554w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Security_Info-300x158.png 300w\" sizes=\"(max-width: 554px) 100vw, 554px\" \/><\/span><\/p>\n<p><span data-contrast=\"auto\">2. Right-click within the add-in task pane and click <strong>Inspect<\/strong>. If this launches the new <\/span><a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoft-edge\/devtools-guide-chromium\/\"><span data-contrast=\"none\">Microsoft Edge Developer tools<\/span><\/a><span data-contrast=\"auto\">, your add-in is using WebView2 as the runtime.<\/span><span data-ccp-props=\"{&quot;134233279&quot;:true}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">3. Look in <strong>Task Manager<\/strong> for the process <\/span><strong>Microsoft Edge WebView2<\/strong><span data-contrast=\"auto\"> after you launch an add-in. If it&#8217;s listed, then Office is using WebView2 as the runtime.<\/span><span data-ccp-props=\"{&quot;134233279&quot;:true}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">To reach the widest possible audience, developers should ensure that their add-in functions on all the runtimes where add-ins are supported. We\u2019ll write a separate blog post on developer experience, debugging, and validating your add-in on the various web runtimes on Windows. <\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<h3><span data-contrast=\"none\">Other platforms<\/span><span data-ccp-props=\"{&quot;335559738&quot;:240}\">\u00a0<\/span><\/h3>\n<h4><span data-contrast=\"none\">macOS<\/span><span data-ccp-props=\"{&quot;335559738&quot;:40}\">\u00a0<\/span><\/h4>\n<p><span data-contrast=\"auto\">On macOS, Office currently uses WebKit2 as the runtime for add-ins. WebKit2 is shipped as part of the OS and is the engine behind Apple\u2019s Safari web browser. WebKit2 is considered a modern browser by the platform and the industry at large, and in general developers shouldn\u2019t see notable differences between WebView2 and WebKit2 with respect to support of HTML 5, CSS, and JavaScript standards. More detailed differences can be researched at the <a href=\"https:\/\/caniuse.com\/\">Can I use<\/a> website. <\/span><\/p>\n<blockquote><p><span data-contrast=\"auto\">Note: WebKit2 does not support \u201cwindowless hosting\u201d whereas as WebView2 does support this starting with version 90. From an end user experience standpoint, this means that on macOS any <\/span><a href=\"https:\/\/docs.microsoft.com\/en-us\/office\/dev\/add-ins\/design\/content-add-ins#:~:text=Content%20add-ins%20are%20surfaces%20that%20can%20be%20embedded,documents%20or%20display%20data%20from%20a%20data%20source.\"><span data-contrast=\"none\">Office content add-in<\/span><\/a><span data-contrast=\"auto\"> turns into an image upon any user action, such as pan, zoom, scroll, etc., on the canvas. <\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p><\/blockquote>\n<h4><span data-contrast=\"none\">Office\u00a0on the web<\/span><span data-ccp-props=\"{&quot;335559738&quot;:40}\">\u00a0<\/span><\/h4>\n<p><span data-contrast=\"auto\">When the customer is working in Office on the web, add-ins run in an iFrame of the same browser. <\/span>We recommend using a modern browser such as Microsoft Edge, Google Chrome, Mozilla Firefox or Apple Safari to access Office for the web. For our list of officially supported browsers see <a title=\"https:\/\/support.microsoft.com\/en-us\/office\/which-browsers-work-with-office-for-the-web-ad1303e0-a318-47aa-b409-d3a5eb44e452\" href=\"https:\/\/support.microsoft.com\/en-us\/office\/which-browsers-work-with-office-for-the-web-ad1303e0-a318-47aa-b409-d3a5eb44e452\" target=\"_blank\" rel=\"noreferrer noopener\">Which browsers work with Office for the web<\/a><span data-ccp-props=\"{}\">.<\/span><\/p>\n<h3><span data-ccp-props=\"{&quot;335551550&quot;:2,&quot;335551620&quot;:2}\">Tell us what you think<\/span><\/h3>\n<p>We&#8217;d love your comments or suggestions for future improvement. Just create an issue on the <a href=\"https:\/\/github.com\/OfficeDev\/office-js\/issues\/new\/choose\">Office-js repo<\/a>\u00a0on GitHub.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn about the latest changes in Office&#8217;s use of web runtimes as well as the runtimes that we&#8217;ve used on various platforms in the past.\u00a0<\/p>\n","protected":false},"author":69076,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11],"tags":[28],"class_list":["post-6288","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-office-add-ins","tag-office-add-ins"],"acf":[],"blog_post_summary":"<p>Learn about the latest changes in Office&#8217;s use of web runtimes as well as the runtimes that we&#8217;ve used on various platforms in the past.\u00a0<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/6288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69076"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=6288"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/6288\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/25159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=6288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=6288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=6288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}