Webapp guide#

Com encaixa l’aplicació web a l’intèrpret d’ordres#

Una aplicació web es mostra a una vista web dins d’un contenidor web que s’executa com una aplicació de l’Ubuntu a l’entorn Ubuntu/Unity.

Fent una ullada més propera:

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.

Llançament#

Podeu llençar una aplicació web des de la terminal amb::

webapp-container URL

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

Interfície d’usuari#

Una aplicació web generalment omple l’espai sencer de la pantalla de l’aplicació, sense que li calgui els controls d’interfície d’usuari que es troben als navegadors estàndard.

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``Activa la visualització dels botons enrere i endavant a la barra d’eines (al peu de la finestra de l’aplicació web)

  • --enable-addressbar Activa la visualització de la barra d’adreces (al peu de la finestra de l’aplicació web)

Patrons d’URL#

Webapp authors often want to contain browsing to the target website. That is, the developer wants to control the URLs that can be opened in the webapp (all other URLs are opened in the browser). This is done with URL patterns as part of the webapp command line.

Tot i així, moltes pàgines web usen pàgines que estan allotjades en llocs múltiples o que usen recursos externs i pàgines.

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.

Sense confinament per defecte#

Per defecte, no hi ha confinament d’URL. Suposeu que llenceu una aplicació web sense cap patró i sols una URL d’inici de la manera següent::

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

L’usuari pot navegar a qualsevol URL sense limitació. Per exemple, si cliquen al botó de Desenvolupament a la part superior, naveguen a developer.ubuntu.com, i es mostra a la webapp.

Pista: Podeu veure l’URL de la pàgina actual habilitant la barra d’adreces amb --enable-addressbar.

Confinament simple al lloc#

Sovint volem confinar els usuaris al propi lloc. És a dir, si la pàgina web és www.ubuntu.com, pot ser útil confinar els usuari web sol a subpàgines de www.ubuntu.com. Això es fa afegint un patró URL comodí a l’ordre de llançament, de la manera següent::

webapp-container --webappUrlPatterns=https://www.ubuntu.com/* https://www.ubuntu.com
--webappUrlPatterns= indica que a continuació ve un patró

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#

Potser voleu limitar l’accés a únicament algunes subpàgines del vostre lloc des de dins de l’aplicació web. Això és fàcil amb patrons comodins. (Els enllaços a altres subpàgines s’obren al navegador.) Per exemple, el següent permet l’accés a www.ubuntu.com/desktop/features i www.ubuntu.com/phone/features mentre que no permet accés a www.ubuntu.com/desktop or www.ubuntu.com/phone:

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

Patrons múltiples#

Podeu usar patrons múltiples separant-los amb una coma. Per exemple, el següent permet accés sols a www.ubuntu.com/desktop/features and www.ubuntu.com/phone/features::

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

Pista: Sovint calen patrons múltiples per assolir el comportament de confinament desitjat.

Addició d’un subdomini específic#

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

Addició de subdominis amb un comodí#

Algunes URL tenen subdominis múltiples. Per exemple, www.ubuntu.com té design.ubuntu.com, developer.ubuntu.com i més. Podeu afegir accés a tots els subdominis amb un comodí a la posició de subdomini::

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: el signe d’interrogació a http?. Això vol dir que el caràcter precedent (la «s») és opcional. Si es requereix sempre https, ometeu el signe d’interrogació.

Arguments de la línia d’ordres#

El contenidor d’aplicació web accepta moltes opcions per afinar com allotja diverses aplicacions web.

Vegeu tota la ajuda amb::

webapp-container --help

Nota: Sols les opcions següents s’apliquen a l’Ubuntu convergit.:

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

Opcions del Chrome (si no s’especifica cap, no es mostra cap chrome per defecte)::

--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: Les altres opcions disponibles són específics per a aplicacions web d’escriptori. Es recomana no usar-les més.

Sobreescriptura de la cadena de caràcter de l’agent d’usuari#

Alguns llocs web comproven porcions específiques de la identitat del motor web, o sigui la cadena de caràcters de l’agent d’usuari, per ajustar la seva presentació o habilitar algunes característiques. Tot i que no és una pràctica recomanada, a vegades cal canviar la cadena de caràcters per defecte enviada pel contenidor web.

Per canviar la cadena de caràcters des de la línia d’ordres, useu l’opció següent::

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

Confinament de les dades 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.