Webapp guide#

Comment l’application Web s’intègre dans l’interface#

Une application Web s’affiche dans une vue Web à l’intérieur d’un conteneur qui s’exécute comme une application Ubuntu dans l’interface Ubuntu/Unity.

Regardons de plus près :

At the innermost level, there is a website that the developer identifies by URL. The website is rendered and runs in a Qt WebEngine based webview. The webview is provided by the pre-installed Morph browser and automatically handles things like file dialogs (using ContentHub), downloads, permissions, etc.

Le lancement#

Vous pouvez lancer une application web depuis le terminal avec :

webapp-container URL

Par exemple :

webapp-container https://www.ubuntu.com

This simple form works, but almost every webapp uses other features as well, such as URL containment with URL patterns as described below.

L’interface utilisateur#

Une application web remplit généralement tout l’espace de l’écran, sans avoir besoin des contrôles d’interface utilisateur que l’on trouve généralement sur les navigateurs standards.

In some cases some navigation controls are appropriate, such as Back and Forward buttons, or an address bar. These are enabled with command line arguments:

  • --enable-back-forward Activer l’affichage des boutons de retour et d’avance dans la barre d’outils (en bas de la fenêtre de l’application web)

  • --enable-addressbar Activer l’affichage de la barre d’adresse (en bas de la fenêtre de l’application web)

Les modèles d’URL#

Les auteurs d’applications Web veulent souvent confiner la navigation au site cible. Autrement dit, le développeur veut contrôler les liens qui peuvent être ouverts dans l’application Web (tous les autres liens sont ouverts dans le navigateur). Cela est réalisé avec les modèles de lien qui font partie de la ligne de commande de l’application Web.

Cependant, beaucoup d’applications web utilisent des pages qui sont hébergées sur plusieurs sites ou qui utilisent des ressources et des pages externes.

Both containment and access to specified external URLs are implemented with URL patterns provided as arguments at launch time. Let’s take a closer look.

Non confiné par défaut#

Par défaut, il n” y a pas de confinement d’URL. Supposons que vous lanciez une application web sans modèle et seulement une URL de démarrage comme ceci :

webapp-container https://www.ubuntu.com

L’utilisateur peut naviguer vers n’importe quelle URL sans limitation. Par exemple, s’il clique sur le bouton Developer en haut de la page, il accède à developer. ubuntu. com, qui s’affiche dans l’application web.

Astuce : vous pouvez voir l’URL de la page courante en activant la barre d’adresse avec --enable-addressbar.

Le confinement simple au site#

On veut souvent confiner les utilisateurs au site lui-même. En d’autres termes, si le site Web est www.ubuntu.com, il peut être utile de ne confiner les utilisateurs de l’application web qu’aux sous-pages de www.ubuntu.com. Ceci est fait en ajoutant un modèle d’URL joker à la commande de lancement, comme suit :

webapp-container --webappUrlPatterns=https://www.ubuntu.com/* https://www.ubuntu.com
--webappUrlPatterns= indique qu’un modèle suit

https://www.ubuntu.com/* is the pattern The asterisk is a wildcard that matches any valid sequence of characters in a URL

With this launch command and URL pattern, the user can navigate to and open in the webapp any URL that starts with https://www.ubuntu.com/. For example, they can click on the Phone button (https://www.ubuntu.com/phone) in the banner and it opens in the webapp, or the Tablet button (https://www.ubuntu.com/tablet). But, clicking Developer opens the corresponding URL in the browser.

Tip: Make sure to specify the protocol in your starting URL, that is, use https://www.ubuntu.com instead of www.ubuntu.com. Not specifying the protocol would create an ambiguous URL and thus introduce security concerns.

Combinaison de caractères génériques plus complexes#

Vous voudrez peut-être limiter l’accès à certaines sous-pages de votre site à partir de l’application web. C’est facile avec des modèles utilisant des jokers. (Les liens vers d’autres sous-pages sont ouverts dans le navigateur.) Par exemple, ce qui suit permet d’accéder à www.ubuntu.com/desktop/features et www.ubuntu.com/phone/features sans permettre l’accès à www.ubuntu.com/desktop ou www.ubuntu.com/phone :

webapp-container --webappUrlPatterns=https://www.ubuntu.com/*/features https://www.ubuntu.com

Les modèles multiples#

Vous pouvez utiliser plusieurs modèles en les séparant par une virgule. Par exemple, ce qui suit n’autorise l’accès qu’aux sites www.ubuntu.com/desktop/features et www.ubuntu.com/phone/features :

webapp-container --webappUrlPatterns=https://www.ubuntu.com/desktop/features,https://www.ubuntu.com/phone/features  https://www.ubuntu.com

Astuce : Il est souvent nécessaire d’utiliser plusieurs modèles pour obtenir le comportement de confinement prévu.

Ajouter un sous-domaine spécifique#

Beaucoup d’URL ont un ou plusieurs sous-domaines. (Par exemple, dans ce qui suit, »déveloper » est le sous-domaine : developer. ubuntu. com.) Vous pouvez autoriser l’accès à un seul sous-domaine (et à toutes ses sous-pages) avec un modèle comme celui-ci :

--webappUrlPatterns=https://developer.ubuntu.com/*

However, one usually wants the user to be able to navigate back to the starting URL (and its subpages). So, if the starting URL is https://www.ubuntu.com, a second pattern is needed::

--webappUrlPatterns=https://developer.ubuntu.com/*,https://www.ubuntu.com/*

Putting these together, here’s an example that starts on https://www.ubuntu.com and allows navigation to https://developer.ubuntu.com and subpages and back to https://www.ubuntu.com and subpages::

webapp-container --webappUrlPatterns=https://developer.ubuntu.com/*,https://www.ubuntu.com/*  https://www.ubuntu.com

Ajouter des sous-domaines avec un joker#

Certaines URL ont plusieurs sous-domaines. Par exemple, www.ubuntu.com contient design.ubuntu. com, developer.ubuntu. com et plus encore. Vous pouvez ajouter l’accès à tous les sous-domaines avec un joker à l’emplacement du sous-domaine :

webapp-container --webappUrlPatterns=https://*.ubuntu.com/*  https://www.ubuntu.com

Note: An asterisk in the subdomain position matches any valid single subdomain. This single pattern is sufficient to enable browsing to any subdomain and subpages, including back to the starting URL (https://www.ubuntu.com) and its subpages.

Adding http#

Sometimes a site uses http for some of its URLs. In general this is unsafe and should be avoided, but here is an example that allows access to www.launchpad.net on both https and http inside the webapp (and all subpages due to the wildcard)::

webapp-container --webappUrlPatterns=https?://www.launchpad.net/* https://www.launchpad.net

Note : le point d’interrogation en https? Cela signifie que le caractère précédent (le “s”) est facultatif. Si https est toujours requis, omettez le point d’interrogation.

Les arguments de la ligne de commande#

Le conteneur de l’application web accepte de nombreuses options pour affiner la façon dont il héberge diverses applications web.

Voir toute l’aide avec :

webapp-container --help

Remarque : seules les options suivantes s’appliquent à la convergence d’Ubuntu :

--fullscreen Display full screen
--inspector[=PORT] Run a remote inspector on a specified port or 9221 as the default port
--app-id=APP_ID Run the application with a specific APP_ID
--name=NAME Display name of the webapp, shown in the splash screen
--icon=PATH Icon to be shown in the splash screen. PATH can be an absolute or path relative to CWD
--webappUrlPatterns=URL_PATTERNS List of comma-separated url patterns (wildcard based) that the webapp is allowed to navigate to
--accountProvider=PROVIDER_NAME Online account provider for the application if the application is to reuse a local account.
--accountSwitcher Enable switching between different Online Accounts identities
--store-session-cookies Store session cookies on disk
--enable-media-hub-audio Enable media-hub for audio playback
--user-agent-string=USER_AGENT Overrides the default User Agent with the provided one.

Les options de Chrome (si aucune option n’est spécifiée, aucune n’est affichée par défaut) :

--enable-back-forward Enable the display of the back and forward buttons (implies --enable-addressbar)
--enable-addressbar Enable the display of a minimal chrome (favicon and title)

Remarque : les autres options disponibles sont spécifiques aux applications web pour l’ordinateur de bureau. Il est recommandé de ne plus les utiliser.

Forcer la chaîne User-Agent#

Certains sites vérifient des portions spécifiques de l’identité du moteur web, alias la chaîne User-Agent, pour ajuster leur présentation ou activer certaines fonctionnalités. Bien que ce ne soit pas une pratique recommandée, il est parfois nécessaire de changer la chaîne par défaut envoyée par le conteneur de l’application web.

Pour changer la chaîne de caractères depuis la ligne de commande, utilisez l’option suivante :

--user-agent-string='<string>' Replaces the default user-agent string by the string specified as a parameter

Confinement des données du navigateur#

The webapp experience is contained and isolated from the browser data point of view. That is webapps do not access data from any other installed browser, such as history, cookies and so on. Other browsers on the system do not access the webapp’s data.

Stockage#

Following storage options are supported: Local/Session Storage, IndexedDB and the deprecated WebSQL. FileSystem API is not supported because apps cannot access the filesystem directly.