Посібник з WebApp¶

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

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

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

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

Запуск¶

Ви можете запустити webapp у терміналі з:

webapp-container URL

Наприклад:

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

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

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

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

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

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

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

Шаблони URL¶

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

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

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

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

Типово обмеження за посиланнями відсутні. Припустимо, Ви запускаєте webapp без будь-яких шаблонів та лише зі стартовою URL-адресою:

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

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

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

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

Часто хочеться обмежити користувачів самим сайтом. Тобто, якщо вебсайт це www.ubuntu.com, може бути корисним обмежити користувачів webapp сайтом www.ubuntu.com. Це можна зробити, додавши маску посилання URL до команди запуску за зразком:

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 може бути розпізнана неоднозначно та це може призвести до проблем з безпекою.

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

Всередині webapp можна обмежити доступ лише до деяких сторінок Вашого сайту. Це нескладно зробити за допомогою шаблонів. (Посилання на інші сторінки відкриються у браузері). Наприклад, наступні налаштування надають доступ до www.ubuntu.com/desktop/features та www.ubuntu.com/phone/features, але не дозволяють відкрити www.ubuntu.com/desktop та www.ubuntu.com/phone:

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

Декілька шаблонів¶

Можна використовувати декілька шаблонів, розділюючи їх комами. Наприклад, наступний набір надасть доступ тільки до www.ubuntu.com/desktop/features та www.ubuntu.com/phone/features:

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

Підказка: Декілька шаблонів часто використовуються для налаштування власних правил обмеження.

Додавання піддомена¶

Різні посилання можуть мати один або декілька піддоменів. (Наприклад, у наступному прикладі «developer» є піддоменом у developer.ubuntu.com.) Можна дозволити доступ до окремого піддомена (та усіх його сторінок) таким шаблоном:

--webappUrlPatterns=https://developer.ubuntu.com/*

Хоча іноді користувачу потрібно переходити назад до початкової адреси (та її сторінок). Тож, якщо початкова адреса це https://www.ubuntu.com, потрібен другий шаблон:

--webappUrlPatterns=https://developer.ubuntu.com/*,https://www.ubuntu.com/*

Якщо скласти все разом, отримаємо приклад, який починається з https://www.ubuntu.com та дозволяє відвідувати https://developer.ubuntu.com та усі сторінки сайту, а повертаємося до https://www.ubuntu.com з усіма сторінками:

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

Додавання піддоменів з маскою¶

Деякі посилання мають різні піддомени. Наприклад, www.ubuntu.com має design.ubuntu.com, developer.ubuntu.com та інші. Можна надати доступ до усіх піддоменів через маску замість назви піддомена:

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

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

Додавання http¶

Іноді сайти використовують для деяких сторінок http. Загалом це не дуже безпечно і краще цього уникати, але у прикладі можна побачити як з webapp надається доступ до www.launchpad.net через https та http (та до усіх сторінок через маску):

webapp-container --webappUrlPatterns=https?://www.launchpad.net/* https://www.launchpad.net

Підказка: Знак питання у https?. Це значить, що попередній символ (s) — не обов’язковий. Якщо https необхідний завжди, знак питання ставити не потрібно.

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

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

Уся довідка доступна з:

webapp-container --help

Підказка: Для сумісності з 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 (стандартно, якщо порожньо, Chrome прихований):

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

Для зміни цього рядку через команду, використовуйте такий параметр:

--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 файлової системи не підтримується, оскільки програми не мають прямого доступу до файлової системи.