Zarządzanie oknami

Aplikacja PWA spoza przeglądarki zarządza własnym oknem. W tym rozdziale poznać interfejsy API i możliwości zarządzania oknem w systemu operacyjnego.

Okno aplikacji PWA

Uruchamianie w osobnym oknie, którym zarządza PWA, ma wszystkie zalety i zakres odpowiedzialności z każdego okna w tym systemie operacyjnym, takie jak:

  • Możliwość zmiany rozmiaru i przesuwania okna w systemach operacyjnych z wieloma oknami, takich jak Windows czy ChromeOS.
  • udostępnianie ekranu w innych oknach aplikacji, na przykład w trybie podzielonego iPadOS lub w trybie 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ść minimalizowania okna, przenoszenia go na inne ekrany i komputery oraz zamykania ich 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 aplikację PWA po raz pierwszy po instalacji, jej rozmiar będzie domyślnie ustawiony jako procent bieżącego ekranu. Maksymalna rozdzielczość to 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 rozmiar i pozycję z poprzedniego użycia.

Nie można określić preferowanego rozmiaru i pozycji PWA w pliku manifestu. Położenie i rozmiar okna możesz zmienić tylko za pomocą interfejsu JavaScript API. Korzystając z kodu, możesz przenieść 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 i przenieść okno PWA podczas jej ładowania przy użyciu:

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);
   }
});

Możesz wysłać zapytanie dotyczące bieżącego rozmiaru i pozycji ekranu za pomocą obiektu window.screen. możesz wykryć, kiedy rozmiar okna zmienia się, używając zdarzenia resize z obiektu window. Nie ma zdarzenia, które pozwoliłoby przechwycić przesunięcie okna, można więc 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 Twojej aplikacji PWA, możesz to zrobić za pomocą standardowego elementu HTML <a href>, używając location.href. Możesz też otworzyć nowe okno na zgodnych platformach.

Obecnie we wszystkich przeglądarkach, jeśli Twoja aplikacja PWA jest zainstalowana, po przejściu do adresu URL spoza zakresu pliku manifestu mechanizm przeglądarki PWA wyświetli przeglądarkę w aplikacji w kontekście Twojego okna.

Oto niektóre funkcje przeglądarek w aplikacji:

  • Wyświetlają się nad treściami.
  • Mają statyczny pasek adresu URL, który pokazuje bieżące pochodzenie, tytuł okna i menu. Zwykle mają one związek z tym, co theme_color znajduje się w Twoim pliku manifestu.
  • Możesz go otworzyć w przeglądarce, korzystając z menu kontekstowego.
  • Użytkownicy mogą zamknąć przeglądarkę lub wrócić do poprzedniej.

Przeglądarka w aplikacji w ramach progresywnej aplikacji internetowej na komputerze podczas przeglądania adresu URL, który jest poza zakresem.

.

Przeglądarka w aplikacji na iPhonie podczas przeglądania adresu URL, który wykracza poza zakres samodzielnej aplikacji PWA.

Przeglądarka w aplikacji na urządzeniu z Androidem podczas przeglądania adresu URL, który wykracza poza zakres samodzielnej aplikacji PWA.

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 wróci do źródła aplikacji PWA, na przykład przy użyciu OAuth 2.0.

W takim przypadku przeglądarka w aplikacji wykonuje te czynności:

  1. Użytkownik otwiera Twoją aplikację PWA i klika „Zaloguj się”.
  2. Aplikacja PWA przekierowuje użytkownika do adresu URL, który wykracza poza jej zakres, tak aby silnik renderujący otworzył w niej przeglądarkę w aplikacji.
  3. Użytkownik może w każdej chwili anulować przeglądarkę w aplikacji i wrócić do aplikacji 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ę po wykryciu adresu URL, który jest częścią progresywnej 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. PWA pobiera token, zapisuje go i renderuje aplikację PWA.

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ć celu _blank elementów <a href>. Działa ona tylko w przypadku aplikacji PWA na komputery. na urządzeniach mobilnych nie ma możliwości otwarcia 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 prowadzić do tego samego elementu start_url, tak jak w przypadku otwierania 2 kart przeglądarki 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 aplikacja PWA z kilkoma oknami otwartych w systemie operacyjnym na komputerze.

Wywołanie open() w oknie aplikacji PWA w systemie iOS lub iPadOS zwraca null i nie otwiera okna. Otwarcie nowych okien na Androidzie powoduje utworzenie nowej przeglądarki w aplikacji dla adresu URL – nawet jeśli URL jest w zakresie aplikacji PWA – co zwykle nie powoduje przeglądania zewnętrznego.

Nazwa okna

Element <title> był używany przede wszystkim do optymalizacji pod kątem SEO, ponieważ przestrzeń na karcie przeglądarki jest ograniczona. Po przejściu z przeglądarki do okna w aplikacji PWA masz dostęp do całego obszaru na pasku 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 PWA na komputery tytuł jest niezbędny i znajduje się na pasku tytułu okna, a czasem także w menedżerze zadań lub obszarze wyboru wielu zadań. Jeśli aplikacja ma jedną stronę, warto aktualizować tytuł przy każdej trasie.

Tryb kart

Dzięki eksperymentalnym warunkom, nazywanym trybem kart, Twoja aplikacja PWA będzie działać w oparciu o karty, podobnie jak w przeglądarce. W takim przypadku użytkownik może mieć otwartych kilka kart z tej samej aplikacji PWA, ale wszystkie są powiązane w tym samym oknie systemu operacyjnego, jak widać w tym 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. ale zawsze jest to ciąg znaków. A gdyby można było zaprojektować pasek tytułu zgodnie z potrzebami, z użyciem kodu HTML, CSS i obrazów? Dlatego skorzystaj z nakładki z elementami sterującymi okna – nowej, eksperymentalnej funkcji PWA w przeglądarce Microsoft Edge i Google Chrome.

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 na pasku tytułu.

Zarządzanie oknami

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

  • Edytorzy grafiki do wielu okien à la Gimp mogą umieszczać różne narzędzia do edycji w odpowiednio 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 do pokazu slajdów mogą wyświetlać notatki prelegenta na wewnętrznym ekranie głównym i prezentację na zewnętrznym projektorze.

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

Pobieram szczegóły ekranu

Interfejs Windows Management API dodaje nową metodę (window.getScreenDetails()), która zwraca obiekt z ekranami w postaci stałej tablicy dołączonych ekranów. Dostępny jest też aktywny obiekt dostępny z poziomu ScreenDetails.currentScreen, który odpowiada bieżącemu obiektowi window.screen.

Zwrócony obiekt uruchamia też zdarzenie screenschange, gdy zmieni się tablica screens. (Nie dzieje się tak, gdy zmieniają się atrybuty poszczególnych ekranów). Poszczególne ekrany, window.screen lub ekran w tablicy screens, również wywołują zdarzenie change po zmianie ich 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 PWA z jednego ekranu na drugi, z obiektu szczegółów ekranu zostanie też uruchomione zdarzenie currentscreenchange.

Blokada wybudzania ekranu

Wyobraź to sobie: jesteś w kuchni zgodnie z przepisem na tablecie. To już koniec przygotowywania składników. Masz ręce w bałaganu. Odwrócisz się do urządzenia, aby przeczytać następny krok. Katastrofa! Ekran zgasł. Interfejs Screen Wake Lock API jest dla Ciebie. Pozwala aplikacji PWA zapobiegać przyciemnianiu, uśpieniu i zablokowaniu ekranu. Dzięki temu 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ą, aby użytkownik mógł pisać, gdy zaznaczone są elementy formularza PWA.

Dzięki interfejsowi VirtualKeyboard API aplikacja PWA może teraz mieć większą kontrolę nad klawiaturą na zgodnych platformach przy użyciu interfejsu navigator.virtualKeyboard. Oto niektóre z nich:

  • 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 do edytowania elementów hosta (za pomocą interfejsu 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.
  • Używanie zmiennych środowiskowych CSS do uzyskiwania informacji o wyglądzie klawiatury wirtualnej, np. keyboard-inset-height i keyboard-inset-top.

Więcej informacji o tym interfejsie znajdziesz w artykule Pełna kontrola w interfejsie VirtualKlawiatura API.

Zasoby