Посібник з WebApp

Як вбудовується webapp в оболонку

Веб-програма відтворюється всередині контейнера webapp, який виконується як програма Ubuntu в оболонці Ubuntu/Unity.

Подивимося на це ближче:

На найглибшому рівні є веб-сайт, який розробник ідентифікує з URL-адресою. Веб-сайт формується та працює у QT WebEngine на базі webview. WebView надається попередньо встановленим браузером Morph й автоматично опікується такими речами, як файлові діалоги (за допомогою ContentHub), завантаження, дозволи тощо.

Запуск

You can launch a webapp from the terminal with::

webapp-container URL

For example::

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

Ця проста форма працює, але майже кожний пакунок використовує такі функції як контейнеризацію URL з їх шаблонами як описано нижче.

Користувацький інтерфейс

Зазвичай webapp заповнює весь екран без необхідності загальних керівних елементів користувацького інтерфейсу які є у звичайних браузерах.

У деяких випадках деякі елементи навігації є доречними, такі як Назад та Вперед або рядок адреси. Вони вмикаються параметрами командного рядка:

  • --enable-back-forward Увімкнути кнопки назад та вперед на панелі інструментів (внизу вікна webapp)

  • --enable-addressbar Увімкнути адресний рядок (внизу вікна webapp)

Шаблони URL

Автори webapp часто обмежують перегляд певним вебсайтом. Таким чином розробник хоче контролювати посилання, які повинні відкриватися у webapp (усі інші посилання відкриватимуться у браузері). Це робиться з шаблонами URL як частиною командного рядка webapp.

Але різні веб-програми використовують сторінки, які розміщені на різних сайтах або які використовують зовнішні ресурси та сторінки.

Обидва обмеження та доступ до вказаних зовнішніх URL-адрес реалізуються за допомогою шаблонів URL, наданих як аргументи під час запуску. Подивімося детальніше.

Типово без обмежень

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

Користувач може перейти до будь-якого URL без обмежень. Наприклад, якщо клацнути на кнопку Developer (Розробник) вгорі, у webapp відкриється developer.ubuntu.com.

Підказка: Якщо додати параметр --enable-addressbar, активується адресний рядок та буде видно адресу поточної адреси.

Прості обмеження на сайті

One often wants to contain users to the site itself. That is, if the website is www.ubuntu.com, it may be useful to contain webapp users only to subpages of www.ubuntu.com. This is done by adding a wildcard URL pattern to the launch command, as follows::

webapp-container --webappUrlPatterns=https://www.ubuntu.com/* https://www.ubuntu.com
--webappUrlPatterns= вказує, що наступна маска

https://www.ubuntu.com/* — маска, де зірочка використана для заміни рядка з усіма можливими символами у посиланні

З цією командою запуску та маскою URL, користувач може перейти туди та відкрити у webapp будь-яке посилання, що починається з https://www.ubuntu.com/. Наприклад, можна клацнути на банері на кнопку Phone (Телефон, https://www.ubuntu.com/phone) і вона спрацює у webapp або кнопку Tablet (Планшет, https://www.ubuntu.com/tablet). Але з клацанням на Developer (Розробник) відкриється відповідне посилання у браузері.

Підказка: Переконайтеся, що на початку URL зазначений протокол, тобто, краще написати https://www.ubuntu.com замість www.ubuntu.com. Якщо не вказати протокол, адреса URL може бути розпізнана неоднозначно та це може призвести до проблем з безпекою.

Більш складні шаблони заміни

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

Підказка: Зірочка замість піддомена замінює собою будь-який дійсний піддомен. Цей шаблон корисний, коли потрібно мати доступ до усіх піддоменів та їх сторінок, включно з поверненням до початкової адреси (https://www.ubuntu.com) та сторінок цього домену.

Додавання 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 необхідний завжди, знак питання ставити не потрібно.

Параметри командного рядка

Контейнер webapp приймає різні параметри для точного налаштування, як запускати різні веб-програми.

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)

Підказка: Інші доступні параметри для програм webapp робочого столу. Рекомендовано їх більше не використовувати.

Змінити визначення User-Agent

Деякі вебсайти перевіряють різні елементи ідентифікації веббраузерів, такі як User-Agent, для гнучкого налаштування відтворення або увімкнення певних функцій. В той час як це не є рекомендованою практикою, іноді з’являється необхідність змінити типові налаштування контейнера webapp.

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

Ізоляція даних браузера

Досвід webapp міститься та ізолюється з огляду на дані браузера. Це значить, що webapp не має доступу до даних з будь-якого іншого встановленого браузера, таких як історія, cookie тощо. Інші браузери у системі не отримують доступ до даних webapp.

Сховище

Підтримують наступні параметри сховища: Local/Session Storage, IndexedDB та застарілий WebSQL. До того ж API файлової системи не підтримується, оскільки програми не мають прямого доступу до файлової системи.