Miejsce na dane w internecie

Dane można przechowywać w przeglądarce na wiele różnych sposobów. Która opcja najlepiej odpowiada Twoim potrzebom?

Pete LePage

Gdy jesteś w podróży, połączenie internetowe może nie działać lub niestabilne. Dlatego właśnie obsługą offline i niezawodną wydajnością to typowe funkcje progresywne aplikacje internetowe. Nawet idealnie bezprzewodowe przemyślane wykorzystanie buforowania i inne techniki mogą znacząco poprawić wrażenia użytkownika. Istnieje kilka sposobów zapisywania w pamięci podręcznej statyczne zasoby aplikacji (HTML, JavaScript, CSS, obrazy itp.) oraz (dane użytkowników, artykuły z wiadomościami itp.). Ale które rozwiązanie jest najlepsze? Jak ile można przechowywać? Jak zapobiegasz jego usunięciu?

Czego należy użyć?

Oto ogólna rekomendacja dotycząca przechowywania zasobów:

• Aby wyświetlić zasoby sieciowe niezbędne do wczytania aplikacji i treści opartych na plikach, użyj interfejsu Cache Storage API (część skrypty service worker).
• Aby zobaczyć inne dane, użyj bazy danych IndexedDB (z parametrem obietnicę).

Technologie IndexedDB i Cache Storage API są obsługiwane przez każdą nowoczesną przeglądarkę. Są one asynchroniczne i nie będą blokować wątku głównego. Są są dostępne z obiektu window, instancji roboczych i skryptów service worker, możesz je łatwo zastosować w dowolnym miejscu w kodzie.

Co z innymi mechanizmami przechowywania danych?

Przeglądarka oferuje kilka innych mechanizmów przechowywania danych, ale są ograniczone i mogą powodować poważne problemy z wydajnością.

Parametr SessionStorage jest ograniczony do karty i zakresu od początku śledzenia. Może być przydatna przy przechowywaniu niewielkich ilości sesji konkretnych informacji, na przykład klucza IndexedDB. Powinien być używany z , ponieważ jest to proces synchroniczny i blokuje wątek główny. Jest jest ograniczony do około 5 MB i może zawierać tylko ciągi tekstowe. Zależy od karty, nie jest dostępna dla procesów internetowych ani service worker.

Należy unikać pamięci LocalStorage, ponieważ jest synchroniczna. i zablokuje wątek główny. Jego rozmiar jest ograniczony do około 5 MB i może zawierać tylko ciągi tekstowe. Pamięć lokalna jest niedostępna dla instancji roboczych lub usługi internetowej pracowników.

Pliki cookie mają swoje zastosowanie, ale nie powinny być używane do przechowywania danych. Pliki cookie są wysyłane z każdym żądaniem HTTP, więc w przechowywaniu danych poza mała ilość danych znacznie zwiększa rozmiar każdego żądania sieciowego. Są synchroniczne i nie są dostępne dla instancji roboczych. Polub LocalStorage i SessionStorage, pliki cookie są ograniczone tylko do ciągów znaków.

Interfejs File System API i interfejs FileWriter API udostępniają metody odczyt i zapis plików w systemie plików piaskownicy. Chociaż jest asynchroniczny, nie jest zalecana, ponieważ jest dostępne tylko w przeglądarkach opartych na Chromium.

Interfejs File System Access API powstał, użytkownicy mogą łatwo odczytywać i edytować pliki w lokalnym systemie plików. Użytkownik musi przyznać uprawnienia, aby strona mogła odczytać lub zapisać dowolny plik lokalny; uprawnienia nie są zachowywane między sesjami.

Nie należy używać bazy danych WebSQL i należy ją przenieść do IndexedDB. Pomoc została wycofana z prawie wszystkich głównych przeglądarki. W 2010 r. organizacja W3C przestała utrzymywać specyfikację Web SQL, nie planując dalszych aktualizacji.

Nie należy używać pamięci podręcznej aplikacji. Obecne wykorzystanie powinno być do mechanizmów Service Worker i do interfejsu Cache API. To było wycofane, a ich obsługa zostanie usunięta przyszłości.

Ile mogę przechowywać?

Krótko mówiąc, dużo, przynajmniej kilkaset megabajtów, o wielkości setek gigabajtów lub więcej. Implementacje przeglądarek są różne, ale dostępnego miejsca zależy zwykle od ilości miejsca dostępnego w urządzenia.

• Chrome umożliwia przeglądarce wykorzystanie do 80% całego miejsca na dysku. Źródło może wykorzystywać do 60% całego miejsca na dysku. Interfejsu StorageManagera API do określania maksymalnego dostępnego limitu. Inne oparte na Chromium przeglądarki mogą być inne.
  • W trybie incognito Chrome zmniejsza ilość miejsca na dane, które może wykorzystać źródło do około 5% łącznej pamięci na dysku.
  • Jeśli użytkownik włączył opcję „Wyczyść pliki cookie i dane witryn po zamknięciu wszystkich” Windows” limit miejsca na dane w Chrome jest znacznie zmniejszony maksymalnie około 300 MB.
  • Zobacz PR #3896: na temat implementacji Chrome.
• Internet Explorer w wersji 10 i nowszych może przechowywać do 250 MB danych i generuje po wykorzystaniu więcej niż 10 MB.
• Firefox umożliwia przeglądarce wykorzystanie do 50% wolnego miejsca na dysku. An eTLD+1 (np. example.com, www.example.com i foo.bar.example.com) może zajmować do 2 GB. Za pomocą StorageManager API w celu określenia, ile zostało jeszcze miejsca. i dostępności informacji.
• Safari (zarówno na komputerze, jak i urządzeniach mobilnych) zajmuje około 1 GB. Kiedy limit jeśli zostanie osiągnięty, Safari poprosi użytkownika o zwiększenie limitu o 200 MB. przyrostów. Nie udało mi się znaleźć żadnych oficjalnych dokumentów na ten temat.
  • Jeśli do ekranu głównego w przeglądarce mobilnej Safari zostanie dodana aplikacja PWA, będzie ona wyglądać tak: utworzysz nowy kontener na dane, nic nie będzie udostępniane między progresywną aplikacją internetową oraz Safari na komórki. Po osiągnięciu limitu zainstalowanej aplikacji PWA prawdopodobnie nie jest sposobem na wysłanie prośby o dodatkowe miejsce na dane.

Jeśli w przeszłości witryna przekroczyła określony próg przechowywanych danych, wyświetli prośbę o przyznanie uprawnień dostępu do większej ilości danych. Dla: Jeśli na przykład źródło używało ponad 50 MB miejsca, przeglądarka zapyta użytkownika na przechowywanie do 100 MB, a potem powtórz zapytanie, co 50 MB.

Obecnie większość nowoczesnych przeglądarek nie wyświetla użytkownikowi pytania i zezwala na aby wykorzystać cały przydzielony limit. Wyjątkiem jest Safari, wyświetla monity o przekroczeniu limitu miejsca na dane z prośbą o pozwolenie na jego zwiększenie w ramach przydzielonego limitu. Jeśli punkt początkowy próbuje wykorzystać więcej niż przydzielony limit, kolejne próby zapisu danych nie powiedzie się.

Jak sprawdzić dostępne miejsce?

W wielu przeglądarkach możesz używać elementu StorageManager API do określania ilości miejsca na dane. dostępnych dla punktu początkowego i ilości wykorzystywanego przez nie miejsca na dane. Podaje on łączną liczbę liczby bajtów używanych przez IndexedDB i interfejs Cache API oraz umożliwia aby obliczyć przybliżoną pozostałą ilość dostępnego miejsca.

if (navigator.storage && navigator.storage.estimate) {
  const quota = await navigator.storage.estimate();
  // quota.usage -> Number of bytes used.
  // quota.quota -> Maximum number of bytes available.
  const percentageUsed = (quota.usage / quota.quota) * 100;
  console.log(`You've used ${percentageUsed}% of the available storage.`);
  const remaining = quota.quota - quota.usage;
  console.log(`You can write up to ${remaining} more bytes.`);
}

Obiekt StorageManager nie został jeszcze implemented we wszystkich przeglądarkach, musi wykryć go przed użyciem. Nawet jeśli jest on dostępny, nadal wykrywaj błędy dotyczące przekroczenia limitu (patrz poniżej). W niektórych przypadkach możliwe jest, w celu przekroczenia rzeczywistej ilości dostępnego miejsca.

Uwaga: inne przeglądarki oparte na Chromium mogą uwzględniać ilość wolnego miejsca podczas zgłaszania dostępnego limitu. Chrome nie tego nie robi i zawsze będzie zgłaszać 60% rzeczywistego miejsca na dysku. Pomaga to ograniczyć możliwość określania rozmiaru przechowywanych zasobów z różnych domen.

Zbadaj

W trakcie programowania możesz użyć Narzędzi deweloperskich w przeglądarce, aby sprawdzić różne typy pamięci masowej i łatwo wyczyścić wszystkie zapisane dane.

W Chrome 88 dodaliśmy nową funkcję, która umożliwia zastępowanie miejsca dostępnego na stronie w okienku Cloud Storage. Ta funkcja umożliwia symulowanie różnych urządzeń i testowanie zachowania aplikacji przy małej dostępności dysku w różnych sytuacjach. Wybierz Aplikacja, a następnie Pamięć i włącz Symuluj niestandardowy limit miejsca na dane i wpisz dowolną prawidłową liczbę, aby symulują limit miejsca na dane.

W trakcie pracy nad tym artykułem napisałam proste narzędzie, które i staraj się wykorzystać jak najwięcej miejsca na dane. To szybki i łatwy sposób eksperymentowanie z różnymi mechanizmami przechowywania danych i sprawdzanie, co się stanie, wykorzystujesz cały swój limit.

Jak poradzić sobie z przekroczeniem limitu?

Co należy zrobić, gdy przekroczysz limit? Najważniejsze jest to, zawsze wykrywa i obsługuje błędy zapisu, niezależnie od tego, czy jest to QuotaExceededError czy coś innego. Następnie w zależności od projektu aplikacji zdecyduj, jak ją obsługiwać. Na przykład usuń treści, z których użytkownicy nie korzystali od dawna, zależnie od rozmiaru, albo umożliwiać użytkownikom wybór danych do usunięcia.

Zarówno IndexedDB, jak i interfejs Cache API wysyłają żądanie DOMError o nazwie QuotaExceededError po przekroczeniu dostępnego limitu.

IndexedDB

Jeśli źródło przekroczyło limit, próby zapisu w IndexedDB niepowodzenie. Zostanie wywołany moduł obsługi transakcji onabort(), który przekazuje zdarzenie. Zdarzenie będzie zawierać właściwość DOMException we właściwości błędu. Sprawdzanie Błąd name zwraca QuotaExceededError.

const transaction = idb.transaction(['entries'], 'readwrite');
transaction.onabort = function(event) {
  const error = event.target.error; // DOMException
  if (error.name == 'QuotaExceededError') {
    // Fallback code goes here
  }
};

Interfejs API pamięci podręcznej

Jeśli punkt początkowy przekroczył limit, próbuje zapisać dane w interfejsie Cache API odrzuci QuotaExceededError DOMException.

try {
  const cache = await caches.open('my-cache');
  await cache.add(new Request('/sample1.jpg'));
} catch (err) {
  if (error.name === 'QuotaExceededError') {
    // Fallback code goes here
  }
}

Jak działa usuwanie?

Magazyn w internecie jest podzielony na 2 kategorie: „Best Effort” (Optymalny wysiłek) i „Trwały”. W miarę możliwości przeglądarka może wyczyścić pamięć zakłócanie działania użytkownika, ale jest mniej trwałe w przypadku danych ważnych i długoterminowych. Pamięć trwała nie jest automatycznie czyszczona, gdy zaczyna brakować miejsca. Użytkownik musi ręcznie wyczyścić tę pamięć (w ustawieniach przeglądarki).

Domyślnie dane witryny (w tym IndexedDB, Cache API itp.) należą do najlepszą kategorię, czyli jeśli w witrynie nie ma żądanej pamięci trwałej, przeglądarka może trwale usunąć przeglądarkę danych witryn według własnego uznania, np. gdy na urządzeniu jest mało miejsca.

Zasadą usuwania jest:

• Po utracie danych przeglądarki oparte na Chromium zaczną usuwać dane usuwając wszystkie dane witryn z najnowszego używanego źródła a następnie, aż limit zostanie przekroczony.
• Internet Explorer w wersji 10 lub nowszej nie usuwa danych, ale uniemożliwia ich źródło ani pisać.
• Firefox rozpocznie usuwanie danych, gdy zwolni się miejsce na dysku, usuń najpierw wszystkie dane witryn z ostatnio używanego źródła, a następnie do momentu, gdy limit zostanie przekroczony w przeglądarce.
• Przeglądarka Safari wcześniej nie usuwała danych, ale ostatnio wdrożyła nową 7-dniowy limit całego dostępnego miejsca do zapisu (patrz poniżej).

Począwszy od iOS i iPadOS 13.4 oraz Safari 13.1 w systemie macOS, dostępna jest 7-dniowy limit całej pamięci masowej skryptów, w tym bazy IndexedDB, usługi rejestracji instancji roboczych i interfejsie Cache API. Oznacza to, że Safari usunie wszystkie treści z pamięci podręcznej po 7 dniach korzystania z przeglądarki Safari, jeśli użytkownik użytkownicy witryny. Ta zasada usuwania nie dotyczy zainstalowanych Progresywne aplikacje internetowe, które zostały dodane do ekranu głównego. Zobacz Pełne blokowanie plików cookie innych firm i inne funkcje w WebKit .

Uwaga: możesz poprosić o trwałe przechowywanie witryny, aby chronić najważniejsze dane użytkowników i aplikacji.

Bonus: dlaczego warto używać otoki na potrzeby IndexedDB

IndexedDB to interfejs API niskiego poziomu, który przed użyciem wymaga odpowiedniej konfiguracji. co może być szczególnie uciążliwe przy przechowywaniu prostych danych. W przeciwieństwie do większości współczesnych a interfejsy API oparte na obietnicach – oparte na zdarzeniach. Obietnice takie jak idb w przypadku bazy danych IndexedDB ukrywa niektóre zaawansowane funkcje, ale nie tylko. co najważniejsze, ukryj złożone maszyny (np. transakcje, obsługę wersji schematu) z biblioteką IndexedDB.

Podsumowanie

Minęły czasy ograniczonego miejsca na dane i zachęcania użytkowników do więcej danych. Witryny mogą skutecznie przechowywać wszystkie zasoby i dane co trzeba zrobić. Za pomocą interfejsu StorageManager API możesz: aby określić dostępne możliwości i ilość wykorzystanego materiału. A dzięki trwałej pamięci, chyba że użytkownik ją usunie, może chronić je przed skasowaniem.

Dodatkowe materiały

• Sprawdzone metody dotyczące IndexedDB
• Pojęcia związane z przechowywaniem danych w internecie i limitami w Chrome

Dziękujemy

Specjalne podziękowania dla Jarryda Goodmana, Phila Waltona, Eiji Kitamury, Daniela Murphy'ego Darwin Huang, Josh Bell, Marijn Kruisselbrink i Victor Costan za recenzję ten artykuł. Podziękowania dla Eiji Kitamury, Addy Osmani i Marca Cohena, którzy napisali artykuły, na których opiera się ten projekt. Eiji napisał pomocne narzędzie Nadużywanie miejsca na dane w przeglądarce, co przydało się podczas weryfikacji jego obecne działanie. Pozwala ono przechowywać jak największą ilość danych i wyświetlać limity miejsca w przeglądarce. Dzięki wykopaliskom Francois Beaufort w przeglądarce Safari, aby sprawdzić limity miejsca.

Baner powitalny autorstwa Guillaume'a Bolduca Odchylenie.