Progresywne aplikacje internetowe na komputer

Progresywne aplikacje internetowe (PWA) na komputery to doskonały sposób na tworzenie aplikacji na różne platformy i przeglądarki. Mają one model zabezpieczeń, który koncentruje się na bezpieczeństwie i prywatności użytkowników, a także wbudowaną funkcję udostępniania dzięki możliwości łączenia z internetem. Twórz nowe lub ulepszaj istniejące aplikacje internetowe za pomocą nowoczesnych interfejsów API, aby zapewnić im funkcje, niezawodność i możliwość instalacji podobne do aplikacji na komputery. PWA to najlepszy sposób na udostępnianie aplikacji internetowej na ChromeOS.

W ChromeOS platforma internetowa jest najważniejsza, a aplikacje internetowe są podstawową funkcją platformy. Zainstalowane PWA są widoczne w programie uruchamiającym ChromeOS, można je przypinać do półki i są ściśle zintegrowane z pozostałą częścią systemu operacyjnego.

Zacznij od sprawdzenia listy kontrolnej PWA i upewnij się, że Twoja aplikacja internetowa spełnia podstawowe wymagania. Możesz użyć narzędzia PWABuilder, aby udostępnić niestandardową stronę offline i umożliwić instalację aplikacji. Następnie skorzystaj z tych rekomendacji, aby Twoja aplikacja PWA działała jak najlepiej w ChromeOS.

Umożliw instalację

Jedną z największych zalet aplikacji PWA w porównaniu ze zwykłymi aplikacjami internetowymi jest możliwość ich instalowania, podobnie jak tradycyjnych aplikacji na komputery. Ścieżka progresywnych aplikacji internetowych na web.dev zawiera sekcję poświęconą umożliwianiu instalacji PWA. Skorzystaj z niej, aby zacząć. Aby aplikacja PWA została uznana za możliwą do zainstalowania w ChromeOS, musi spełniać te kryteria, które można sprawdzić za pomocą audytu instalacji w Lighthouse:

Ikony są ważnym elementem identyfikacji wizualnej Twojej progresywnej aplikacji internetowej, dlatego zadbaj o to, aby były ciekawe i wyjątkowe. Mogą nawet zawierać przezroczystość. Aplikacje PWA mają jeden kod źródłowy, który jest wspólny dla wszystkich platform, dlatego musisz mieć dostępną ikonę z maską. Pamiętaj, aby uwzględnić też zwykłe ikony w przypadku systemów operacyjnych, które nie obsługują ikon z maską.

Po zainstalowaniu progresywnej aplikacji internetowej będzie ona widoczna w ChromeOS, od programu uruchamiającego po półkę. Zainstalowanie PWA otwiera też dostęp do dodatkowych funkcji, które sprawią, że Twoja aplikacja będzie się wyróżniać.

Uwaga dotycząca pracy w trybie offline

Dzięki możliwości zainstalowania aplikacji zyskujesz wiele korzyści związanych z jej wykrywaniem, użytecznością i funkcjonalnością. Umożliwienie instalacji progresywnej aplikacji internetowej nie oznacza, że cała aplikacja musi działać offline. Aby zainstalowana aplikacja internetowa działała jak tradycyjna aplikacja, powinna mieć pewne funkcje offline. Na początek wystarczy podstawowa niestandardowa strona offline. Użytkownicy oczekują, że zainstalowane aplikacje nie będą się zawieszać, gdy zmieni się stan połączenia. Podobnie jak tradycyjna aplikacja nigdy nie wyświetla pustej strony, gdy jest offline, PWA nigdy nie powinna wyświetlać domyślnej strony offline przeglądarki. Niestandardowe strony offline mogą zawierać komunikat informujący użytkownika, że do gry potrzebne jest połączenie, lub umożliwiać mu spędzenie czasu do momentu ponownego połączenia. Zapewnienie użytkownikom niestandardowych wrażeń offline w przypadku stron lub funkcji, które nie są zapisane w pamięci podręcznej i wymagają połączenia, pomaga wypełnić lukę w wrażeniach użytkowników aplikacji.

Podczas zdarzenia install w usłudze Service Worker możesz utworzyć prostą stronę offline, wstępnie zapisując w pamięci podręcznej wybraną stronę do późniejszego użycia i odpowiadając nią, gdy użytkownik jest offline. Zapoznaj się z naszym przykładem niestandardowej strony offline, aby zobaczyć, jak to działa, i dowiedzieć się, jak to wdrożyć.

Jeśli chcesz zapewnić użytkownikom większe możliwości, oprócz interfejsu Cache Storage API możesz użyć funkcji takich jak IndexedDB do przechowywania danych NoSQL w przeglądarce i synchronizacja w tle, aby umożliwić użytkownikom wykonywanie działań w trybie offline i odkładać komunikację z serwerem do czasu, gdy ponownie uzyskają stabilne połączenie. Możesz też wdrożyć wzorce takie jak bezpieczne, długotrwałe sesje, aby utrzymać uwierzytelnienie użytkowników, oraz szkieletowe ekrany, aby szybko informować użytkowników o ładowaniu treści, które w razie potrzeby mogą być zastąpione treściami z pamięci podręcznej lub wskaźnikiem trybu offline.

Spraw, by była dotykalna

Prawie wszystkie urządzenia z ChromeOS obsługują dotyk, a wiele z nich także rysiki. Musisz więc zadbać o to, aby Twoja aplikacja działała bezproblemowo zarówno z tymi metodami wprowadzania danych, jak i z normalną klawiaturą i myszą. Interfejs Pointer Events API został zaprojektowany specjalnie do obsługi takich sytuacji. Niektóre podstawowe zdarzenia związane z wskaźnikiem, których prawdopodobnie nie musisz zmieniać, to np. zdarzenia click. Inne zdarzenia, takie jak mouseup lub touchstart, należy przenieść do ich odpowiedników w zdarzeniach wskaźnika, aby zapewnić ich bezproblemowe działanie na każdym rodzaju wskaźnika. Możesz nawet zarządzać osobno różnymi typami danych wejściowych. W przypadku aplikacji i gier, które w dużym stopniu opierają się na dotykowym wprowadzaniu danych przez użytkownika, przejście na interfejs Pointer Events API będzie miało ogromne znaczenie na urządzeniach z ChromeOS.

Płynne rysowanie w przeglądarce

Jeśli tworzysz aplikację, w której użytkownicy rysują palcami lub rysikami, utrzymanie wystarczająco niskiego opóźnienia między ich działaniem a wynikiem, aby zapewnić płynność, było dotychczas trudne. Podczas tworzenia tego rodzaju aplikacji opartych na interfejsie Canvas API na ChromeOS zalecamy używanie wskazówki desynchronized dla canvas.getContext(), aby zapewnić renderowanie z niskim opóźnieniem. Aby użyć podpowiedzi desynchronized na potrzeby obszaru roboczego, wykonaj te czynności: 

const canvas = document.createElement('canvas'); // or select one from the DOM
const ctx = canvas.getContext('2d', {
  desynchronized: true,
  // Other options here…
});

if (ctx.getContextAttributes().desynchronized) {
  // Low-latency supported! Do something awesome with it.
} else {
  // Low-latency not supported! Fall back to less awesome stuff
}

Uwagi dotyczące projektowania z myślą o obsłudze dotykowej

Podczas projektowania aplikacji internetowych należy wziąć pod uwagę obsługę dotyku i rysika. Interakcje, które możesz uważać za oczywiste, np. najechanie kursorem, nie działają dobrze w przypadku innych metod wprowadzania danych. Oto kilka sprawdzonych metod, o których warto pamiętać podczas projektowania interfejsów dostosowanych do obsługi dotykowej i za pomocą rysika:

  • Nie zakładaj, że dane wejściowe są określone na podstawie rozmiaru ekranu. Zamiast tego używaj wykrywania funkcji, najlepiej w momencie wprowadzania danych, aby określić, jak zareagować. Pamiętaj, że w ChromeOS użytkownicy mogą płynnie przełączać się między myszą, dotykiem i rysikiem w ramach jednej sesji.
  • Upewnij się, że elementy, które użytkownik ma dotknąć, mają minimalny rozmiar docelowy wystarczająco duży, aby nie dotknąć przypadkowo elementów sąsiadujących.
  • Traktuj najechanie kursorem jako ulepszanie progresywne i upewnij się, że interakcję można przeprowadzić w inny sposób za pomocą dotyku i rysika (np. długie naciśnięcie lub kliknięcie).
  • Użytkownicy urządzeń dotykowych oczekują możliwości bezpośredniego wchodzenia w interakcję z elementami na ekranie, np. powiększania mapy za pomocą gestu uszczypnięcia zamiast przycisków powiększania i pomniejszania. Dodanie popularnych gestów dotykowych w odpowiednich miejscach może znacznie zwiększyć intuicyjność aplikacji.

Zadbaj o możliwości

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 wzbogacą aplikacje internetowe. Projekt Chromium Web Capabilities, znany też jako Project Fugu 🐡, ma na celu wprowadzenie nowych, zaawansowanych standardów internetowych, które zachowają to, co sprawia, że internet jest wyjątkowy: bezpieczeństwo zorientowane na użytkownika, łatwość obsługi i kompatybilność z różnymi platformami.

Uwaga: te funkcje są w różnym stopniu zaawansowania – od etapu rozważania po wdrożenie. Mogą być też kierowane tylko na komputery lub urządzenia mobilne, a nie na oba te typy urządzeń. Użytkownicy ChromeOS prawdopodobnie będą otrzymywać funkcje przeznaczone na komputery stacjonarne, gdy tylko staną się dostępne, ale obsługa wielu platform, nawet stabilna obsługa w ChromeOS, może czasami trwać kilka lat.