Webapp guide¶

網路應用程式如何適應 shell¶

網路應用程式顯示在網路應用程式容器內的網路應用程式的視圖中, 該容器在 Ubuntu/Unity shell 中作為 Ubuntu 應用程式運行。

仔細看看：

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.

啟動¶

You can launch a webapp from the terminal with::

webapp-container URL

For example::

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.

使用者界面¶

網路應用程式通常會填滿整個螢幕空間，而不需要通常在標準瀏覽器上找到使用者介面的控制項目。

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 Enable the display of the back and forward buttons in the toolbar (at the bottom of the webapp window)

--enable-addressbar Enable the display of the address bar (at the bottom of the webapp window)

網址格式¶

網路應用程式的作者通常希望包含對目標網站的流覽。也就是說，開發人員希望控制可以在網路應用程式中打開的網址 (所有其他網址都在瀏覽器中打開)。這是用網址模式作為網路應用程式命令列的一部分來完成的。

但是，有許多的網路應用程式則使用託管在多個網站上使用外部資源和網站頁面。

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.

在預設情況下不包含¶

By default, there is no URL containment. Suppose you launch a webapp without any patters and only a starting URL like this::

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

使用者可以不受限制地導引到任何網址。例如，如果他們按一下頂部的「開發人員」按鈕, 他們將導航到 developer.ubuntu.com，然後它將顯示在網路應用程式中。

Tip: You can see the URL of the current page by enabling the address bar with --enable-addressbar.

簡單的網站安全¶

人們通常希望將使用者包含到網站本身。也就是說，如果網站 www.ubuntu.com，則僅包含網路應用程式的使用者可能會對 www.ubuntu.com 的子頁面有所説明。這是透過向啟動命令中添加萬用字元網址模式來完成的，如以下所示:

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

--webappUrlPatterns= indicates a pattern is next: 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¶

You might want to limit access to only some subpages of your site from within the webapp. This is easy with wildcard patterns. (Links to other subpages are opened in the browser.) For example, the following allows access to www.ubuntu.com/desktop/features and www.ubuntu.com/phone/features while not allowing access to www.ubuntu.com/desktop or www.ubuntu.com/phone:

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

多種模式¶

You can use multiple patterns by separating them with a comma. For example, the following allows access only to 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

提示: 要實現預期的相容行為，通常需要多種模式。

添加特定子網域¶

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

使用萬用字元添加子網域¶

Some URLs have multiple subdomains. For example, www.ubuntu.com has design.ubuntu.com, developer.ubuntu.com and more. You can add access to all subdomains with a wildcard in the subdomain position::

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

注意：https? 中的問號。這意味著前面的字符 (「s」) 是可選的。如果始終需要 https，請省略問號。

指令參數¶

網路應用程式容器接受許多選項來微調，它是承載各種網路應用程式的方式。

See all help with::

webapp-container --help

Note: Only the following options apply to converged 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 options (if none specified, no chrome is shown by default)::

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

注意: 其他可用選項特定於桌面網路應用程式。建議不要再使用它們。

使用者代理字串重寫¶

某些網站檢查網路引擎標識的特定部分 (也稱為使用者代理字串)，來調整其演示文稿或啟用某些功能。雖然不是推薦的做法，但有時需要更改網路應用容器發送的預設字串。

To change the string from the command line, use the following option::

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

瀏覽器數據包含¶

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.