Zarządzanie oknami

PWA poza przeglądarką zarządza własnym oknem. W tym rozdziale poznasz interfejsy API i możliwości zarządzania oknem w systemie operacyjnym.

Okno PWA

Uruchomienie w oknie zarządzanym przez PWA ma wszystkie zalety i odpowiedzialnie związane z oknami w tym systemie operacyjnym, takie jak:

  • możliwość zmiany rozmiaru okna i przesuwania go w systemach operacyjnych z wieloma oknami, takich jak Windows czy ChromeOS.
  • udostępnianie ekranu innym oknom aplikacji, tak jak w przypadku trybu podzielonego ekranu w iPadOS lub trybu podzielonego ekranu w Androidzie;
  • pojawiają się w dokach, na paskach zadań, w menu alt na karcie na komputerze i na listach okien zadań wielozadaniowych na urządzeniach mobilnych;
  • możliwość zminimalizowania okna, przeniesienia go na inny ekran lub pulpit i zamknięcia w dowolnym momencie;

Przenoszenie okna i zmiana jego rozmiaru

Okno PWA może mieć dowolny rozmiar i umieszczone w dowolnym miejscu na ekranie komputera stacjonarnego. Domyślnie, gdy użytkownik otworzy PWA po raz pierwszy po zainstalowaniu, aplikacja otrzyma domyślny rozmiar okna w procentach bieżącego ekranu, przy maksymalnej rozdzielczości 1920 x 1080 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 uruchomieniu aplikacji okno zachowa jego rozmiar i położenie.

Nie można zdefiniować preferowanego rozmiaru i położenia aplikacji internetowej w pliku manifestu. Położenie i rozmiar okna możesz zmienić tylko za pomocą interfejsu JavaScript API. W kodzie możesz przesuwać i zmieniać rozmiar okna PWA za pomocą funkcji moveTo(x, y) i resizeTo(x, y) obiektu window.

Możesz na przykład zmienić rozmiar okna PWA i je przesunąć, gdy aplikacja wczyta się, 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);
   }
});

Za pomocą obiektu window.screen możesz wysłać zapytanie o obecny rozmiar i położenie ekranu. Zdarzenie resize w obiekcie window pozwala wykryć, kiedy rozmiar okna uległ zmianie. Nie ma zdarzenia rejestrującego przesuwanie okna, więc możesz często wysyłać zapytania o pozycję.

Przeglądanie innych witryn

Jeśli chcesz przekierować użytkownika do witryny zewnętrznej, która wykracza poza zakres PWA, możesz to zrobić za pomocą standardowego elementu HTML <a href>, używając location.href lub otwierając nowe okno na zgodnych platformach.

Obecnie, jeśli masz zainstalowaną progresywną aplikację internetową, po przejściu do adresu URL, który wykracza poza zakres manifestu, mechanizm przeglądarki w progresywnej aplikacji internetowej spowoduje wyświetlenie w kontekście okna przeglądarki wbudowanej w aplikacji.

Oto niektóre funkcje przeglądarek w aplikacji:

  • Wyświetlają się nad treściami.
  • Mają one statyczny pasek adresu URL, na którym wyświetla się bieżące źródło, tytuł okna i menu. Zwykle są one związane z theme_color z pliku manifestu.
  • W menu kontekstowym możesz otworzyć ten adres URL w przeglądarce.
  • Użytkownicy mogą zamknąć przeglądarkę lub wrócić.

przeglądarka w aplikacji w wersji na komputery z dodatkiem PWA podczas przeglądania adresu URL, który wykracza poza zakres.

przeglądarka w aplikacji na iPhonie, gdy przeglądasz adres URL, który wykracza poza zakres samodzielnej aplikacji PWA.

przeglądarka w aplikacji na Androidzie, gdy przeglądasz adres URL, który wykracza poza zakres samodzielnej aplikacji PWA.

Przepływy autoryzacji

Wiele procesów uwierzytelniania i autoryzacji w internecie wymaga przekierowania użytkownika do innego adresu URL w innym źródle, aby uzyskać token, który zostanie zwrócony do źródła PWA, np. przy użyciu OAuth 2.0.

W takich przypadkach przeglądarka w aplikacji działa w ten sposób:

  1. Użytkownik otwiera PWA i klika Logowanie.
  2. Twoja aplikacja PWA przekierowuje użytkownika do adresu URL, który wykracza poza zakres aplikacji PWA, aby mechanizm renderowania otworzył przeglądarkę w aplikacji PWA.
  3. Użytkownik może w każdej chwili zamknąć przeglądarkę w aplikacji i wrócić do PWA.
  4. 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.
  5. Przeglądarka w aplikacji zamyka się, gdy wykryje adres URL, który należy do zakresu aplikacji internetowej.
  6. Mechanizm przekierowuje główne okno nawigacyjne aplikacji PWA na adres URL, pod który przeszedł serwer uwierzytelniania w przeglądarce w aplikacji.
  7. Twoja PWA pobiera token, przechowuje go i renderuje PWA.

Wymuszanie nawigacji w przeglądarce

Jeśli chcesz wymusić otwarcie przeglądarki z adresem URL, a nie przeglądarki w aplikacji, możesz użyć elementu _blank w elementach <a href>. Ta funkcja działa 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 komputerach użytkowników mogą otwierać więcej niż jedno okno tej samej aplikacji PWA. Każde okno będzie prowadzić do tego samego start_url, tak jakbyś otworzył 2 karty w przeglądarce z tym samym adresem URL. W menu aplikacji PWA użytkownicy mogą wybrać Plik, a następnie Nowe okno. Z poziomu kodu PWA możesz otworzyć nowe okno przy użyciu funkcji open(). Więcej informacji znajdziesz w dokumentacji.

function openNewWindow() {
    window.open("/", "new-window", "width=600,height=600");
}

Ta sama zainstalowana PWA z kilkoma oknami otwartymi w systemie operacyjnym na komputerze.

Wywołanie open() w oknie aplikacji PWA w systemie iOS lub iPadOS zwraca null i nie otwiera okna. Otwieranie nowych okien na Androidzie powoduje utworzenie nowej przeglądarki w aplikacji dla adresu URL (nawet jeśli adres URL znajduje się w zakresie działania PWA), która zwykle nie uruchamia zewnętrznej przeglądarki.

Tytuł okna

Element <title> był używany głównie do celów SEO, ponieważ przestrzeń na karcie przeglądarki jest ograniczona. Gdy przejdziesz z przeglądarki do okna w aplikacji PWA, będziesz mieć dostęp do całego paska tytułu.

Możesz określić zawartość paska tytułu:

  • Statycznie w elemencie HTML <title>.
  • Dynamiczna zmiana właściwości ciągu document.title w dowolnym momencie.

W przypadku aplikacji internetowych na komputery tytuł jest niezbędny. Jest on używany na pasku tytułu okna, a czasem także w menedżerze zadań lub w wykazie zadań wielozadaniowych. Jeśli masz aplikację jednostronicową, możesz zaktualizować tytuł na każdej trasie.

Tryb kart

Funkcja eksperymentalna, zwana trybem kart, umożliwia korzystanie z wersji PWA z interfejsem opartym na kartach, podobnym do przeglądarki internetowej. W tym przypadku użytkownik może mieć otwarte kilka kart z tego samego PWA, ale wszystkie są połączone w tym samym oknie systemu operacyjnego, jak widać na poniższym filmie:

Więcej informacji na temat tej eksperymentalnej funkcji znajdziesz w artykule Tryb aplikacji z kartami.

Nakładka z elementami sterującymi okna

wspomnieliśmy, że tytuł okna można zmienić, definiując wartość elementu <title> lub właściwości document.title. Zawsze jest to jednak ciąg znaków. Co, jeśli moglibyśmy zaprojektować pasek tytułu według własnych potrzeb, korzystając z HTML, CSS i obrazów? Właśnie w tym celu służy okno z elementami sterującymi – nowa funkcja eksperymentalna w Microsoft Edge i Google Chrome przeznaczona dla PWA na komputery.

Więcej informacji na temat tej funkcji znajdziesz w artykule Dostosowywanie nakładki z elementami sterującymi okna w pasku tytułu aplikacji PWA.

Dzięki nakładce z elementami sterującymi okna możesz renderować treści w pasku tytułu.

Zarządzanie oknami

Użytkownicy korzystający z wielu ekranów chcą wykorzystać całą dostępną przestrzeń. Na przykład:

  • Edytory grafiki z wieloma oknami, takie jak Gimp, mogą umieszczać różne narzędzia do edycji w precyzyjnie rozmieszczonych oknach.
  • Wirtualne platformy zakupowe mogą pokazywać tendencje rynkowe w wielu oknach, z których każde można wyświetlać w trybie pełnoekranowym.
  • Aplikacje pokazów slajdów mogą wyświetlać notatki na wewnętrznym ekranie głównym, a prezentację na zewnętrznym projektorze.

Interfejs Window Management API pozwala aplikacjom PWA robić to i nie tylko.

Pobieranie szczegółów ekranu

Interfejs Window Management API zawiera nową metodę window.getScreenDetails(), która zwraca obiekt z ekranami jako niezmienną tablicę dołączonych ekranów. Z obiektu ScreenDetails.currentScreen można też uzyskać dostęp do aktywnego obiektu odpowiadającego bieżącemu window.screen.

Zwracany obiekt uruchamia też zdarzenie screenschange, gdy zmienia się tablica screens. (nie dotyczy to sytuacji, gdy zmieniasz atrybuty na poszczególnych ekranach). Poszczególne ekrany (elementy tablicy window.screen lub screens) wywołują też zdarzenie change, gdy zmieniają się ich atrybuty.

// 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].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 PWA z jednego ekranu na inny, obiekt szczegółów ekranu wywoła też zdarzenie currentscreenchange.

Blokada wybudzania ekranu

Wyobraź to sobie: jesteś w kuchni zgodnie z przepisem na tablecie. Właśnie skończyłaś przygotowywać składniki. Masz ręce w bałaganu. Odwrócisz się do urządzenia, aby przeczytać następny krok. Katastrofa! Ekran jest czarny. Interfejs Screen Wake Lock API jest dla Ciebie. Pozwala aplikacji PWA zapobiegać przyciemnianiu, uśpieniu i zablokowaniu ekranu, dzięki czemu użytkownicy mogą bez obaw zatrzymywać, uruchamiać, wychodzić i powracać.

// 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, mają wirtualną klawiaturę ekranową, dzięki której użytkownik może wpisywać tekst, gdy aktywne są elementy formularza w Twojej aplikacji internetowej.

Dzięki interfejsowi navigator.virtualKeyboard VirtualKeyboard API aplikacja PWA może teraz mieć większą kontrolę nad klawiaturą na zgodnych platformach, w tym:

  • Wyświetlam i ukrywam klawiaturę wirtualną za pomocą funkcji navigator.virtualKeyboard.show() i navigator.virtualKeyboard.hide().
  • Poinformuj przeglądarkę, że zamykasz klawiaturę wirtualną, ustawiając navigator.virtualKeyboard.overlaysContent jako true.
  • Informacja o tym, kiedy klawiatura pojawia się i znika ze zdarzeniem geometrychange o navigator.virtualKeyboard.
  • Ustawienie zasady klawiatury wirtualnej w elementach hosta do edycji (za pomocą atrybutu contenteditable) za pomocą atrybutu HTML virtualkeyboardpolicy. Zasada pozwala określić, czy klawiatura wirtualna ma być obsługiwana automatycznie przez przeglądarkę przy użyciu wartości auto, czy przez skrypt z użyciem wartości manual.
  • Korzystanie z zmiennych środowiskowych CSS do uzyskiwania informacji o wyglądzie klawiatury wirtualnej, takich jak keyboard-inset-height i keyboard-inset-top.

Więcej informacji o tym interfejsie API znajdziesz w artykule Pełna kontrola za pomocą interfejsu VirtualKeyboard API.

Zasoby