Zarządzanie oknami

PWA poza przeglądarką zarządza własnym oknem. Dowiedz się więcej o interfejsach API i możliwościach zarządzania oknem w systemie operacyjnym.

Aplikacja działająca w oknie własnym, zarządzanym przez PWA, ma wszystkie zalety i obowiązki zwykłego okna w tym systemie operacyjnym, takie jak:

• możliwość przenoszenia okna i zmiany jego rozmiaru w systemach operacyjnych z wieloma oknami, takich jak Windows czy ChromeOS;
• udostępnianie ekranu innym oknom aplikacji, tak jak w trybie podzielonego ekranu na iPadzie lub Androidzie;
• wyświetlanie się na komputerach w docku, na pasku aplikacji i w menu Alt+Tab oraz na urządzeniach mobilnych w listach okien wielozadaniowości;
• możliwość zminimalizowania okna i przeniesienia go na inny ekran lub pulpit oraz zamknięcia go w dowolnym momencie.

Przenoszenie okna i zmienianie jego rozmiaru

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, PWA 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, a przeglądarka zapamięta ostatnie ustawienie. Gdy użytkownik otworzy aplikację ponownie, okno będzie mieć taki sam rozmiar i położenie jak podczas poprzedniego użycia.

Nie ma możliwości określenia preferowanego rozmiaru i położenia aplikacji PWA w manifeście. Położenie i rozmiar okna możesz zmienić tylko za pomocą interfejsu API JavaScript. W kodzie możesz przesuwać i zmieniać rozmiar okna swojej aplikacji internetowej 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ć zapytanie o pozycję.

Zamiast przesuwać okno i zmieniać jego rozmiary bezwzględnie, możesz je przesuwać względnie i zmieniać rozmiary za pomocą moveBy() i resizeBy().

Przeglądanie innych witryn

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

Gdy otworzysz adres URL, który wykracza poza zakres pliku manifestu, silnik przeglądarki w progresywnej aplikacji internetowej wczyta przeglądarkę w aplikacji w kontekście okna.

Oto niektóre funkcje przeglądarek w aplikacji:

• Wyświetlają się one nad treścią.
• Zawierają one statyczny pasek adresu, na którym widać bieżące źródło, tytuł okna oraz 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ć.

Gdy przeglądarka w aplikacji jest widoczna na ekranie, aplikacja PWA czeka w tle, tak jakby zasłaniało ją inne okno.

Przepływy 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 wraca do źródła PWA, np. w przypadku 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 PWA przekierowuje użytkownika do adresu URL, który wykracza poza zakres PWA, przez co mechanizm renderowania otwiera w aplikacji 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 działania PWA.
6. Silnik przekierowuje główne okno PWA do adresu URL, do którego 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 docelowego <a href>. Ta funkcja działa tylko na komputerach. Na urządzeniach mobilnych nie ma opcji otwierania przeglądarki z adresem URL.

function openBrowser(url) {
    window.open("url", "_blank", "");
}

otwierać nowe okna.

Na komputerach użytkowników mogą otwierać więcej niż jedno okno tej samej aplikacji internetowej. Każde okno ma inną nawigację dla tego samego start_url, tak jakbyś otworzył 2 karty przeglądarki z tym samym adresem URL. W menu w aplikacji internetowej użytkownicy mogą wybrać Plik, a następnie Nowe okno. W kodzie PWA możesz otworzyć nowe okno za pomocą funkcji open().

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

Gdy wywołasz open() w oknie PWA na iOS lub iPadOS, zwraca ona nulli nie otwiera okna. Otwieranie nowych okien na Androidzie powoduje utworzenie nowej przeglądarki w aplikacji dla adresu URL, nawet jeśli adres ten znajduje się w zakresie działania PWA, i zazwyczaj nie powoduje otwierania przeglądarki zewnętrznej.

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 wybranych wielozadaniowych aplikacjach. Jeśli masz aplikację jednostronicową, możesz zaktualizować tytuł na każdej trasie.

Tryb kart

Tryb kart to eksperymentalna funkcja, która umożliwia korzystanie z wersji progresywnej aplikacji internetowej z interfejsem opartym na kartach, podobnym do przeglądarki internetowej. W tym przypadku użytkownik może otworzyć kilka kart w tym samym PWA, ale wszystkie są połączone w tym samym oknie systemu operacyjnego.

Więcej informacji o tej funkcji eksperymentalnej znajdziesz w artykule Tryb aplikacji z kartami w przypadku aplikacji PWA.

Nakładka z elementami sterującymi okna

Wspomniliśmy, że możesz zmienić tytuł okna, określając wartość elementu <title> lub właściwości document.title. Zawsze jest to jednak wartość typu string. Co jeśli moglibyśmy zaprojektować pasek tytułu przy użyciu HTML, CSS i obrazów? Może Ci w tym pomóc okno z kontrolami, eksperymentalna funkcja w Microsoft Edge i Google Chrome na komputery, która jest dostępna w przypadku progresywnych aplikacji internetowych na komputery.

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 chcą wykorzystać całą dostępną przestrzeń na wielu ekranach. Przykład:

• Edytory grafiki z wieloma oknami, takie jak Gimp, mogą umieszczać różne narzędzia do edycji w precyzyjnie ustawionych 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.

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 screen_details wywoła też zdarzenie currentscreenchange.

Blokada wybudzania ekranu

Wyobraź sobie taką sytuację. 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ę na ekranie, 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 API może zapewnić aplikacji PWA większą kontrolę nad klawiaturą na zgodnych platformach.

• Wyświetlanie i ukrywanie klawiatury wirtualnej za pomocą navigator.virtualKeyboard.show()i navigator.virtualKeyboard.hide().
• Poinformuj przeglądarkę, że sam chcesz zamknąć klawiaturę wirtualną, ustawiając wartość navigator.virtualKeyboard.overlaysContent na true.
• Dowiedz się, kiedy klawiatura pojawia się i znika dzięki zdarzeniu geometrychange.
• Ustaw zasadę klawiatury wirtualnej dla elementów hosta edytora, ustawiając wartość contenteditable na auto lub manual za pomocą atrybutu HTML virtualkeyboardpolicy. Zasada pozwala określić, czy klawiatura wirtualna ma być obsługiwana automatycznie przez przeglądarkę (auto) czy przez skrypt (manual).
• Używaj zmiennych środowiskowych CSS, aby uzyskać informacje o wyglądzie wirtualnej klawiatury, takie 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.