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

Uwaga: zamiast bezwzględnie przenosić okno i zmieniać jego rozmiar, możesz przesuwać okna i zmieniać ich rozmiar za pomocą elementów moveBy() i resizeBy().

.

Uwaga: na urządzeniach mobilnych przesunięcie lub zmiana rozmiaru okna nie spowoduje żadnych zmian na ekranie.

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.

Uwaga: gdy przeglądarka w aplikacji jest na ekranie, PWA czeka w tle, jakby inne okno ją zasłaniało.

.

W systemach iOS i iPadOS przeglądarka korzysta z SafariViewController – silnika renderowania Safari, który jest wyodrębniony z pamięci aplikacji PWA. Jeśli więc użytkownik ma sesję w Safari, nie pojawi się ona w aplikacji PWA, ale będzie widoczna w przeglądarce w aplikacji.

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

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.

Ostrzeżenie: drugi argument funkcji open() to nazwa okna. Jeśli używana przez Ciebie nazwa jest już otwarta, wyszukiwarka zastąpi otwarte okno tą nazwą nowym panelem nawigacyjnym. Jeśli chcesz zawsze otwierać nowe okno, w nazwie musisz użyć różnych wartości ciągu znaków.

Funkcje open(), moveTo() i resizeTo() nie wymagają prefiksu window. podczas pisania kodu JavaScript, ponieważ window jest obiektem globalnym. Możesz po prostu zadzwonić pod numer moveTo(0, 0). Wywoływanie funkcji window.moveTo(0, 0) ułatwia jednak zrozumienie kodu.

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.

Uwaga: aby ograniczyć phishing w przypadku progresywnych aplikacji internetowych, niektóre przeglądarki na komputerach mogą stosować dodatkowe zabezpieczenia w tytule okna. Jeśli na przykład nie użyjesz w tytule nazwy aplikacji, przeglądarka może dodać prefiks z nazwą Twojej aplikacji PWA. Inne przeglądarki mogą wyrenderować aktualne miejsce początkowe w pasku tytułu przez kilka sekund, gdy zmienisz tytuł, aby zaznaczyć miejsce, do którego przeszedł użytkownik.

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.

Uwaga: w rozdziale poświęconym eksperymentowi dowiesz się, jak zacząć korzystać z funkcji eksperymentalnych.

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.

Uwaga: funkcje w trybie kart i nakładki z elementami sterującymi okna definiują nowe wartości użytkownika display pliku manifestu. Aby zapewnić zgodność ze wszystkimi urządzeniami, w grupie plików manifestu stworzono sposób zastąpienia zastępczego łańcucha display, dzięki czemu możesz określić, jakiej wartości display użyć, gdy pierwsza opcja nie jest dostępna. Więcej informacji na ten temat znajdziesz w artykule Przygotowanie do jutrzejszych trybów wyświetlania.

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

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.

W niektórych przeglądarkach wywołanie window.getScreenDetails() wymaga od użytkownika przyznania uprawnień aplikacjom PWA.

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.

Uwaga: warto też sprawdzić interfejs Presentation API, aby wyświetlać treści z internetu za pomocą dużych urządzeń do prezentacji, takich jak projektory czy telewizory podłączone do sieci.

Obsługa przeglądarek

• 47.
• 79
• x
• x

Źródło

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

• Zarządzanie wieloma wyświetlaczami za pomocą interfejsu Multi-Screen Window Location API
• Tryb aplikacji z kartami w przypadku PWA
• Nie usypiaj dzięki interfejsowi Screen Wake Lock API
• Pełna kontrola dzięki interfejsowi VirtualKlawiatura API
• Dostosowywanie nakładki z elementami sterującymi okna w pasku tytułu aplikacji PWA
• Wyświetlanie treści na pasku tytułu