Prise en charge des anciennes versions de Microsoft webviews et Office

  • Article

Les compléments Office sont des applications web qui s’affichent dans des iframes lors de l’exécution sur Office sur le Web. Les compléments Office sont affichés à l’aide d’un contrôle de navigateur incorporé (également appelé vue web) lors de l’exécution dans Office sur Windows ou Office sur Mac. Les contrôles de navigateur incorporés sont fournis par le système d’exploitation ou par un navigateur installé sur l’ordinateur de l’utilisateur.

Importante

Les vues web provenant des Explorer internet et des Version antérieure de Microsoft Edge sont toujours utilisées dans les compléments Office

Certaines combinaisons de plateformes et de versions Office, y compris les versions perpétuelles sous licence en volume via Office 2019, utilisent toujours les contrôles webview fournis avec Internet Explorer 11 (appelé « Trident ») et Version antérieure de Microsoft Edge (appelé « EdgeHTML ») pour héberger des compléments, comme expliqué dans Navigateurs et contrôles d’affichage web utilisés par les compléments Office. Internet Explorer 11 a été désactivé dans Windows 10 et Windows 11 en février 2023, et l’interface utilisateur de lancement a été supprimée, mais elle est toujours installée avec ces systèmes d’exploitation. Ainsi, Trident et d’autres fonctionnalités d’Internet Explorer peuvent toujours être appelées par programme par Office.

Nous vous recommandons (mais n’exigez pas) de prendre en charge ces combinaisons, au moins de manière minimale, en fournissant aux utilisateurs de votre complément un message d’échec approprié lorsque votre complément est lancé dans ces vues web. Gardez ces points supplémentaires à l’esprit :

  • Office sur le Web ne s’ouvre plus dans internet Explorer ou Version antérieure de Microsoft Edge. Par conséquent, AppSource ne teste pas les compléments dans Office sur le Web sur ces navigateurs.
  • AppSource teste toujours les combinaisons de versions de plateforme et de bureau Office qui utilisent Trident ou EdgeHTML. Toutefois, il émet un avertissement uniquement lorsque le complément ne prend pas en charge ces vues web ; le complément n’est pas rejeté par AppSource.
  • L’outil Script Lab ne prend plus en charge Trident.

Si vous envisagez de prendre en charge des versions antérieures de Windows et Office, votre complément doit fonctionner dans les contrôles de navigateur incorporables utilisés par ces versions. Par exemple, les contrôles de navigateur basés sur Internet Explorer 11 (IE11) ou Version antérieure de Microsoft Edge (edgeHTML). Pour plus d’informations sur les combinaisons de Windows et d’Office qui utilisent ces contrôles de navigateur, voir Navigateurs et contrôles d’affichage web utilisés par les compléments Office.

Déterminer la vue web dans laquelle le complément s’exécute au moment de l’exécution

Votre complément peut découvrir la vue web dans laquelle il s’exécute en lisant la propriété window.navigator.userAgent . Cela permet au complément de fournir une autre expérience ou d’échouer correctement. L’exemple suivant détermine si le complément s’exécute en Trident ou EdgeHTML.

if (navigator.userAgent.indexOf("Trident") !== -1) {
    /*
       Trident is the webview in use. Do one of the following:
        1. Provide an alternate add-in experience that doesn't use any of the HTML5
           features that aren't supported in Trident (Internet Explorer 11).
        2. Enable the add-in to gracefully fail by adding a message to the UI that
           says something similar to:
           "This add-in won't run in your version of Office. Please upgrade either to
           perpetual Office 2021 (or later) or to a Microsoft 365 account."
    */
} else if (navigator.userAgent.indexOf("Edge") !== -1) {
    /*
       EdgeHTML is the browser in use. Do one of the following:
        1. Provide an alternate add-in experience that's supported in EdgeHTML (Microsoft Edge Legacy).
        2. Enable the add-in to gracefully fail by adding a message to the UI that
           says something similar to:
           "This add-in won't run in your version of Office. Please upgrade either to
           perpetual Office 2021 (or later) or to a Microsoft 365 account."
    */
} else {
    /* 
       A webview other than Trident or EdgeHTML is in use.
       Provide a full-featured version of the add-in here.
    */
}

Remarque

Microsoft Edge (Chromium) retourne edg/ un ou plusieurs chiffres de version et zéro ou plusieurs . séparateurs en tant qu’agent utilisateur ; par exemple, edg/76.0.167.1. Notez que le e n’est pas présent à la fin du nom ! C’est « edg », pas « edge ».

Ce code JavaScript doit être le plus tôt possible dans le processus de démarrage du complément. Voici un exemple de page d’accueil de complément qui conseille aux utilisateurs de mettre à niveau Office lorsque Trident est détecté.

<!doctype html>
<html lang="en" data-framework="typescript">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contoso Task Pane Add-in</title>

    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
</head>

<body>
    <div id="main">
         <!-- 
            The add-in UI is here. 
         -->
    </div>

    <!-- 
        The script below makes the following div display if the
        webview is Trident, and hides the regular div. 
    -->
    <div id="tridentmessage" style="display: none; padding: 10;">
        This add-in will not run in your version of Office. Please upgrade either to 
        perpetual Office 2021 (or later) or to a Microsoft 365 account.
    </div>
    <script>
        if (navigator.userAgent.indexOf("Trident") !== -1) {
            var tridentMessage = document.getElementById("tridentmessage");
            var normalUI = document.getElementById("main");
            tridentMessage.style.display = "block";
            normalUI.style.display = "none";
        } 
    </script>
</body>
</html>

Importante

Il n’est pas toujours recommandé de lire la userAgent propriété. Veillez à connaître l’article Détection du navigateur à l’aide de l’agent utilisateur, y compris les recommandations et les alternatives à la lecture userAgent. En particulier, si vous fournissez une autre expérience de complément pour prendre en charge l’utilisation de Trident, envisagez d’utiliser la détection des fonctionnalités au lieu de tester l’agent utilisateur. Toutefois, si vous fournissez simplement une notification indiquant que le complément ne fonctionne pas dans Trident, comme dans ce cas, l’utilisation userAgent est appropriée.

Depuis le 24 juillet 2023, les versions non anglaises de l’article sont toutes obsolètes à des degrés divers ; certains sont obsolètes depuis plus de 12 ans.

À la même date, le texte et les tableaux de la section Quelle partie de l’agent utilisateur contient les informations que vous recherchez ? de la version anglaise de l’article n’mention plus trident ou Internet Explorer 11. Dans le tableau nom et version du navigateur, la ligne pour Internet Explorer 11 était la suivante :

Moteur Doit contenir Ne doit pas contenir
Internet Explorer 11 Trident/7.0; .*rv:xyz

Dans le tableau du moteur de rendu, la ligne de Trident était la suivante :

Moteur Doit contenir Commentaire
Trident Trident/xyz Internet Explorer place ce fragment dans la section commentaires de la chaîne User-Agent.

Passer en revue les informations de prise en charge de webview et de version Office

Pour plus d’informations sur la prise en charge des vues web et des versions d’Office spécifiques, sélectionnez l’onglet applicable.

Le moteur JavaScript associé à Trident ne prend pas en charge les versions javascript ultérieures à ES5. Pour utiliser des versions plus modernes de JavaScript ou pour utiliser TypeScript, consultez Prise en charge des versions récentes de JavaScript.

Importante

Trident ne prend pas en charge certaines fonctionnalités HTML5 telles que les médias, l’enregistrement et l’emplacement. Si votre complément doit prendre en charge Trident, vous devez concevoir le complément pour éviter ces fonctionnalités non prises en charge ou le complément doit détecter quand Trident est utilisé et fournir une autre expérience qui n’utilise pas les fonctionnalités non prises en charge. Pour plus d’informations, consultez Déterminer la vue web dans laquelle le complément s’exécute au moment de l’exécution.

Tester un complément sur Trident (Internet Explorer)

Consultez Test trident.

Prise en charge des versions récentes de JavaScript

Si vous souhaitez utiliser la syntaxe et les fonctionnalités d’une version de JavaScript plus récente que celle prise en charge dans la vue web ou le runtime dans lequel votre code s’exécute, ou si vous souhaitez utiliser TypeScript, vous devez utiliser un transpileur ou un polyfill, ou les deux. Par exemple, un transpileur convertit la syntaxe ou les opérateurs, tels que l’opérateur => , inconnu dans ES5, en ES5. Un polyfill remplace les méthodes, les types et les classes d’une version plus récente de JavaScript par des fonctionnalités équivalentes dans une version antérieure.

Les sous-sections suivantes supposent que la norme JavaScript cible est ES5, mais les informations s’appliquent également à d’autres cibles. Par exemple, si votre cible est ECMAScript 2016, remplacez simplement « ES5 » par « ECMAScript 2016 » (et « post-ES5 » par « post-ECMAScript 2016 ») dans ces sous-sections.

Utiliser un transpileur

Vous pouvez écrire votre code en TypeScript ou en JavaScript moderne, puis le transpiler au moment de la génération en JavaScript ES5. Les fichiers ES5 résultants sont ce que vous chargez dans l’application web de votre complément.

Il existe deux transpileurs populaires. Les deux peuvent fonctionner avec des fichiers sources TypeScript ou JavaScript post-ES5. Ils fonctionnent également avec des fichiers React (.jsx et .tsx).

Pour plus d’informations sur l’installation et la configuration du transpileur dans votre projet de complément, consultez la documentation relative à l’un ou l’autre d’entre eux. Nous vous recommandons d’utiliser un exécuteur de tâches, tel que Grunt ou WebPack , pour automatiser la transpilation. Pour obtenir un exemple de complément qui utilise tsc, voir Complément Office Microsoft Graph React. Pour obtenir un exemple qui utilise babel, consultez Complément de stockage hors connexion.

Remarque

Si vous utilisez Visual Studio (et non Visual Studio Code), tsc est probablement plus facile à utiliser. Vous pouvez installer la prise en charge de celui-ci avec un package Nuget. Pour plus d’informations, consultez JavaScript et TypeScript dans Visual Studio. Pour utiliser babel avec Visual Studio, créez un script de build ou utilisez l’exécuteur de tâches Explorer dans Visual Studio avec des outils tels que l’exécuteur de tâches WebPack ou l’exécuteur de tâches NPM.

Utiliser un polyfill

Un polyfill est une version antérieure de JavaScript qui duplique les fonctionnalités des versions plus récentes de JavaScript. Le polyfill fonctionne dans les vues web qui ne prennent pas en charge les versions ultérieures de JavaScript. Par exemple, la méthode startsWith string ne faisait pas partie de la version ES5 de JavaScript et ne s’exécute donc pas dans Trident (Internet Explorer 11). Il existe des bibliothèques polyfill, écrites dans ES5, qui définissent et implémentent une startsWith méthode. Nous vous recommandons la bibliothèque de polyfill core-js .

Pour utiliser une bibliothèque polyfill, chargez-la comme n’importe quel autre fichier ou module JavaScript. Par exemple, vous pouvez utiliser une <script> balise dans le fichier HTML de la page d’accueil du complément (par exemple <script src="/js/core-js.js"></script>), ou vous pouvez utiliser une import instruction dans un fichier JavaScript (par exemple, import 'core-js';). Lorsque le moteur JavaScript voit une méthode telle que startsWith, il vérifie d’abord s’il existe une méthode de ce nom intégrée dans le langage. Si c’est le cas, il appelle la méthode native. Si, et seulement si, la méthode n’est pas intégrée, le moteur la recherche dans tous les fichiers chargés. Par conséquent, la version polyfilled n’est pas utilisée dans les navigateurs qui prennent en charge la version native.

L’importation de la bibliothèque core-js entière importera toutes les fonctionnalités core-js. Vous pouvez également importer uniquement les polyfills requis par votre complément Office. Pour obtenir des instructions sur la procédure à suivre, consultez API CommonJS. La bibliothèque core-js contient la plupart des polyfills dont vous avez besoin. Il existe quelques exceptions détaillées dans la section Polyfills manquants de la documentation core-js. Par exemple, il ne prend pas en charge fetch, mais vous pouvez utiliser le polyfill d’extraction .

Pour obtenir un exemple de complément qui utilise core.js, consultez Word Complément Angular2 StyleChecker.

Voir aussi