Zobrazení obsahu jako v aplikaci ⚡️ PWA s příklady kódu
Vítejte v 2. týden, 4. den ze série 30 dní PWA! V dnešním článku se podíváme na různé režimy zobrazení, které si můžete nastavit pro svůj web, a také na experimentální funkci Překrytí ovládacích prvků oken, která vám umožní přizpůsobit záhlaví vašeho PWA.
Režimy zobrazení¶
Způsob, jakým se progresivní webové aplikace zobrazují v operačním systému po instalaci, se může lišit od způsobu, jakým se aplikace zobrazuje při otevření ve webovém prohlížeči. Například na mobilním zařízení se nainstalovaná PWA může zobrazit na celé obrazovce, zatímco v operačním systému pro stolní počítače se může zobrazit jako samostatné okno.
Existují čtyři různé režimy zobrazení a každý z nich nabízí různé možnosti uživatelského rozhraní prohlížeče, které je třeba zvážit při výběru správného režimu zobrazení pro vaši PWA.
Preferovaný režim zobrazení je určen pomocí elementu display v manifestu webové aplikace, který má jednu z následujících hodnot: fullscreen, standalone, minimal-ui nebo browser:
Pokud prohlížeč nepodporuje režim zobrazení, což je možné, protože je volitelný nebo nepodporuje všechny možnosti režimu zobrazení, pak se režim zobrazení vrátí k podporovanému režimu v následujícím pořadí:
celá obrazovka → samostatný → minimalistické uživatelské rozhraní → prohlížeč
Režim offline zobrazení¶
V samostatném režimu vypadá a chová se PWA nejvíce jako aplikace navržená pro konkrétní platformu. Otevírá se v okně odděleném od okna prohlížeče a skryje všechny prvky uživatelského rozhraní prohlížeče, například adresní řádek. Standardní prvky uživatelského rozhraní systému, jako je tlačítko Zpět nebo zavření okna, zůstávají zachovány. V tomto režimu může mít aplikace také vlastní ikonu ve spouštěči aplikací. Pokud samostatný režim není k dispozici, vrátí se do režimu zobrazení s minimálním uživatelským rozhraním. Twitter používá pro své PWA výraz „samostatný“.
Režim zobrazení na celou obrazovku¶
Režim celé obrazovky zabere celou dostupnou plochu obrazovky a skryje všechny prvky uživatelského rozhraní prohlížeče. Pokud režim celé obrazovky není k dispozici, přepne se do samostatného režimu. Zde je příklad hry používající režim celé obrazovky.
Podívejte se na PWA PacMan zde.
Minimální režim zobrazení uživatelského rozhraní¶
Minimální režim zobrazení uživatelského rozhraní umožňuje vytvořit PWA podobnou režimu zobrazení bez headless. Otevře se ve vlastním okně, ale aplikace si zachovává minimální sadu ovládacích prvků uživatelského rozhraní prohlížeče. Uživatelské rozhraní se může v jednotlivých prohlížečích lišit. OneDrive PWA používá režim zobrazení s minimálním uživatelským rozhraním.
Režim zobrazení prohlížeče¶
Režim v prohlížeči zachovává všechny funkce prohlížeče, ale vaše webová aplikace se nenainstaluje. Otevře se v běžném okně nebo na kartě prohlížeče. Pokud by Twitter nepoužíval offline režim, zobrazoval by se v prohlížeči jako běžná karta.
Cílení na různé režimy zobrazení pomocí funkce médií v režimu zobrazení.¶
V závislosti na zvoleném režimu zobrazení pro PWA mohou být některé prvky skryté, když je webová aplikace otevřená na kartě prohlížeče, zejména pokud ji spouštíte v samostatném režimu nebo v režimu celé obrazovky, který skryje tlačítka uživatelského rozhraní prohlížeče. Pokud tlačítko Zpět není k dispozici, možná budete potřebovat možnost navigace zpět. Nebo možná budete muset mírně upravit styly webu, aby se lépe zobrazoval v režimu celé obrazovky.
Toho lze dosáhnout zacílením na konkrétní režimy zobrazení pomocí funkce display-mode media.
V tomto příkladu se tlačítko s třídou .app-button zobrazí pouze tehdy, když je PWA offline. Můžete jít ještě o krok dál a pomocí mediálních dotazů změnit způsob zobrazení datových zdrojů na menších obrazovkách ve srovnání s počítači, když je uživatel offline.
Úprava nastavení zobrazení pomocí překrytí ovládacích prvků okna¶
Předchozí režimy zobrazení, které jsem zmínil, v současné době umožňují přizpůsobit zobrazení pod záhlavím okna PWA na ploše pouze v samostatném režimu. Překrytí ovládacích prvků okna je experimentální možnost zobrazení, která vám umožní přizpůsobit záhlaví okna PWA pomocí CSS a JavaScriptu. Poskytuje přístup k prostoru vedle ovládacích prvků, které minimalizují, maximalizují nebo zavírají okno aplikace.
Protože se jedná o experimentální funkci, která je stále ve vývoji, její chování se může změnit. Tuto funkci můžete povolit v prohlížečích Chrome a Edge tak, že přejdete na stránku about://flags a zapnete příznak Překrytí ovládacích prvků okna PWA na ploše.
Tento příklad z návrhu specifikace ukazuje, jak se oblast záhlaví zpřístupní, když je povoleno WCO.
Používání ovládacích prvků překryvného okna¶
Abychom mohli tuto funkci používat, musíme do souboru manifestu naší webové aplikace přidat display_override.
Přizpůsobený záhlaví se zobrazí v samostatném okně PWA pouze na desktopovém operačním systému. Po použití display_override přepneme na preferovaný režim zobrazení, pokud není k dispozici překrývající se ovládací prvky okna.
Nyní, když jsme v manifestu specifikovali, že chceme používat ovládací prvky překryvného okna, musíme přidat CSS pro umístění obsahu v oblasti záhlaví. Toho lze dosáhnout pomocí následujících proměnných prostředí CSS:
- oblast-titlebar-x
- oblast-titlebar-y
- šířka oblasti titulního panelu
- výška oblasti titulního řádku
Použití těchto proměnných prostředí by vypadalo nějak takto:
Proměnná titlebar-area-x určuje vzdálenost od levé strany výřezu k místu, kde se zobrazí záhlaví okna, a to celým číslem. Proměnná titlebar-area-y určuje vzdálenost od horního okraje okna. Proměnné titlebar-area-width a titlebar-area-height určují šířku a výšku s náhradními hodnotami. Náhradní hodnoty se používají, když aplikace není nainstalována, když není podporována funkce Překrytí ovládacích prvků okna nebo když se uživatel odhlásil z této funkce.
Ponechání taženého titulního pruhu¶
Nyní, když jste umístili a upravili styl záhlaví, zbývá ještě jeden krok. Pokud je povoleno překrytí ovládacích prvků okna, okno již nelze přetahovat, takže to musíme opravit pomocí vlastnosti CSS app-region.
Tato vlastnost CSS je také experimentální, takže pro fungování vyžaduje -webkit-app-region a je podporována pouze v prohlížečích založených na Chromiu.
Zdroje.¶
- Režim zobrazení MDN
- Návrh aplikace: Režimy zobrazení
- WCO: Jít dál
Resumé¶
Režimy zobrazení jsou jednoduchý způsob, jak vytvořit PWA, která vypadá jako aplikace specifická pro platformu, a jsou specifikovány pomocí elementu display v manifestu webové aplikace. Možnost dále přizpůsobit oblast záhlaví a vytvořit tak ještě více desktopový zážitek, když je PWA zobrazena v samostatném okně, je k dispozici prostřednictvím experimentálního nastavení Překrytí ovládacích prvků oken, které je k dispozici v prohlížečích Chromium.
Nalaďte si zítřejší další příspěvek, kde se podíváme na ukládání do mezipaměti.
Cvičení¶
Vyberte ukázkovou aplikaci a změňte režimy zobrazení v manifestu, abyste viděli, jak se každý z nich zobrazuje po otevření. Jaké funkce v jednotlivých režimech zobrazení chybí nebo byly přidány? Jak se změní uživatelské rozhraní?