Webapp guide#

Como la aplicación web encaja en el intérprete de órdenes («shell»)#

Una aplicación web se muestra en una vista web dentro de un contenedor de aplicación web que se ejecuta como una aplicación en el intérprete de órdenes («shell») de Ubuntu/Unity.

Echando un vistazo más cerca:

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.

Lanzamiento#

Puede iniciar una aplicación web desde la terminal con::

webapp-container URL

Por ejemplo::

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.

Interfaz de usuario#

Una aplicación web generalmente llena todo el espacio de la aplicación en pantalla, sin necesidad de los controles de la interfaz de usuario que se encuentran en los navegadores estándar.

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 habilita que se muestren los botones de retroceder y avanzar en la barra de herramientas (en la parte inferior de la ventana de la aplicación web)

  • --enable-addressbar habilita que se muestre la barra de direcciones (en la parte inferior de la ventana de la aplicación web)

Patrones de URL#

Los autores de aplicaciones web a menudo quieren contener la navegación solo al sitio web objetivo. Esto es, el desarrollador quiere controlar las URLs que pueden abrirse en la aplicación web (todas las otras URLs se abren en el navegador). Esto se consigue con los patrones de URL como parte de la línea de órdenes de la aplicación web.

Sin embargo, muchas aplicaciones web usan páginas que están alojadas en múltiples sitios o que usan recursos y páginas externas.

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.

Sin contener por defecto#

Por defecto, no hay confinamiento de URL. Suponga que inicia una aplicación web sin patrones y solo una URL de comienzo como esta::

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

El usuario puede navegar a cualquier URL sin limitación. Por ejemplo, si pulsan en el botón Desarrollador en la parte de arriba, irán a developer.ubuntu.com y se mostrará en la aplicación web.

Consejo: puede ver la URL de la página actual habilitando la barra de direcciones con --enable-addressbar.

Confinamiento simple para el sitio#

A menudo uno quiere contener a los usuarios dentro del sitio. Esto es, si el sitio web es www.ubuntu.com, puede ser útil contener a los usuarios de la aplicación web solo a sub-páginas de www.ubuntu.com. Esto se hace añadiendo un patrón comodín de URL a la orden de inicio, como el que sigue::

webapp-container --webappUrlPatterns=https://www.ubuntu.com/* https://www.ubuntu.com
--webappUrlPatterns= indica que un patrón es lo siguiente

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.

More complex wildcard patterns#

Podría querer limitar el acceso solo a algunas sub-páginas de su sitio desde dentro de la aplicación web. Esto es fácil con patrones comodín. (Los enlaces a otras sub-páginas se abre en el navegador). Por ejemplo, lo siguiente permite acceso a www.ubuntu.com/desktop/features y www.ubuntu.com/phone/features mientras que no permite el acceso a www.ubuntu.com/desktop o www.ubuntu.com/phone:

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

Patrones múltiples#

Puede usar patrones múltiples separándolos con una coma. Por ejemplo, lo siguiente permite el acceso solo a www.ubuntu.com/desktop/features y www.ubuntu.com/phone/features::

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

Consejo: a menudo son necesarios los patrones múltiples para conseguir el deseado comportamiento de confinamiento.

Añadiendo un subominio específico#

Many URLs have one or more subdomains. (For example, in the following, «developer» is the subdomain: developer.ubuntu.com.) You can allow access to a single subdomain (and all of its subpages) with a pattern like this::

--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

Añadiendo subdominios con un comodín#

Algunas URLs tienen múltiples subdominios. Por ejemplo, www.ubuntu.com tiene design.ubuntu.com, developer.ubuntu.com y más. Puede añadir el acceso a todos los subdominios con un comodín en la posición de subdominio::

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

Nota: ¿qué es el signo de interrogación en https? Esto significa que el carácter precedente (la «s») es opcional. Si se necesita siempre https, omita el signo de interrogación.

Argumentos de la línea de órdenes#

El contenedor de la aplicación web acepta muchas opciones para ajustar como aloja varias aplicaciones web.

Vea toda la ayuda con::

webapp-container --help

Nota: solo las siguientes opciones se aplican a Ubuntu convergente.:

--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.

Opciones de Chrome (si ninguna se especifica, no se muestra ningún chrome por defecto)::

--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)

Nota: todas las otras opciones disponibles son específicas para aplicaciones web de escritorio. Se recomienda que no se usen nunca más.

Ignorar la cadena agente de usuario («User-Agent»)#

Algunos sitios web comprueban porciones específicas de la identidad del motor web, también conocido como cadena de agente de usuario («User-Agent»), para ajustar su presentación o habilitar ciertas características. Aunque no es una práctica recomendada, algunas veces es necesario cambiar la cadena por defecto que envía el contenedor de la aplicación web.

Para cambiar la cadena en la línea de órdenes, use la siguiente opción::

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

Confinamiento de los datos del navegador#

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.

Storage#

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.