Możliwości

Progresywne aplikacje internetowe mogą nie tylko renderować treści na ekranie i łączyć się z usługami internetowymi. Progresywne aplikacje internetowe mogą obsługiwać pliki z systemu plików, korzystać ze schowka systemu, uzyskiwać dostęp do sprzętu podłączonego do urządzenia i wykonywać wiele innych czynności. Każdy interfejs Web API jest dostępny dla Twojej aplikacji PWA, a podczas instalacji aplikacji dostępne są dodatkowe interfejsy API.

Możesz użyć narzędzia What Web Can Do Today, by dowiedzieć się, jakie możliwości daje każda z platform. W przypadku poszczególnych interfejsów API lub funkcji możesz użyć kategorii Can I Use lub tabeli zgodności przeglądarek w MDN.

Zawsze sprawdzaj dostępność funkcji

Pierwsza litera w PWA oznacza progresywne i wynika z koncepcji progresywnego ulepszania i wykrywania funkcji. Nie możesz oczekiwać, że aplikacja będzie działać tak samo na wszystkich urządzeniach. Różnorodność kontekstów i umiejętności na miliardach urządzeń w różnych krajach sprawia, że PWA są doskonałą platformą ze względu na ich postęp.

Oznacza to, że musisz zaprojektować aplikację w warstwach, które mogą być niedostępne na niektórych urządzeniach, i sprawdzić jej dostępność przed użyciem.

Przed skorzystaniem z interfejsu API musisz sprawdzić w języku JavaScript, czy istnieje interfejs API, lub zapytać go, czy usługa jest dostępna na tym konkretnym urządzeniu.

Zaawansowany internet

Internet jest dziś bardzo potężny. Na przykład:

• Możesz stworzyć hiperlokalną aplikację do czatów wideo, korzystając z WebRTC, geolokalizacji i komunikatów push.
• Możesz sprawić, aby aplikację można było zainstalować.
• Do dodawania efektów wideo możesz używać WebAssembly.
• Możesz nawet wprowadzić tę technologię do rzeczywistości wirtualnej, korzystając z WebGL i WebXR.

Chociaż sieć oferuje wiele możliwości, wciąż istnieją luki w danych i tu właśnie wkracza do gry projekt funkcji internetowych. Projekt opisuje grupę interfejsów API, które zwiększają możliwości internetu. Omówiliśmy ten projekt i dowiedzieliśmy się, jak możesz w nim uczestniczyć w rozdziale eksperymentalnym.

Ulepszanie aplikacji PWA

Podzielmy interfejsy API funkcji PWA na 4 grupy:

• Zielony: jeśli jest technicznie możliwe, interfejsy API dostępne w każdej przeglądarce na każdej platformie. Większość z nich jest wysyłana przez wiele lat i jest uznawana za dojrzałą, więc można z nich korzystać bez obaw. Przykładowym interfejsem API z tej grupy jest interfejs API geolokalizacji.
• Jasnozielony: interfejsy API są dostępne tylko w niektórych przeglądarkach. Ze względu na brak obsługi niektórych platform dojrzały one w obrębie obsługiwanej podgrupy przeglądarek, dzięki czemu możesz bez obaw korzystać z ich funkcji. Przykładowy interfejs API z tej grupy to WebUSB.
• Żółty: eksperymentalne interfejsy API. Te interfejsy API nie są jeszcze dopracowane. Są dostępne tylko w niektórych przeglądarkach i w ramach testów lub wersji próbnych. Omówiliśmy niektóre z tych możliwości w rozdziale dotyczącym aplikacji eksperymentalnej.
• Czerwony: grupa interfejsów API, których nie można używać w PWA, a w których plany ich dodania są nadal długoterminowe. Przykładowy interfejs API z tej grupy to geofencing.

Uwaga: niektóre funkcje wymagają zgody użytkownika – w większości przypadków okno uprawnień pojawia się przy pierwszym użyciu. Obecnie możesz poprosić o 1 uprawnienie naraz, ale w przyszłości na niektórych platformach przy użyciu interfejsu Permissions API będzie można poprosić o wiele uprawnień w jednym oknie.

Ekologiczne możliwości

Poniżej znajdziesz listę najważniejszych funkcji, których możesz używać w aplikacji PWA.

Podstawowe informacje

• Lokalne zapisywanie plików w pamięci podręcznej przy użyciu interfejsu Cache API, zgodnie z opisem w rozdziale dotyczącym buforowania.
• Wykonywanie zadań w wątkach przy użyciu narzędzi internetowych, jak opisaliśmy w rozdziałie o zarządzaniu złożonością.
• Zarządzanie żądaniami sieciowymi z wykorzystaniem różnych strategii w skrypcie service worker, jak opisano w rozdziałie o skryptach service worker.
• Obszar roboczy 2D – do renderowania grafiki 2D na ekranie przy użyciu interfejsu Canvas API.
• Wysokiej wydajności kanwy 2D i 3D lub WebGL do renderowania grafiki 3D.
• WebAssembly (WASM) służący do uruchamiania skompilowanego kodu niskiego poziomu pod kątem wydajności.
• Komunikacja w czasie rzeczywistym przy użyciu interfejsu WebRTC API.
• Interfejsy API wydajności witryny, które pozwalają mierzyć i usprawniać działanie aplikacji. Więcej informacji znajdziesz w przewodniku po interfejsie Performance API.
• Przechowywanie danych lokalnie za pomocą IndexedDB i zarządzania miejscem na dane w celu wysyłania zapytań dotyczących limitu miejsca na dane i żądania stałej pamięci masowej, co zostało opisane w rozdziale dotyczącym danych offline.
• Dźwięk niskiego poziomu dzięki interfejsowi Web Audio API.
• Wykrywanie danych na pierwszym planie za pomocą interfejsu API widoczności strony.
• Komunikacja sieciowa przy użyciu interfejsów Fetch API i WebSocket API.

Sprzęt i czujniki

• Geolokalizacja uzyskuje lokalizację użytkownika za pośrednictwem różnych dostawców, takich jak satelita lub Wi-Fi, za pomocą interfejsu API geolokalizacji.
• Kamera i mikrofon odbierają strumienie multimediów z kamer i mikrofonów za pomocą interfejsu Urządzenia multimedialne.
• Czujniki zbierają informacje w czasie rzeczywistym z akcelerometru, żyroskopu, magnetometru i innych urządzeń przy użyciu interfejsu Sensors API lub starszych interfejsów, takich jak DeviceMotionEvent i DeviceOrientationEvent. Aby z nich korzystać w przeglądarce Safari, należy użyć niestandardowego prośby o przyznanie uprawnień.
• Funkcja dotknięcia i wskaźnika uzyskuje dostęp do informacji o wszystkich dotknięciach i kliknięciach za pomocą wskaźnika palcem, myszy, trackpada lub pióra dzięki zdarzeniom wskaźnika i zdarzeniom dotyku.

Uwaga: Safari obsługuje też zdarzenia związane z gestami – niestandardowy interfejs API do wykrywania gestów obracania i ściągania. Należy go używać z rozwagą.

• pady do gier – do odczytywania informacji pochodzących ze standardowych padów do gier i joysticków połączonych z urządzeniem za pomocą interfejsu Gamepad API;
• Uwierzytelnianie biometryczne (np. rozpoznawanie twarzy lub odcisku palca) przy użyciu uwierzytelniania internetowego lub WebAuthn.

Integracja z systemem operacyjnym

• Dzięki interfejsowi Web Speech API synteza mowy i rozpoznawanie głosu wykorzystuje zainstalowane na platformie głosy, aby mówić do użytkownika i rozpoznawać jego wypowiedzi.
• udostępniać treści z PWA innym aplikacjom i miejscom na urządzeniu za pomocą interfejsu Web Share API, co opisaliśmy w rozdziale dotyczącym integracji z systemem operacyjnym.
• Otwórz schowek, aby zapisywać i pobierać jego zawartość w różnych formatach dzięki interfejsowi Clipboard API, jak pokazano w rozdziale dotyczącym integracji z systemem operacyjnym.
• Zarządzaj danymi logowania i hasłami użytkowników za pomocą interfejsu Credential Management API.
• Włącz odtwarzanie filmów w trybie obraz w obrazie w systemie operacyjnym, korzystając z interfejsu obraz w obrazie.
• Renderuj treść na pełnym ekranie dzięki interfejsowi Fullscreen API, jak pokazano w rozdziale na temat systemu Windows.

Uwaga: aplikację PWA można zintegrować z wieloma aplikacjami na danej platformie za pomocą schematów URI i uniwersalnych adresów URL, jak pokazaliśmy w rozdziale OS Integration.

Możliwości jasnozielone

Oto lista najważniejszych funkcji dostępnych w PWA. Pamiętaj jednak, że mogą one nie być dostępne w niektórych przeglądarkach.

Podstawy

• WebGL 2.0 – nowa wersja specyfikacji WebGL zgodna z OpenGL 3.0.
• Kodeki – niskopoziomowy dostęp do poszczególnych klatek strumienia wideo i fragmentów dźwięku. Przydatny w aplikacjach internetowych, które wymagają pełnej kontroli nad sposobem przetwarzania multimediów za pomocą interfejsu Web Codecs API.

Sprzęt i czujniki

• Zaawansowane elementy sterujące aparatem zapewniające dostęp do elementów sterujących przesuwaniem, pochyleniem i powiększaniem oraz interfejsami Media API.
• Bluetooth LE do komunikacji z energooszczędnymi urządzeniami Bluetooth Bluetooth w pobliżu użytkownika za pomocą interfejsu Web Bluetooth API. Więcej informacji znajdziesz w artykule o komunikacji z urządzeniami Bluetooth przez JavaScript.
• Komunikacja Near Field Communication (Komunikacja Near Field Communication – NFC) – do wymiany danych przez NFC za pomocą lekkiego formatu NDEF (NFC), np. tagu NFC lub karty z wykorzystaniem WebNFC API. Więcej informacji znajdziesz w artykule Interakcja z urządzeniami NFC w Chrome na Androida.

• Seryjne urządzenie peryferyjne – umożliwia niskopoziomowy dostęp do urządzeń podłączonych do urządzenia przez port szeregowy, USB lub szeregowy przez Bluetooth, używając interfejsu Web Serial WPI. Kliknij ten link, aby dowiedzieć się, jak odczytywać dane na porcie szeregowym i na nim zapisywać.

• Dostęp urządzenia USB do komunikacji z urządzeniami podłączonymi przez USB WebUSB API. Więcej informacji znajdziesz w artykule o dostępie do urządzeń USB w internecie.

• Urządzenia interfejsu umożliwiają Twojej aplikacji PWA interakcję z dowolnym urządzeniem przygotowanym do interakcji z człowiekiem (nietypowe) przy użyciu interfejsu WebHID API. Zapoznaj się z tym przewodnikiem dotyczącym łączenia się z rzadkimi urządzeniami HID.

Uwaga: Dostęp do urządzeń w internecie zawiera kompleksowy przewodnik, który wyjaśnia, jak różne interfejsy API sprzętowe współpracują ze sobą.

• Oświetlenie otoczenia odczytuje bieżący poziom lub natężenie światła otoczenia wokół urządzenia, a nie tylko interfejs Sensors API.
• Wibracje to funkcja Vibration API, która wysyła użytkownikowi sygnały, gdy coś się dzieje, o ile urządzenie je obsługuje.
• Nagrywanie multimediów umożliwia przechwytywanie danych wygenerowanych przez obiekt MediaStream lub HTMLMediaElement (np. tag <video>) w celu analizy, przetworzenia lub zapisania na dysku dzięki interfejsowi MediaRecorder API.
• Zastosowanie blokady wybudzania do ekranu za pomocą interfejsu Screen Wake Lock API sprawia, że urządzenie nie może przyciemniać ani blokować ekranu, gdy aplikacja PWA musi nadal działać.
• Rzeczywistość wirtualna umożliwia korzystanie w PWA z zestawu słuchawkowego i innych urządzeń dzięki interfejsowi WebXR Device API.
• Rzeczywistość rozszerzoną można uzyskać w PWA na wiele sposobów, np. za pomocą interfejsu WebXR Device API lub aplikacji Safari Quick Look do wyświetlania treści AR.
• Wykrywanie nieaktywnych użytkowników za pomocą interfejsu Ile Detection API.
• Blokada orientacji blokuje orientację pionową lub poziomą, gdy aplikacja PWA jest widoczna na ekranie. Wykorzystuje do tego interfejs Screen Orientation API lub właściwość orientation w pliku manifestu aplikacji internetowych w przypadku zainstalowanych aplikacji.
• Prezentowanie treści na projektorach i dodatkowych wyświetlaczach dzięki interfejsowi Presentation API.
• Zablokuj wskaźnik, aby otrzymywać informacje o ruchu delta od wskaźników (myszy, trackpadów i wskaźników) zamiast wartości pozycji (jest to przydatne w niektórych grach) dzięki interfejsowi Pointer Lock API.

Integracja z systemem operacyjnym

• Odczytywanie i zapisywanie plików na urządzeniu dzięki interfejsowi File System Access API, jak opisano w rozdziale OS Integration (Integracja z systemem operacyjnym).
• Pobieraj treści z innych aplikacji dzięki Celowi udostępniania w internecie, jak pokazano w rozdziale Integracja z systemem operacyjnym.
• Pobierz dane kontaktów, używając interfejsu Contact Picker API, jak pokazano w rozdziale Integracja z systemem operacyjnym.
• synchronizować w tle, gdy aplikacja PWA nie jest używana, dzięki interfejsowi Background Synchronization API;
• Harmonogram zadań, gdy aplikacja PWA nie jest używana dzięki interfejsowi Web Periodic Background Synchronization API.
• Wysyłanie powiadomień przy użyciu interfejsów Web Push i Web Notification API.
• Przenoś pliki w tle, gdy użytkownik nie korzysta z PWA, dzięki interfejsowi Background Fetch API.
• Zintegruj odtwarzanie multimediów z systemem operacyjnym za pomocą interfejsu Media Session API.
• zarządzać płatnościami w aplikacji PWA dzięki interfejsowi Payment Request API; Oprócz Payment Request API firma Apple oferuje też bibliotekę Apple Pay JS.
• Zapytanie o stan sieci, na przykład typ połączenia (4G, Wi-Fi) i flaga zapisywania danych, przy użyciu interfejsu Network Information API.
• Przechwytuj ekran użytkownika na potrzeby prezentowania ekranu lub udostępniania ekranu za pomocą interfejsu Screen Capture API.
• Wykrywaj kształty za pomocą funkcji wykrywania z akceleracją sprzętową na urządzeniu, w tym kodów kreskowych (w tym przypadku ludzkie twarze i rozpoznawanie tekstu OCR) za pomocą interfejsu Character Detection API.
• Zapytanie o pamięć urządzenia przy użyciu interfejsu pamięci urządzenia.
• Hasła jednorazowe przez SMS-y pozwalają automatycznie otrzymywać kod SMS-em wysłany z Twojego serwera przy użyciu interfejsu WebOTP API. Safari implementuje podzbiór rozwiązań na podstawie elementu <input>. Więcej informacji na ten temat znajdziesz na blogu WebKit.
• Zarządzaj klawiaturą wirtualną wyświetlaną na ekranach urządzeń mobilnych, korzystając z interfejsu Virtual Keyboard API.

Uwaga: jeśli opublikujesz PWA w niektórych katalogach i sklepach aplikacji, możesz uzyskać dostęp do dodatkowych interfejsów API. Jeśli na przykład publikujesz aplikację PWA w Google Play, korzystając z zaufanej aktywności w internecie, możesz użyć interfejsu Digital Goods API, aby obciążyć użytkowników za subskrypcje i treści płatne.

Jeśli masz uzasadniony przypadek użycia, którego nie można zrealizować przy użyciu obecnego zestawu interfejsów API, możesz przesłać prośbę o analizę przypadku użycia dla potencjalnego przyszłego interfejsu API, jak zobaczymy w rozdziale eksperymentalnym.

Zasoby

• Prezentacja interfejsu Project Fugu API
• Projekt Fugu
• MDN: internetowe interfejsy API
• Co potrafi internet?
• Jakie możliwości może obecnie PWA
• Czy mogę używać
• iOS/iPadOS – przybliżona lokalizacja
• Poznaj Face ID i Touch ID w internecie