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 trybie podzielonego ekranu w iPadOS lub w Androidzie;
• wyświetlanie się na docku, pasku aplikacji i w menu Alt+Tab na komputerze oraz na listach okien wielozadaniowości na urządzeniach mobilnych;
• możliwość zwijania okna, przenoszenia go między ekranami i pulpitemi oraz zamykania w dowolnym momencie;

Przenoszenie i zmiana rozmiaru okna

Okno PWA może mieć dowolny rozmiar i można je umieścić w dowolnym miejscu na ekranie w systemach operacyjnych na komputery. 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 przesuwać okno i zmieniać jego rozmiar. Przeglądarka zapamięta ostatnie ustawienie, więc gdy użytkownik otworzy aplikację ponownie, okno będzie mieć taki sam rozmiar i położenie jak poprzednio.

Nie można określić preferowanego rozmiaru i pozycji 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 wczytuje 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ę.

Uwaga: zamiast przesuwać okno i zmieniać jego rozmiary bezwzględnie, możesz je przesuwać i zmieniać rozmiary względnie, używając moveBy() i resizeBy().

Uwaga: na urządzeniach mobilnych przenoszenie okna lub zmiana jego rozmiaru nie powoduje żadnych zmian na ekranie.

Przechodzenie do innych witryn

Jeśli chcesz przekierować użytkownika do witryny zewnętrznej, która nie jest objęta zakresem 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 aplikację.

Oto niektóre funkcje przeglądarek w aplikacji:

• Wyświetlają się one nad treścią.
• 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ć.

Uwaga: gdy przeglądarka w aplikacji jest otwarta na ekranie, aplikacja PWA jest gotowa do działania w tle, tak jakby inne okno ją zasłaniało.

Na iOS i iPadOS przeglądarka w aplikacji korzysta z elementu SafariViewController, czyli mechanizmu renderowania Safari odizolowanego od pamięci PWA. Dlatego jeśli użytkownik ma sesję w Safari, nie pojawi się ona w Twojej aplikacji internetowej, ale w przeglądarce w aplikacji.

Procesy autoryzacji

Wiele procesów uwierzytelniania i autoryzacji w internecie wymaga przekierowania użytkownika do innego adresu URL w innej domenie, aby uzyskać token, który zostanie zwrócony do źródła PWA, np. za pomocą 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ł w niej przeglądarkę.
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. Silnik przekierowuje główne okno PWA do adresu URL, do którego przeszedł serwer uwierzytelniania w ramach przeglądarki 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 internetowych na komputery. Na urządzeniach mobilnych nie można otworzyć przeglądarki za pomocą adresu 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 internetowej. 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 w aplikacji PWA użytkownicy mogą wybrać Plik → Nowe okno, a w kodzie aplikacji PWA możesz otworzyć nowe okno za pomocą funkcji open(). Szczegóły znajdziesz w dokumentacji.

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

Wywołanie open() w oknie PWA na 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) i zwykle nie powoduje uruchamiania zewnętrznej przeglądarki.

Ostrzeżenie: drugi argument funkcji open() to nazwa okna. Jeśli nazwa, której użyłeś/użyłaś, jest już otwarta, silnik zastąpi otwarte okno nową nawigacją. Jeśli chcesz, aby okno otwierało się zawsze, musisz użyć różnych ciągów znaków jako nazwy.

Funkcje open(), moveTo() i resizeTo() nie wymagają prefiksu window. podczas pisania kodu JavaScript, ponieważ window jest obiektem globalnym. Wystarczy, że zadzwonisz pod numer moveTo(0, 0). Jednak wywołanie window.moveTo(0, 0) ułatwia zrozumienie kodu.

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.

Treść paska tytułu możesz zdefiniować na 3 sposoby:

• Statycznie w elemencie HTML <title>.
• dynamicznie zmieniać w dowolnym momencie właściwość ciągu znaków document.title;

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.

Uwaga: aby ograniczyć ryzyko wyłudzenia danych w PWA, niektóre przeglądarki na komputery mogą stosować dodatkowe środki ochrony w tytule okna. Jeśli na przykład nie użyjesz nazwy aplikacji w tytule, przeglądarka może dodać prefiks z nazwą PWA. Inne przeglądarki mogą przez kilka sekund wyświetlać bieżące źródło w pasku tytułu, gdy zmienisz tytuł, aby podkreślić, dokąd użytkownik się przeszedł.

Tryb kart

Funkcja eksperymentalna, zwana trybem kart, pozwoli Twojej aplikacji internetowej na korzystanie z interfejsu opartego na kartach, podobnego 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 o tej funkcji eksperymentalnej znajdziesz w artykule Tryb aplikacji z kartami w przypadku aplikacji PWA.

Uwaga: w dziale Eksperymentalne znajdziesz informacje o tym, jak zacząć korzystać z funkcji eksperymentalnych.

Nakładka z elementami sterującymi okna

Wspomniliśmy, że możesz zmienić tytuł okna, 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 eksperymentalna funkcja w Microsoft Edge i Google Chrome na komputery.

Uwaga: funkcje nakładki trybu kart i sterowania oknem definiują nowe wartości elementu display w pliku manifestu. Aby zapewnić zgodność ze wszystkimi urządzeniami, grupa manifestu stworzyła sposób zastąpienia łańcucha zapasowego display, dzięki czemu możesz określić, jakiej wartości display użyć, jeśli pierwsza opcja jest niedostępna. Więcej informacji znajdziesz w artykule Przygotowanie się na wyświetlanie reklam w przyszłości.

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

Zarządzanie oknami

Użytkownicy będą chcieli 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 biura transakcyjne mogą wyświetlać trendy rynkowe w wielu oknach, z których każde można wyświetlić 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 umożliwia PWA wykonywanie tych czynności 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.

W niektórychś przeglądarek wywołanie window.getScreenDetails() wymaga od użytkownika udzielenia uprawnień do obsługiwanych w tle aplikacji.

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.

Uwaga: możesz też sprawdzić Presentation API, aby wyświetlać treści internetowe na dużych urządzeniach do prezentacji, takich jak projektory i telewizory podłączone do sieci.

Browser Support

• 47
• 79
• x
• x

Source

Blokada wybudzania ekranu

Wyobraź sobie, że jesteś w kuchni i gotujesz według przepisu na tablecie. Właśnie skończyłaś przygotowywać składniki. Twoje ręce są brudne, więc wracasz do urządzenia, aby przeczytać kolejny krok. Katastrofa! Ekran jest czarny. Interfejs API blokady uśpienia ekranu umożliwia aplikacji internetowej zapobieganie przyciemnianiu, usypianiu i blokowaniu ekranu, dzięki czemu użytkownicy mogą bez obaw uruchamiać, zatrzymywać i zamykać aplikację oraz do niej wracać.

// 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 interfejs API VirtualKeyboard umożliwia teraz większą kontrolę nad klawiaturą na zgodnych platformach, w tym:

• wyświetlanie i ukrywanie klawiatury wirtualnej za pomocą funkcji navigator.virtualKeyboard.show() i navigator.virtualKeyboard.hide().
• Informowanie przeglądarki, że samodzielnie zamykasz klawiaturę wirtualną, przez ustawienie wartości navigator.virtualKeyboard.overlaysContent na true.
• Wiedzieć, kiedy klawiatura pojawia się i znika za pomocą zdarzenia geometrychange w komponencie 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ę za pomocą wartości auto, czy przez skrypt za pomocą 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

• Zarządzanie kilkoma wyświetlaczami za pomocą interfejsu Window Management API
• MDN: interfejs Window Management API
• Tryb aplikacji z kartami w przypadku aplikacji PWA
• Utrzymywanie ekranu w stanie czuwania za pomocą interfejsu 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