Webapp guide#

Wie die Web-Apps in die Oberfläche kommen#

Eine Web-App wird in WebView in einem Web-App-Container dargestellt, der als Ubuntu-App in der Ubuntu-/Unity-Shell läuft.

Schauen wir genauer hin:

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.

Starten#

So startest du eine Web-App vom Terminal::

webapp-container URL

Beispielsweise::

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.

Benutzeroberfläche#

Eine Web-App füllt im Allgemeinen die komplette App-Bildschirm Fläche, ohne Navigationselemente zu benötigen, wie sie sonst bei Standart-Browsern gefunden wird.

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 Aktiviere die Anzeige der Vor- und Zurück-Knöpfe in der Werkzeugleiste (Am unteren Rand des Web-App Fensters)

  • --enable-addressbar Aktiviere die Anzeige der Adressleiste (Am unteren Rand des Web-App Fensters)

Adressmuster#

Web-App-Ersteller wollen oft den Zugang auf die Zielwebseite beschränken. D.h., der Entwickler möchte die Kontrolle darüber haben, welche Internetadressen in der Web-App geöffnet werden können (alle anderen Internetadressen werden im Browser geöffnet). Dies wird über Adressmuster als Teil der Web-App-Kommandozeile realisiert.

Jedoch werden die Inhalte viele Web-Apps über mehrere Webseiten verteilt gehostet oder sie betten externe Resourcen und Seiten ein.

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.

Standartmäßig uneingeschränkt#

Standartmäßig werden Adressen nicht eingeschränkt. Vorausgesetzt wird, dass die Web-App ohne Muster und nur mit einer Startseite wie hier gestartet wird::

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

Der Nutzer kann zu jeder Adresse ohne Einschänkungen navigieren. Wenn beispielsweise oben auf den Developer-Knopf gedrückt wird, wird zu developer.ubuntu.com navigiert und die Webseite in der Web-App angezeigt.

Tipp: Du kannst die Adresse der aktuellen Seite sehen, wenn du die Adressleiste mit --enable-addressbar aktivierst.

Einfache Beschränkungen auf die Seite#

Oft möchte man Nutzer auf die Seite selbst beschränken. Daher, falls die Seite www.ubuntu.com ist, wäre es hilfreich, wenn Web-App-Nutzer nur Zugriff auf Unterseiten von www.ubuntu.com hätten. Dies wird wie folgend mit einem, dem Startbefehl hinzugefügten, Wildcard-Adressmuster erreicht::

webapp-container --webappUrlPatterns=https://www.ubuntu.com/* https://www.ubuntu.com
--webappUrlPatterns= weist auf ein darauf folgendes Muster hin

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#

Eventuell möchtest du nur den Zugriff auf einige Unterseiten der Seite innerhalb der Web-App gestatten. Auch dies entspricht einem Wildcard-Muster. (Links zu anderen Unterseiten werden im Browser geöffnet.) Zum Beispiel wird im Folgenden nur der Zugang zu www.ubuntu.com/desktop/features und www.ubuntu.com/phone/features gestattet, jedoch nicht auf www.ubuntu.com/desktop oder www.ubuntu.com/phone:

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

Mehrere Muster#

Du kannst mehrere Muster in einer komma-separierten Liste eintragen. Im Beispiel wird nur der Zugriff auf www.ubuntu.com/desktop/features und www.ubuntu.com/phone/features erlaubt::

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

Tipp: Verschiedene Muster sind oft nötig um das gewünschte Blockierverhalten zu erreichen.

Hinzufügen eine spezifischen Subdomain#

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

Subdomains mittels Wildcard hinzufügen#

Einige Adressen haben verschiedene Unterseiten. Zum Beispiel, www.ubuntu.com beinhaltet auch design.ubuntu.com, developer.ubuntu.com und einige weitere. Du kannst den Zugriff auf alle Subdomains mit einer Wildcard anstelle des Namens der Subdomain erlauben::

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

Anmerkung: Siehst du in https? das Fragezeichen? Das bedeutet, dass das vorherige Zeichen (das ‘s’) optional ist. Falls https immer verwendet wird, entferne das Fragezeichen.

Kommandozeilenparameter#

Der Web-App-Container verwendet viele Parameter, um genau anzupassen, wie er verschiedene Web-Apps startet.

Sieh dir die Hilfe an::

webapp-container --help

Anmerkung: Nur die folgenden Optionen funktionieren unter dem konvergierten 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.

Chrome Optionen (Falls nichts davon angegeben, wird Chromes Oberfläche standartmäßig nicht angezeigt)::

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

Anmerkung: Die anderen Optionen sind speziell für Desktop-Web-Apps. Es wird empfohlen, sie nicht mehr zu verwenden.

Browseridentifikation ändern#

Manche Webseiten prüfen spezielle Teile der Anfragen des Browser, auch User-Agent genannt, um Informationen über das genutzte Gerät zu bekommen, nach denen sie die Gestaltung anpassen oder auch Funktionen aktivieren. Während in der Praxis nicht empfohlen, kann es manchmal nötig sein, die Standartinformationen, die vom Web-App-Container gesendet werden, anzupassen.

Um den User-Agent von der Kommandozeile aus zu ändern, nutze folgenden Parameter::

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

Browserdaten-Abschottung#

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.