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 API | Najlepsze wykorzystanie | Uwagi |
|---|---|---|
| Interfejs Chrome Storage API | Niewielkie 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 IndexedDB | Uporządkowane dane | Umożliwia szybkie wyszukiwanie danych. Korzystaj z uprawnieniem UnlimitedStorage. |
| Interfejs API systemu plików | Inne | Udostę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.