Ponieważ połączenia internetowe mogą być niestabilne lub nieistniejące, musisz najpierw zastanowić się nad trybem offline: napisz aplikację tak, jakby nie miała połączenia z internetem. Gdy aplikacja zacznie działać w trybie offline, dodaj wszelkie funkcje sieciowe, których potrzebujesz, aby aplikacja mogła robić więcej w trybie online. Czytaj dalej, by poznać wskazówki dotyczące wdrażania aplikacji offline.
Przegląd
Aplikacje Chrome otrzymują bezpłatnie następujące korzyści:
- Pliki Twojej aplikacji – wszystkie skrypty JavaScript, CSS i czcionki oraz inne potrzebne zasoby (np. obrazy) – są już pobrane.
- Aplikacja może zapisywać i opcjonalnie synchronizować małe ilości danych przy użyciu interfejsu Chrome Storage API.
- Aplikacja może wykrywać zmiany w połączeniach, nasłuchując zdarzeń online i offline.
Te umiejętności nie gwarantują jednak, że aplikacja będzie działać w trybie offline. Aplikacja obsługująca tryb offline powinna być zgodna z tymi regułami:
- Jeśli to możliwe, używaj danych lokalnych.
- Jeśli korzystasz z zasobów z internetu, użyj metody
XMLHttpRequest, aby je pobrać, a potem zapisz dane lokalnie. Aby zapisywać dane lokalnie, możesz użyć interfejsów Chrome Storage API, IndexedDB lub Filesystem API. - Oddziel interfejs aplikacji od jej danych.
- Oddzielenie UI od danych nie tylko poprawia wygląd aplikacji i ułatwia korzystanie z aplikacji w trybie offline, ale też umożliwia tworzenie innych widoków danych użytkownika. Platforma MVC pozwala oddzielić interfejs użytkownika od danych.
- Załóżmy, że aplikację można w każdej chwili zamknąć.
- Zapisuj stan aplikacji (zarówno lokalnie, jak i zdalnie, o ile to możliwe), aby użytkownicy mogli kontynuować pracę od momentu, w którym ją przerwieli.
- Przetestuj aplikację dokładnie.
- Upewnij się, że aplikacja działa dobrze zarówno w typowych, jak i trudnych sytuacjach.
Ograniczenia bezpieczeństwa
Aplikacje Chrome mogą umieszczać swoje zasoby w ograniczonym zakresie:
- Dane lokalne są widoczne na komputerze użytkownika i nie mogą być bezpiecznie zaszyfrowane, dlatego dane poufne muszą pozostać na serwerze. Nie przechowuj na przykład haseł ani numerów kart kredytowych.
- Cały JavaScript wykonywany przez aplikację musi znajdować się w jej pakiecie. Nie może być on wbudowany.
Wszystkie style CSS, obrazy i czcionki mogą początkowo znajdować się w pakiecie aplikacji lub pod zdalnym adresem URL. Jeśli zasób jest zdalny, nie możesz określić go w kodzie HTML. Zamiast tego pobierz dane za pomocą atrybutu
XMLHttpRequest(patrz Odsyłanie do zasobów zewnętrznych). Następnie możesz się odwoływać do danych za pomocą adresu URL obiektu blob lub (lepiej jeszcze) zapisać dane, a potem wczytać dane za pomocą Filesystem API.
Możesz jednak wczytywać duże zasoby multimedialne, takie jak filmy i dźwięki, z witryn zewnętrznych. Jedną z przyczyn tego wyjątku od reguły jest to, że elementy <video> i <audio> działają prawidłowo, gdy połączenie aplikacji jest ograniczone lub nie ma go wcale. Innym powodem jest to, że pobieranie i wyświetlanie multimediów za pomocą adresów URL XMLHttpRequest i blob nie pozwala obecnie na strumieniowe przesyłanie danych ani częściowe buforowanie.
Aby udostępnić element iframe w trybie piaskownicy, możesz utworzyć tag <webview>. Jej zawartość może być zdalna, ale nie ma bezpośredniego dostępu do interfejsów API aplikacji Chrome (patrz Umieszczanie zewnętrznych stron internetowych).
Niektóre ograniczenia dotyczące aplikacji Chrome są egzekwowane przez Content Security Policy (CSP). Ta zasada jest zawsze opisana poniżej i nie można jej 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 stanu offline_enabled
Zakładamy, że aplikacja działa dobrze offline. Jeśli tak nie jest, warto o tym poinformować, aby ikona uruchamiania była przyciemniona, gdy użytkownik jest offline. Aby to zrobić, ustaw offline_enabled na false w pliku manifestu aplikacji:
{
"name": "My app",
...
"offline_enabled": false,
...
}
Zapisuję dane lokalnie
W tabeli poniżej znajdziesz dostępne opcje zapisywania danych lokalnie (patrz też Zarządzanie danymi).
| API | Najlepsze wykorzystanie | Uwagi |
|---|---|---|
| Interfejs Chrome Storage API | Małe ilości danych w postaci ciągów znaków | Świetne dla ustawień i stanu. Łatwa synchronizacja zdalna (ale niekoniecznie). Nieodpowiednie w przypadku dużej ilości danych ze względu na limity. |
| Interfejs IndexedDB API | Uporządkowane dane | Umożliwia szybkie wyszukiwanie danych. korzystać z usługi z uprawnieniami do nieograniczonego miejsca na dane, |
| Interfejs Filesystem API | Inne | Udostępnia obszar piaskownicy, w którym możesz przechowywać pliki. korzystać z usługi z uprawnieniami do nieograniczonego miejsca na dane, |
Zdalne zapisywanie danych
Ogólnie to, jak zdalnie zapiszesz dane, zależy od Ciebie, ale mogą Ci w tym pomóc niektóre platformy i interfejsy API (patrz Architektura MVC). Jeśli korzystasz z interfejsu Chrome Storage API, wszystkie możliwe do zsynchronizowania dane są automatycznie synchronizowane za każdym razem, gdy aplikacja jest online, a użytkownik jest zalogowany w Chrome. Jeśli użytkownik nie jest zalogowany, zobaczy prośbę o zalogowanie się. Pamiętaj jednak, że zsynchronizowane dane użytkownika zostaną usunięte, jeśli odinstaluje on Twoją aplikację. {QUESTION: true?}
Rozważ zapisywanie danych użytkowników przez co najmniej 30 dni po odinstalowaniu aplikacji, aby zapewnić im dobre wrażenia po ponownym zainstalowaniu aplikacji.
Oddzielenie interfejsu użytkownika od danych
Platforma MVC ułatwia zaprojektowanie i wdrożenie aplikacji w taki sposób, aby dane były całkowicie oddzielone od widoku danych aplikacji. Listę platform MVC znajdziesz w sekcji Architektura MVC.
Jeśli aplikacja komunikuje się z serwerem niestandardowym, to serwer powinien dostarczać dane, a nie fragmenty kodu HTML. Warto myśleć w kategoriach interfejsów API REST.
Gdy dane są oddzielone od aplikacji, znacznie łatwiej jest udostępniać alternatywne widoki danych. Możesz na przykład udostępnić widok witryny z dowolnymi danymi publicznymi. Widok witryny może być przydatny nie tylko wtedy, gdy użytkownik nie korzysta z Chrome, ale też umożliwiać wyszukiwarkom znajdowanie danych.
Testowanie
Upewnij się, że aplikacja działa prawidłowo w tych sytuacjach:
- Aplikacja zostanie zainstalowana, a następnie natychmiast przejdzie w tryb offline. Innymi słowy, pierwsze użycie aplikacji odbywa się offline.
- Aplikacja jest zainstalowana na jednym komputerze, a następnie synchronizowana z innym.
- Aplikacja zostanie odinstalowana, a następnie natychmiast zainstalowana ponownie.
- Aplikacja działa jednocześnie na 2 komputerach z tym samym profilem. Gdy jeden komputer przejdzie w tryb offline, użytkownik wykona na nim wiele czynności, a komputer ponownie połączy się z siecią.
- Aplikacja ma niestabilne łączność, przez co często przełącza się między trybem online i offline.
Sprawdź też, czy aplikacja nie zapisuje na jego komputerze poufnych danych użytkownika (takich jak hasła).