Najpierw offline

Połączenie z internetem może działać niestabilnie lub wcale, dlatego warto zacząć korzystać z trybu offline: i napisz swoją aplikację tak, jakby nie miała połączenia z internetem. Gdy aplikacja będzie działać offline, dodaj dowolną funkcje sieciowe potrzebne do działania aplikacji w trybie online. Czytaj dalej, aby poznać wskazówki na temat: i wdrożyć aplikację zgodną z trybem offline.

Omówienie

Aplikacje Chrome otrzymują bezpłatne następujące funkcje:

  • Pliki aplikacji – wszystkie pliki JavaScript, CSS i czcionki oraz inne potrzebne zasoby (takie jak (obrazy) – zostały już pobrane.
  • Aplikacja może zapisywać i opcjonalnie synchronizować niewielkie ilości danych przy użyciu interfejsu Chrome Storage API.
  • Aplikacja może wykrywać zmiany w łączności, nasłuchując zdarzeń online i offline.

Nie wystarczają one jednak, aby zagwarantować, że aplikacja będzie działać offline. Tryb offline aplikacja powinna spełniać te zasady:

W miarę możliwości używaj danych lokalnych.
Jeśli korzystasz z zasobów w internecie, użyj aplikacji XMLHttpRequest, aby ją pobrać, a następnie zapisz dane lokalnie. Aby zapisać dane lokalnie, możesz użyć interfejsu Chrome Storage API, IndexedDB lub Filesystem API.
Oddziel interfejs aplikacji od danych.
Oddzielenie interfejsu od danych nie tylko poprawi wygląd aplikacji i ułatwia jej włączenie w trybie offline, ale umożliwia też udostępnianie innych widoków danych użytkownika. Może pomóc platforma MVC dzięki czemu interfejs użytkownika i dane są oddzielone.
Załóżmy, że w każdej chwili można zamknąć aplikację.
Zapisuj stan aplikacji (zarówno lokalnie, jak i zdalnie, jeśli to możliwe), aby użytkownicy mogli ją uruchamiać z dowolnego miejsca którą przerwali.
Dokładnie przetestuj aplikację.
Upewnij się, że aplikacja działa dobrze zarówno w typowych, jak i niebezpiecznych sytuacjach.

Ograniczenia w zakresie bezpieczeństwa

Aplikacje Chrome mają ograniczoną liczbę miejsc, w których mogą umieścić swoje zasoby:

  • Ponieważ dane lokalne są widoczne na komputerze użytkownika i nie można ich bezpiecznie szyfrować, poufne dane dane muszą pozostać na serwerze. Nie zapisuj na przykład haseł ani numerów kart kredytowych.
  • Cały JavaScript, który wykonuje aplikacja, musi znajdować się w pakiecie aplikacji. Nie może być w tekście.
  • Wszystkie style CSS, obrazy i czcionki możesz początkowo umieścić w pakiecie aplikacji. lub w zdalnym adresie URL. Jeśli zasób jest zdalny, nie możesz go określić w kodzie HTML. Zamiast tego pobierz za pomocą XMLHttpRequest (patrz Odwoływanie się do zasobów zewnętrznych). Następnie zapoznaj się z za pomocą adresu URL obiektu blob lub (jeszcze lepiej) zapisać i wczytać dane za pomocą interfejsu Filesystem API.

Możesz jednak wczytywać duże zasoby multimedialne, takie jak filmy i dźwięki, z witryn zewnętrznych. Jeden przyczyną tego wyjątku od reguły jest to, że elementy <video> i <audio> mają dobre kreacje zastępcze działania, gdy aplikacja ma ograniczone połączenie lub nie ma go wcale. Innym powodem, dla którego pobieranie i udostępnianie multimedia z adresami URL obiektów XMLHttpRequest i blob nie umożliwiają obecnie strumieniowania ani częściowego buforowania.

Aby udostępnić element iframe w trybie piaskownicy, możesz utworzyć tag <webview>. Jego zawartość może być odległa, ale nie ma bezpośredniego dostępu do interfejsów API aplikacji Chrome (zobacz Umieszczanie zewnętrznych stron internetowych).

Niektóre ograniczenia dotyczące aplikacji Chrome są egzekwowane przez politykę bezpieczeństwa treści (CSP), która jest zawsze następujący i nie można go zmienić w przypadku Aplikacji Chrome:

default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' blob: data: filesystem: 'unsafe-inline';
img-src 'self' blob: data: filesystem:;
frame-src 'self' blob: data: filesystem:;
font-src 'self' blob: data: filesystem:;
media-src * data: blob: filesystem:;

Określanie offline_enabled

Zakładamy, że aplikacja działa prawidłowo offline. Jeśli nie, należy to zareklamować, że ikona uruchamiania jest przyciemniona, gdy użytkownik jest offline. Aby to zrobić, ustaw offline_enabled na false w pliku manifestu aplikacji:

{
  "name": "My app",
  ...
  "offline_enabled": false,
  ...
}

Zapisywanie danych lokalnie

W tabeli poniżej znajdziesz opcje lokalnego zapisywania danych (zobacz też Zarządzanie danymi).

Interfejs APINajlepsze wykorzystanieUwagi
Interfejs Chrome Storage APINiewielkie ilości danych w postaci ciągów znakówŚwietnie sprawdza się w przypadku ustawień i stanów. Łatwa synchronizacja zdalna (ale niewymagana). Nie sprawdza się w przypadku większych ilości danych ze względu na limity.
Interfejs API IndexedDBUporządkowane daneUmożliwia szybkie wyszukiwanie danych. Korzystaj z uprawnieniem UnlimitedStorage.
Interfejs API systemu plikówInneUdostępnia obszar piaskownicy, w którym możesz przechowywać pliki. Korzystaj z uprawnieniem UnlimitedStorage.

Zdalne zapisywanie danych

Ogólnie rzecz biorąc, sposób zdalnego zapisywania danych zależy od Ciebie, ale mogą pomóc w tym niektóre platformy i interfejsy API (patrz MVC) Architektura). Jeśli korzystasz z interfejsu Chrome Storage API, wszystkie synchronizowane dane są automatycznie synchronizowane, gdy aplikacja jest online, a użytkownik jest zalogowany w Chrome. Jeśli użytkownik nie jest zalogowany, zostanie poproszony o zalogowanie się. Pamiętaj jednak, że zsynchronizowane dane użytkownika zostaną usunięte, jeśli odinstaluje aplikację. {QUESTION: true?}

Zastanów się nad zapisaniem zmian w przypadku użytkowników przez co najmniej 30 dni od odinstalowania aplikacji. Dzięki temu użytkownicy zapewnić pozytywne wrażenia użytkownikom, którzy ponownie zainstalują aplikację.

Oddzielenie interfejsu użytkownika od danych

Użycie platformy MVC ułatwia zaprojektowanie i wdrożenie aplikacji, tak aby dane były całkowicie niezależnie od widoku danych w aplikacji. Listę platform MVC znajdziesz w artykule Architektura VMC.

Jeśli aplikacja komunikuje się z serwerem niestandardowym, serwer powinien przekazywać Ci dane, a nie fragmenty kodu HTML. Zastanów się związanych z interfejsami API typu REST.

Gdy dane będą oddzielone od aplikacji, znacznie łatwiej będzie je wyświetlać ich alternatywne widoki. Możesz na przykład udostępnić widok witryny dla dowolnych danych publicznych. Wyświetlenie witryny można nie tylko przydatne, gdy użytkownik nie ma dostępu do Chrome, ale może umożliwić wyszukiwarkom znajdowanie danych.

Testowanie

Upewnij się, że aplikacja działa dobrze w tych sytuacjach:

  • Aplikacja zostanie zainstalowana i od razu przejdzie w tryb offline. Inaczej mówiąc, przy pierwszym użyciu aplikacji Użytkownik jest w trybie offline.
  • Aplikacja jest zainstalowana na jednym komputerze i synchronizowana z innym.
  • Aplikacja zostanie odinstalowana, a następnie natychmiast zainstalowana ponownie.
  • Aplikacja działa na 2 komputerach jednocześnie i z tym samym profilem. Aplikacja musi działać Jeśli jeden komputer przestaje działać w trybie offline, użytkownik robi na nim wiele rzeczy, komputer odzyska połączenie z siecią.
  • Aplikacja ma niestabilne połączenie z siecią, która często przełącza się między trybem online i offline.

Upewnij się też, że aplikacja nie zapisuje żadnych poufnych danych użytkownika (takich jak hasła) na na komputerze.