PWA spoza przeglądarki zarządza własnym oknem. W tym rozdziale zapoznasz się z interfejsami API oraz możliwościami zarządzania oknem w systemie operacyjnym.
Okno PWA
Uruchomienie aplikacji z własnego okna (zarządzanego przez PWA) ma wszelkie zalety i obowiązki w dowolnym oknie w danym systemie operacyjnym, w tym:
- Możliwość zmiany rozmiaru i przesuwania okna w systemach operacyjnych z trybem wielu okien (np. Windows i ChromeOS).
- udostępnianie ekranu innym oknam aplikacji, tak jak w trybie podziału iPadOS lub trybie podzielonego ekranu Androida;
- Reklamy wyświetlają się w dokach, paskach zadań i w menu alt-tab na komputerach oraz na listach okien wielozadaniowych na urządzeniach mobilnych.
- możliwość minimalizacji, przesuwania okna między ekranami i komputerami oraz zamykania go w dowolnym momencie.
Przenoszenie okna i zmienianie jego rozmiaru
Okno PWA może mieć dowolny rozmiar i umieścić się w dowolnym miejscu na ekranie w systemie operacyjnym komputera. Domyślnie, gdy użytkownik otworzy aplikację PWA po raz pierwszy po zainstalowaniu, otrzyma domyślny rozmiar okna, określony jako procent bieżącego ekranu. Maksymalna rozdzielczość to 1920 x 1080, która znajduje się w lewym górnym rogu ekranu.
Użytkownik może przenieść okno i zmienić jego rozmiar, a przeglądarka zapamięta ostatnie ustawienie, więc przy następnym otwarciu aplikacji okno zachowa rozmiar i położenie z poprzedniego użycia.
Nie można zdefiniować preferowanego rozmiaru ani pozycji PWA w pliku manifestu. Zmiana położenia okna i jego rozmiar możesz wykonywać tylko przy użyciu interfejsu JavaScript API. Z poziomu kodu możesz przenieść własne okno PWA i zmienić jego rozmiar za pomocą funkcji moveTo(x, y) i resizeTo(x, y) obiektu window.
Możesz na przykład zmienić rozmiar okna PWA i przenieść go podczas wczytywania aplikacji PWA za pomocą:
document.addEventListener("DOMContentLoaded", event => {
// we can move only if we are not in a browser's tab
isBrowser = matchMedia("(display-mode: browser)").matches;
if (!isBrowser) {
window.moveTo(16, 16);
window.resizeTo(800, 600);
}
});
Zapytanie o bieżący rozmiar i pozycję ekranu możesz wysyłać za pomocą obiektu window.screen. Do wykrywania zmian rozmiaru okna służy zdarzenie resize pochodzące z obiektu window. Nie ma zdarzenia rejestrowania przesunięcia okna, więc możesz często wysyłać zapytania o tę pozycję.
Przechodzenie do innych witryn
Jeśli chcesz przekierować użytkownika na stronę zewnętrzną spoza zakresu Twojej aplikacji PWA, możesz to zrobić przy użyciu standardowego elementu HTML <a href>, korzystając z elementu location.href lub otwierając nowe okno na zgodnych platformach.
Jeśli Twoja aplikacja PWA jest zainstalowana we wszystkich przeglądarkach, to gdy spróbujesz otworzyć adres URL spoza zakresu Twojego pliku manifestu, jej mechanizm przeglądarki wyrenderuje przeglądarkę w kontekście okna.
Niektóre funkcje przeglądarek w aplikacji to:
- Wyświetlają się nad treściami.
- Zawierają statyczny pasek adresu URL z bieżącym źródłem, tytułem okna i menu. Zwykle są one związane z elementem
theme_colorw Twoim pliku manifestu. - W menu kontekstowym możesz otworzyć ten adres URL w przeglądarce.
- Użytkownicy mogą zamknąć przeglądarkę lub wrócić.
Przepływy autoryzacji
Wiele procesów uwierzytelniania i autoryzacji w internecie obejmuje przekierowanie użytkownika do innego adresu URL w innym źródle w celu uzyskania tokena, który powróci do źródła Twojej aplikacji PWA, na przykład przy użyciu protokołu OAuth 2.0.
W takich przypadkach przeglądarka w aplikacji postępuje zgodnie z tymi instrukcjami:
- Użytkownik otwiera aplikację PWA i klika „Zaloguj się”.
- PWA przekierowuje użytkownika do adresu URL spoza zakresu tej aplikacji, tak aby mechanizm renderujący otworzy przeglądarkę w aplikacji PWA.
- Użytkownik może w każdej chwili anulować przeglądarkę w aplikacji i wrócić do PWA.
- Użytkownik loguje się w przeglądarce w aplikacji. Serwer uwierzytelniania przekierowuje użytkownika do źródła PWA, wysyłając token jako argument.
- Przeglądarka w aplikacji zamyka się po wykryciu adresu URL należącego do zakresu aplikacji PWA.
- Wyszukiwarka przekierowuje nawigację w głównym oknie PWA na adres URL, pod który przeszedł serwer uwierzytelniania w przeglądarce w aplikacji.
- PWA pobiera token, przechowuje go i renderuje.
Wymuszanie nawigacji w przeglądarce
Jeśli chcesz wymusić otwarcie przeglądarki za pomocą adresu URL, a nie przeglądarki w aplikacji, możesz użyć elementu docelowego _blank elementów <a href>. Działa to tylko w przypadku aplikacji PWA na komputery. Na urządzeniach mobilnych nie można otworzyć przeglądarki z adresem URL.
function openBrowser(url) {
window.open("url", "_blank", "");
}
Otwieranie nowych okien
Na komputerze użytkownicy mogą otworzyć więcej niż 1 okno tej samej aplikacji PWA. Każde okno będzie różniło się od innych elementów nawigacyjnych tego samego adresu URL (start_url), tak jakby były otwierane 2 karty przeglądarki z tym samym adresem URL.
Z menu w aplikacji PWA użytkownicy mogą wybrać Plik, a następnie Nowe okno. Z poziomu kodu PWA możesz otworzyć nowe okno za pomocą funkcji open(). Więcej informacji znajdziesz w dokumentacji.
function openNewWindow() {
window.open("/", "new-window", "width=600,height=600");
}
Wywołanie open() w oknie PWA w systemie iOS lub iPadOS zwraca wartość null i nie otwiera okna. Otwarcie nowych okien na Androidzie powoduje utworzenie nowej przeglądarki w aplikacji z adresem URL – nawet jeśli znajduje się on w zakresie Twojej aplikacji PWA. Zwykle nie powoduje ona uruchomienia przeglądania z zewnątrz.
Tytuł okna
Element <title> był używany głównie do optymalizacji SEO ze względu na ograniczoną ilość miejsca w karcie przeglądarki. Gdy przejdziesz z przeglądarki do okna aplikacji PWA, dostępne będzie całe miejsce na pasku tytułu.
Możesz definiować zawartość paska tytułu:
- Statycznie w elemencie HTML
<title>. - Dynamiczna zmiana właściwości ciągu
document.titlew dowolnym momencie.
W przypadku aplikacji PWA na komputerach tytuł jest niezbędny i wyświetla się na pasku tytułu okna, a czasem w menedżerze zadań lub w menu wyboru wielozadaniowego. Jeśli Twoja aplikacja jest ograniczona do jednej strony, możesz zaktualizować tytuł na każdej trasie.
Tryb kart
Eksperymentalna funkcja nazywana trybem kart sprawia, że projekt PWA oparty na kartach będzie podobny do kart przeglądarki. W tym przypadku użytkownik może mieć otwartych kilka kart w tej samej aplikacji PWA, ale wszystkie są powiązane w tym samym oknie systemu operacyjnego, jak widać na tym filmie:
Więcej informacji o tej eksperymentalnej funkcji znajdziesz w artykule Karta w trybie aplikacji PWA.
Nakładka z elementami sterującymi okna
Wcześniej wspomnieliśmy, że możesz zmienić tytuł okna, definiując wartość elementu <title> lub właściwości document.title. To zawsze jest wartość w postaci ciągu znaków. A gdybyśmy mogli zaprojektować pasek tytułu zgodnie z potrzebami, dodając kod HTML, CSS i obrazy?
Z tego powodu przychodzi czas na nakładkę z elementami sterującymi okna – nową, eksperymentalną funkcję PWA w przeglądarkach Microsoft Edge i Google Chrome na komputery.
Więcej informacji o tej funkcji znajdziesz w artykule Dostosowywanie nakładki elementów sterujących oknami na pasku tytułu aplikacji PWA.
Zarządzanie oknami
W przypadku wielu ekranów użytkownicy będą chcieli wykorzystać całą dostępną przestrzeń. Na przykład:
- Edytory grafiki z wieloma oknami à la Gimp mogą umieszczać różne narzędzia do edycji w precyzyjnie rozmieszczonych oknach.
- Wirtualne działy obrotu reklamami mogą pokazywać trendy rynkowe w wielu oknach, z których każdy może być wyświetlany w trybie pełnoekranowym.
- Aplikacje do pokazu slajdów mogą wyświetlać notatki dla prelegenta na wewnętrznym ekranie głównym i w prezentacji na zewnętrznym projektorze.
Interfejs Window Management API zapewnia progresywne aplikacje internetowe (PWA).
Pobieram informacje o ekranie
Interfejs Window Management API dodaje nową metodę window.getScreenDetails(), która zwraca obiekt z ekranami jako stałą tablicę dołączonych ekranów. Dostępny jest też aktywny obiekt dostępny z poziomu ScreenDetails.currentScreen, który odpowiada bieżącej wartości window.screen.
Zwrócony obiekt uruchamia też zdarzenie screenschange po zmianie tablicy screens. Nie dzieje się to jednak w przypadku zmiany atrybutów na poszczególnych ekranach. Poszczególne ekrany, window.screen lub ekran w tablicy screens, także wywołują zdarzenie change w przypadku zmiany atrybutów.
// Request an object with a screen objects
const screenDetails = await window.getScreenDetails();
screenDetails.screens[0].isPrimary; // e.g. true
screenDetails.screens[0].isInternal; // e.g. true
screenDetails.screens[0].pointerTypes; // e.g. ["touch"]
screenDetails.screens[0].label; // e.g. 'Samsung Electric Company 28"'
// Access the live object corresponding to the current `window.screen`.
// The object is updated on cross-screen window placements or device changes.
screenDetails.currentScreen;
screenDetails.addEventListener('screenschange', function() {
// NOTE: Does not fire on changes to attributes of individual screens.
const screenCount = screenDetails.screens.length;
const currentScreen screenDetails.currentScreen.id;
});
Jeśli użytkownik lub system operacyjny przeniesie okno Twojej aplikacji PWA z jednego ekranu na drugi, z obiektu Szczegóły ekranu zostanie również wywołane zdarzenie currentscreenchange.
Blokada wybudzania ekranu
Wyobraź sobie, że jesteś w kuchni i szukasz przepisu na tablecie. Właśnie zakończyłeś przygotowywanie składników. Masz w zanadrzu bałagan i obracasz się do urządzenia, aby przeczytać następny krok. Katastrofa! Ekran zrobił się czarny! Interfejs Screen Wake Lock API jest przeznaczony dla Ciebie i pozwala aplikacji PWA uniemożliwiać przyciemnianie, uśpienie i blokowanie ekranu. Dzięki temu użytkownicy mogą bez obaw zatrzymywać, uruchamiać, zamykać i wrócić.
// Request a screen wake lock
const wakeLock = await navigator.wakeLock.request();
// Listen for wake lock release
wakeLock.addEventListener('release', () => {
console.log(`Screen Wake Lock released: ${wakeLock.released}`);
});
// Manually release the wake lock
wakeLock.release();
Klawiatura wirtualna
Urządzenia dotykowe, takie jak telefony i tablety, oferują wirtualną klawiaturę ekranową, aby użytkownik mógł pisać, gdy widoczne są elementy Twojej aplikacji PWA.
Dzięki interfejsowi VirtualKeyboard API aplikacja PWA może teraz mieć większą kontrolę nad klawiaturą na zgodnych platformach za pomocą interfejsu navigator.virtualKeyboard, w tym:
- Wyświetlam i ukrywam klawiaturę wirtualną za pomocą funkcji
navigator.virtualKeyboard.show()inavigator.virtualKeyboard.hide(). - Informując przeglądarkę, że masz zamiar samodzielnie zamknąć klawiaturę wirtualną, ustawiając w polu
navigator.virtualKeyboard.overlaysContentwartośćtrue. - Informacja o wyświetleniu i zniknięciu klawiatury wraz ze zdarzeniem
geometrychangeznavigator.virtualKeyboard. - Ustawienie zasady klawiatury wirtualnej podczas edytowania elementów hosta (za pomocą
contenteditable) z atrybutem HTMLvirtualkeyboardpolicy. Zasada pozwala określić, czy klawiatura wirtualna ma być obsługiwana automatycznie przez przeglądarkę przy użyciu wartościauto, czy przez skrypt za pomocą wartościmanual. - Użycie zmiennych środowiskowych CSS w celu uzyskania informacji o wyglądzie klawiatury wirtualnej, np.
keyboard-inset-heightikeyboard-inset-top.
Więcej informacji o tym interfejsie API znajdziesz w artykule o pełnej kontroli przy użyciu interfejsu VirtualKeyboard API.
Zasoby
- Zarządzanie kilkoma wyświetlaczami za pomocą interfejsu Multi-Screen Window Placement API
- Tryb aplikacji na karcie dla aplikacji PWA
- Nie usypiaj dzięki interfejsowi Screen Wake Lock API
- Pełna kontrola dzięki interfejsowi VirtualKeyboard API
- Dostosowywanie nakładki z elementami sterującymi okna w pasku tytułu aplikacji PWA
- Wyświetlanie treści na pasku tytułu