Zaawansowane aplikacje PWA

Niektóre możliwości PWA są powszechnie znane, np. interfejs API powiadomień, który umożliwia aplikacji internetowej odbieranie i publikowanie powiadomień platformy. Istnieje jednak wiele nowych i nadchodzących funkcji, które pojawią się w internecie, aby wzmocnić Twoje aplikacje. Projekt Chromium Web Capabilities, znany też jako Project Fugu 🐡, ma na celu wprowadzenie nowych, zaawansowanych standardów internetowych przy jednoczesnym zachowaniu tego, co sprawia, że internet jest wyjątkowy: bezpieczeństwa zorientowanego na użytkownika, łatwości obsługi i kompatybilności z różnymi platformami.

Pokonywanie barier w dostępie do aplikacji

Większość tych funkcji ma na celu wypełnienie luki między tradycyjnymi aplikacjami na komputery i urządzenia mobilne a aplikacjami internetowymi. Pierwsze z nich umożliwiają aplikacjom internetowym dostęp do selektorów kontaktów i funkcji udostępniania na platformie, a zainstalowane PWA mogą rejestrować się jako platforma docelowa udostępniania i wyświetlać ikony, żeby wymienić tylko kilka.

Każda funkcja przechodzi rozbudowany proces standaryzacji, aby uzyskać opinie społeczności, które pomogą w kształtowaniu interfejsu API i zapewnią, że jego ostateczna wersja będzie bezpieczna, prywatna i godna zaufania. Nowe możliwości są śledzone w otwartym narzędziu do śledzenia i można je podzielić na 5 kategorii:

WYSŁANE

Dostępne w najnowszej stabilnej wersji Chrome. Można go używać w sposób niezawodny, pod warunkiem że jego użycie jest prawidłowo wykrywane.

W RAMACH EKSPERYMENTU ORIGIN

Dostępny w ramach testowania origin w Chrome, co umożliwia zespołowi Chrome weryfikowanie eksperymentalnych funkcji i interfejsów API w rzeczywistych warunkach użytkowania oraz przekazywanie opinii na temat użyteczności i skuteczności interfejsów API. OT są opcjonalne i umożliwiają testowanie tej funkcji w wersji beta z użytkownikami bez konieczności włączania przez nich specjalnych flag w przeglądarce. Interfejsy API mogą ulec zmianie po zakończeniu testów OT, a testy OT na pewno nie będą dostępne przez pewien czas przed wprowadzeniem interfejsów API, więc nie należy ich traktować jako mechanizmu wcześniejszego udostępniania nowych interfejsów API.

W OKRESIE PRÓBNYM DLA DEWELOPERÓW

Dostępne za flagą w Chrome. Te interfejsy API są w fazie eksperymentalnej i nadal nad nimi pracujemy. Nie są one gotowe do użytku w środowisku produkcyjnym. Istnieje duże prawdopodobieństwo, że zawierają błędy i że interfejsy API ulegną zmianie. Programiści mogą w tym czasie wypróbować eksperymentalne funkcje, ale nie powinni instruować użytkowników, aby włączali flagi w celu korzystania z ich funkcji.

ROZPOCZĘTO

Prace nad nim się rozpoczęły, ale obecnie nie ma dostępnego interfejsu API.

W TRAKCIE ROZPATRYWANIA

Interfejsy API, którymi użytkownicy wyrazili zainteresowanie, ale ich wdrażanie jeszcze się nie rozpoczęło. Jeśli interfejs API nie został jeszcze uruchomiony, oznacz go gwiazdką lub dodaj swoje przypadki użycia do jego zgłoszenia, aby pomóc zespołowi Chromium w określeniu priorytetów.

Ulepszanie progresywnej aplikacji internetowej

Podczas tworzenia progresywnej aplikacji internetowej rozważ wdrożenie tych interfejsów API i najlepszych praktyk, aby znacznie poprawić wrażenia użytkowników. W zależności od ogólnego zastosowania Twoja aplikacja może skorzystać z co najmniej jednego interfejsu API, aby poprawić ogólną wygodę użytkowników. Interfejsy API oznaczone symbolem 🔮 są w fazie testów origin, te oznaczone symbolem 🚩 są w fazie testów dla programistów, a te oznaczone symbolem 📱 są obecnie stabilne na urządzeniach mobilnych i zaczęliśmy wdrażać je na komputerach. Pozostałe wymienione interfejsy API są stabilne (chociaż mogą nie być dostępne na wszystkich platformach). Obejmuje to tylko interfejsy API dostępne w bieżących wersjach stabilnej, beta (oznaczonej symbolem β) i canary (oznaczonej symbolem α) Chrome. Lista będzie regularnie aktualizowana, aby odzwierciedlać publikowane interfejsy API.

Instalacja aplikacji

Jeśli chcesz, aby Twoja aplikacja internetowa była dostępna obok innych zainstalowanych aplikacji, np. na pasku zadań, w programie uruchamiającym, na pulpicie i w przełączniku aplikacji, rozważ wdrożenie tych interfejsów API, aby Twoja progresywna aplikacja internetowa była możliwa do zainstalowania. Opcjonalnie możesz skorzystać z tego ćwiczenia.

  • Plik manifestu aplikacji internetowej – zawiera informacje o aplikacji internetowej dla przeglądarki i systemu operacyjnego, np. nazwę, logo, adres URL, od którego ma się zaczynać aplikacja, i sposób wyświetlania aplikacji internetowej.
  • Service Workers i Cache Storage API – umożliwiają aplikacji internetowej utworzenie serwera proxy i określenie sposobu obsługi pamięci podręcznej przeglądarki. Skrypt service worker, który reaguje na zdarzenie fetch w przeglądarce i może odpowiadać na żądanie pobrania adresu URL startowego określonego w pliku manifestu aplikacji internetowej, gdy jest offline, jest wymagany do możliwości instalacji.
  • Uruchom podczas logowania 🚩β – umożliwia skonfigurowanie automatycznego uruchamiania aplikacji PWA, gdy użytkownik się zaloguje.
  • Skróty do ikon aplikacji – udostępniaj skróty do określonych adresów URL w aplikacji internetowej (np. rozpocznij czat, prześlij zdjęcie itp.) z menu kontekstowego zainstalowanej ikony aplikacji (np. długie naciśnięcie na urządzeniach mobilnych, kliknięcie prawym przyciskiem myszy na komputerach) na obsługiwanych platformach.
  • getInstalledRelatedApps – umożliwia aplikacji internetowej sprawdzenie, czy progresywna aplikacja internetowa, aplikacja na Androida lub aplikacja na Windowsa (UWP) jest już zainstalowana.

Adaptacyjne i dostępne

Jeśli chcesz, aby Twoja aplikacja internetowa była dostępna dla użytkowników korzystających z różnych urządzeń i mających różne potrzeby fizyczne lub psychiczne, rozważ wdrożenie tych rozwiązań:

Zarabianie i dystrybucja

  • Płatności internetowe – elastyczny, standardowy interfejs do płatności online, który ma działać w każdej przeglądarce i na każdym urządzeniu oraz z każdym dostawcą usług płatniczych.
  • Interfejs Digital Goods API 🔮 – elastyczny, standardowy interfejs do wysyłania zapytań i zarządzania zakupami w aplikacji z poziomu aplikacji internetowych, który obsługuje typowe rodzaje zakupów, takie jak zakupy jednorazowe, zakupy powtarzalne (np. klejnoty lub waluta w grze) i subskrypcje. Działa w połączeniu z płatnościami internetowymi.
  • Zaufana aktywność w internecie – utwórz aplikację na Androida dla swojej progresywnej aplikacji internetowej, aby można było ją pobrać z kompatybilnych sklepów, np. Google Play.

Dostęp do schowka

  • Async Clipboard – odczytywanie i zapisywanie tekstu oraz obrazów w schowku użytkownika, a także nasłuchiwanie zdarzeń kopiowania i wklejania.

Powiadomienia

Jeśli Twoja aplikacja internetowa musi powiadamiać użytkowników, np. aplikacja do czatu lub aplikacja do kodowania w tle, możesz wdrożyć te interfejsy API:

  • Internetowe powiadomienia push – gdy użytkownik wyrazi zgodę, umożliwiają aplikacji internetowej wysyłanie do niego powiadomień push.
  • Badging API – umożliwia zainstalowanej aplikacji internetowej ustawienie plakietki w ikonie aplikacji, opcjonalnie z liczbą.
  • Wyzwalacze powiadomień 🔮 – wysyłaj powiadomienia do użytkowników, gdy zostanie spełniony warunek wyzwalający, np. na podstawie czasu lub lokalizacji (np. powiadomienia o wydarzeniach w kalendarzu).

Udostępnianie intencji i obsługa protokołów

  • Rejestracja protokołu URL 🚩α – umożliwia aplikacjom internetowym rejestrowanie się jako moduły obsługi niestandardowych protokołów/schematów URL za pomocą manifestu instalacji.
  • Udostępnianie w internecie – używaj wbudowanego interfejsu udostępniania na obsługiwanych urządzeniach, aby udostępniać adresy URL, tekst i pliki innym zainstalowanym aplikacjom na urządzeniu. Nie musisz instalować aplikacji.
  • Web Share Target – zainstalowana aplikacja PWA jest dostępna w wbudowanym interfejsie udostępniania systemu na obsługiwanych urządzeniach, co umożliwia użytkownikom udostępnianie tekstu i plików w aplikacji z innych aplikacji.

Otwieranie i zapisywanie plików

  • File Handling API 🚩 – zainstalowana aplikacja internetowa może zarejestrować w systemie operacyjnym możliwość obsługi (odczytywania, przesyłania strumieniowego lub edytowania) plików o określonych typach MIME lub rozszerzeniach, dzięki czemu może być na przykład opcją na liście „Otwórz za pomocą…” w menu kontekstowym.
  • File System Access API – niezawodny dostęp do systemu plików użytkownika w ramach sesji, umożliwiający następujące interakcje (w zależności od potrzeb aplikacji):
    • Odczytywanie plików z lokalnego systemu plików – wyświetla selektor plików i umożliwia użytkownikowi wybranie jednego lub wielu plików do otwarcia, w tym ograniczenie dozwolonych typów plików według typu MIME i rozszerzenia.
    • Zapisywanie zmian w otwartym pliku – zapisywanie zmian w pliku otwartym za pomocą FSA bezpośrednio, bez wyświetlania użytkownikowi prośby o wybranie miejsca zapisania pliku lub pobranie kopii.
    • Utwórz nowy plik w lokalnym systemie plików – zezwalaj użytkownikowi na tworzenie nowego pliku, opcjonalnie z domyślnym rozszerzeniem, w lokalnym systemie plików, do którego Twoja aplikacja ma dostęp w celu zapisywania.
    • Ostatnio otwarte pliki – programy obsługi plików utworzone za pomocą interfejsu FSA można przechowywać w IndexedDB, co pozwala wyświetlać listę ostatnio używanych plików między sesjami użytkownika (chociaż uprawnienia do edycji nadal nie są zachowywane między sesjami).
    • Odczytywanie, zapisywanie i manipulowanie katalogiem – umożliwia użytkownikowi wybranie katalogu w lokalnym systemie plików, z którego aplikacja może odczytywać zawartość, tworzyć, odczytywać i usuwać pliki oraz podkatalogi, a także określać względną ścieżkę pliku.
  • Compression Streams – kompresowanie lub dekompresowanie za pomocą algorytmów kompresji gzip i deflate.

Zarządzanie oknami

  • Fullscreen API – umożliwia użytkownikowi wyświetlanie elementu w aplikacji internetowej, np. filmu, na pełnym ekranie.
  • Cross-Screen Window Placement API 🔮 – umożliwia aplikacji internetowej uzyskiwanie informacji o podłączonych wyświetlaczach i pozycjonowanie okien względem tych wyświetlaczy, co pozwala tworzyć aplikacje internetowe z wieloma oknami i wyświetlaczami.
  • Tryb wyświetlania aplikacji w kartach 🚩 – umożliwia wyświetlanie zainstalowanej aplikacji internetowej w jednej lub kilku kartach, a nie tylko w jednym oknie.

Głębsza integracja z systemem operacyjnym

  • Local Fonts API 🔮 – umożliwia aplikacji internetowej wyświetlanie listy lokalnie zainstalowanych czcionek i wysyłanie żądań dostępu do kontenera SFNT niskiego poziomu (zorientowanego na bajty), który zawiera pełne dane czcionki. Dzięki temu aplikacja może renderować lokalnie zainstalowane czcionki w spersonalizowany sposób.
  • Wake Lock – umożliwia aplikacji internetowej zapobieganie przejściu ekranu w stan uśpienia, dzięki czemu może ona wykonywać długotrwałe zadania bez obawy o przerwanie (np.transkodowanie plików lub wyświetlanie przepisu podczas gotowania).
  • Wykrywanie braku aktywności 🔮 – umożliwia aplikacji internetowej wykrywanie, kiedy użytkownik nie korzysta aktywnie z urządzenia.

Rozszerzona obsługa offline

Jeśli chcesz, aby Twoja aplikacja internetowa działała jeszcze lepiej w trybie offline, możesz wdrożyć te interfejsy API:

  • Synchronizacja w tle – gdy jesteś offline, umieszczaj w kolejce żądania wymagające połączenia, a następnie synchronizuj dane aplikacji internetowej w tle, gdy sieć jest dostępna, zamiast w ogóle nie przetwarzać żądań w trybie offline. Na przykład zezwolenie na wysyłanie wiadomości lub synchronizowanie przyrostowych zmian w dokumencie po ponownym połączeniu z internetem.
  • Okresowa synchronizacja w tle – umożliwia okresowe wybudzanie zainstalowanej i często używanej aplikacji internetowej na podstawie minimalnego czasu, który upłynął, i uruchamianie jej, np. w celu zaktualizowania pamięci podręcznej, dzięki czemu zawartość będzie aktualna, gdy użytkownik otworzy aplikację.
  • Content Indexing API – umożliwia aplikacji internetowej informowanie przeglądarki o tym, jakie treści są dostępne offline, aby przeglądarka mogła wyświetlać je użytkownikom.
  • Pobieranie w tle – umożliwia długotrwałe pobieranie w tle, np. pobieranie filmów lub przesyłanie filmów i obrazów, bez ryzyka zamknięcia procesu roboczego usługi.

Strumieniowe przesyłanie, kodowanie i dekodowanie multimediów

Jeśli Twoja aplikacja internetowa odtwarza pliki multimedialne, takie jak pliki wideo lub audio, możesz rozważyć wdrożenie tych interfejsów API:

  • Strumieniowanie adaptacyjne – umożliwia przełączanie strumieni wideo między różnymi szybkościami transmisji bitów w zależności od wydajności sieci.
  • Obraz w obrazie – umożliwia użytkownikowi wyodrębnienie filmu z aplikacji internetowej do okna, które jest zawsze na wierzchu i można je przesuwać oraz zmieniać jego rozmiar.
  • Interfejs Media Session API – umożliwia użytkownikowi sterowanie odtwarzaniem multimediów w aplikacji internetowej za pomocą sprzętu i funkcji oprogramowania na poziomie systemu operacyjnego (takich jak przyciski odtwarzania/pauzy/zatrzymania na klawiaturze lub ekranie blokady), a także sterowanie powiadomieniami o multimediach na poziomie systemu operacyjnego (takimi jak tytuł, wykonawca, album i okładka).
  • Chromecast API – umożliwia użytkownikowi przesyłanie multimediów do dostępnego odbiornika Chromecast, np. odtwarzanie filmu z aplikacji internetowej na telewizorze.
  • Web Codecs 🔮 – dostęp do wbudowanych sprzętowych i programowych koderów i dekoderów multimediów, przydatnych zarówno w zastosowaniach w czasie rzeczywistym, takich jak transmisje na żywo o niskim opóźnieniu i kodowanie, dekodowanie i transkodowanie plików.

Rozszerzona obsługa danych wejściowych

Zaawansowana obsługa urządzeń peryferyjnych

  • Web USB – umożliwia aplikacji internetowej dostęp do niestandardowych urządzeń USB (np.klawiatur i myszy) z poziomu aplikacji.
  • Serial API 🔮 – dodaje interfejs API do komunikacji z urządzeniami sprzętowymi za pomocą fizycznego lub wirtualnego portu szeregowego.

Lista kontrolna dotycząca progresywnych aplikacji internetowych

Chcesz zacząć ulepszać swoją progresywną aplikację internetową za pomocą tych nowych, zaawansowanych interfejsów API? Wybierz jeden z poniższych przypadków użycia, aby zobaczyć zalecany zestaw interfejsów API, lub utwórz własną listę kontrolną i pracuj nad jej ukończeniem.