Web için depolama alanı

Verileri tarayıcıda depolamak için birçok farklı seçenek vardır. İhtiyaçlarınıza en uygun olanı hangisi?

İnternet bağlantıları hareket halindeyken yavaş olabilir veya olmayabilir. Bu nedenle, çevrimdışı destek ve güvenilir performans, progresif web uygulamalarının yaygın özelliklerindendir. Kusursuz kablosuz ortamlarda bile, önbelleğe alma ve diğer depolama tekniklerinin mantıklı kullanımı, kullanıcı deneyimini önemli ölçüde iyileştirebilir. Statik uygulama kaynaklarınızı (HTML, JavaScript, CSS, resimler vb.) ve verilerinizi (kullanıcı verileri, haber makaleleri vb.) önbelleğe almanın birkaç yolu vardır. Peki ama en iyi çözüm hangisi? Ne kadar saklanabilirsiniz? Çıkarılmasını nasıl önlüyorsunuz?

Ne kullanmalıyım?

Kaynakların depolanmasıyla ilgili genel bir öneriyi aşağıda bulabilirsiniz:

IndexedDB ve Cache Storage API'si her modern tarayıcıda desteklenir. İkisi de eşzamansız olup ana iş parçacığını engellemez. Bunlara window nesnesinden, web çalışanlarından ve Service Worker'lardan erişilebildikleri için kodunuzun her yerinde kolayca kullanılabilirler.

Diğer depolama mekanizmaları ne olacak?

Tarayıcıda başka depolama mekanizmaları da vardır, ancak bunların kullanımları sınırlıdır ve önemli performans sorunlarına neden olabilirler.

SessionStorage sekmeye özgüdür ve sekmenin ömrünü kapsar. IndexedDB anahtarı gibi az miktarda oturuma özgü bilgileri depolamak için faydalı olabilir. Eşzamanlı olduğu ve ana iş parçacığını engelleyeceği için dikkatli kullanılmalıdır. Yaklaşık 5 MB ile sınırlıdır ve yalnızca dizeler içerebilir. Sekmeye özel olduğu için web çalışanlarından veya Service Worker'lardan erişilemez.

Eşzamanlı olduğu ve ana iş parçacığını engelleyeceğinden LocalStorage kaçınılmalıdır. Boyutu 5 MB ile sınırlıdır ve yalnızca dize içerebilir. Web çalışanlarından veya hizmet çalışanlarından LocalStorage'a erişilemez.

Çerezler kendi kullanımlarına sahiptir ancak depolama amacıyla kullanılmamalıdır. Çerezler her HTTP isteğiyle gönderilir. Bu nedenle, az miktarda veriden daha fazlasının depolanması her web isteğinin boyutunu önemli ölçüde artırır. Eşzamanlıdırlar ve web çalışanlarından erişilemezler. LocalStorage ve SessionStorage gibi çerezler de yalnızca dizelerle sınırlıdır.

File System API ve FileWriter API, dosyaların korumalı alana alınmış bir dosya sistemine okunması ve yazılması için yöntemler sağlar. Eşzamansız olsa da, yalnızca Chromium tabanlı tarayıcılarda kullanılabildiği için önerilmez.

File System Access API, kullanıcıların yerel dosya sistemlerindeki dosyaları okumasını ve düzenlemesini kolaylaştırmak için tasarlanmıştır. Bir sayfanın herhangi bir yerel dosyayı okuyabilmesi veya bu dosyaya yazabilmesi için kullanıcının izin vermesi gerekir. İzinler oturumlar genelinde korunmaz.

WebSQL kullanılmamalıdır ve mevcut kullanım, IndexedDB'ye taşınmalıdır. Başlıca tarayıcıların neredeyse tamamı için sağlanan destek kaldırılmıştır. W3C, 2010 yılında Web SQL spesifikasyonunu sürdürmeyi durdurdu ve başka güncelleme planı yapmadı.

Uygulama Önbelleği kullanılmamalıdır ve mevcut kullanım, Service Worker'lara ve Cache API'ye taşınmalıdır. Bu özellik kullanımdan kaldırılmıştır ve gelecekte tarayıcılardan destek kaldırılacaktır.

Ne kadar depolama alanım olabilir?

Kısacası, çok fazla, en az birkaç yüz megabayt ve potansiyel olarak yüzlerce gigabayt veya daha fazla. Tarayıcı uygulamaları değişiklik gösterir, ancak kullanılabilen depolama alanı genellikle cihazdaki kullanılabilir depolama alanına göre değişir.

  • Chrome, tarayıcının toplam disk alanının% 80'ine kadar kullanmasına olanak tanır. Bir kaynak, toplam disk alanının en fazla% 60'ını kullanabilir. Kullanılabilir maksimum kotayı belirlemek için StorageManager API'yi kullanabilirsiniz. Diğer Chromium tabanlı tarayıcılar farklı olabilir.
    • Chrome, gizli modda bir kaynağın kullanabileceği depolama alanını toplam disk alanının yaklaşık% 5'ine kadar azaltır.
    • Kullanıcı, Chrome'da "Tüm pencereleri kapattığınızda çerezleri ve site verilerini temizle" seçeneğini etkinleştirdiyse depolama kotası önemli ölçüde düşürülerek yaklaşık 300 MB'lık maksimum sınıra indirilir.
    • Chrome'un uygulanmasıyla ilgili ayrıntılar için PR #3896 sayfasına bakın.
  • Internet Explorer 10 ve sonraki sürümleri 250 MB'a kadar veri depolayabilir ve 10 MB'tan fazla kullanıldığında kullanıcıdan bilgi alır.
  • Firefox, tarayıcının boş disk alanının% 50'sine kadar kullanmasına izin verir. Bir eTLD+1 grubu (ör. example.com, www.example.com ve foo.bar.example.com) 2 GB'a kadar depolama alanı kullanabilir. Hâlâ ne kadar kullanılabilir alan olduğunu belirlemek için StorageManager API'yi kullanabilirsiniz.
  • Safari (masaüstü ve mobil) yaklaşık 1 GB yer kaplar. Sınıra ulaşıldığında Safari kullanıcıdan onay ister ve sınırı 200 MB'lık artışlarla artırır. Bununla ilgili herhangi bir resmi belge bulamadım.
    • Mobil Safari'de ana ekrana bir PWA eklenirse yeni bir depolama alanı kapsayıcısı oluşturulur ve PWA ile mobil Safari arasında hiçbir şey paylaşılmaz. Yüklü bir PWA için kotaya ulaşıldığında, ek depolama alanı talep etmenin herhangi bir yolu yoktur.

Geçmişte, bir site depolanan belirli bir veri eşiğini aşarsa, tarayıcı kullanıcıdan daha fazla veri kullanma izni vermesini isterdi. Örneğin, kaynak 50 MB'tan fazla kullandıysa tarayıcı, kullanıcıdan 100 MB'a kadar depolama izni vermesini ister, ardından 50 MB'lık artışlarla tekrar sorar.

Günümüzde çoğu modern tarayıcı, kullanıcıya istem göstermeyecek ve bir sitenin kendisine ayrılan kotasına kadar kullanmasına izin verecektir. Bunun istisnası Safari'dir. Safari, depolama alanı kotası aşıldığında bildirim alarak ayrılan kotayı artırmak için izin ister. Bir kaynak kendisine ayrılan kotadan daha fazlasını kullanmaya çalışırsa sonraki veri yazma denemeleri başarısız olur.

Kullanılabilir depolama alanı miktarını nasıl kontrol edebilirim?

Birçok tarayıcıda, kaynakta kullanılabilen depolama alanı miktarını ve kullandığı depolama alanı miktarını belirlemek için StorageManager API'sini kullanabilirsiniz. IndexedDB ve Cache API'nin kullandığı toplam bayt sayısını bildirerek kullanılabilir kalan depolama alanının yaklaşık olarak hesaplanmasını sağlar.

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.`);
}

StorageManager henüz tüm tarayıcılarda uygulanmamıştır. Bu yüzden, bu özelliği kullanmadan önce bir özellik algılamanız gerekir. Kullanılabilir olsa bile kota aşımı hatalarını yakalamanız gerekir (aşağıya bakın). Bazı durumlarda, kullanılabilir kota, kullanılabilir depolama alanı miktarını aşabilir.

İnceleme

Geliştirme sırasında, farklı depolama türlerini incelemek ve depolanan tüm verileri kolayca temizlemek için tarayıcınızın Geliştirme Araçları'nı kullanabilirsiniz.

Chrome 88'de Depolama Bölmesi'nde sitenin depolama kotasını geçersiz kılmanıza olanak tanıyan yeni bir özellik eklendi. Bu özellik sayesinde farklı cihazları simüle edebilir ve düşük disk kullanılabilirliği senaryolarında uygulamalarınızın davranışını test edebilirsiniz. Uygulama, ardından Depolama'ya gidin, Özel depolama alanı kotasını simüle et onay kutusunu etkinleştirin ve depolama alanı kotasını simüle etmek için geçerli bir sayı girin.

Geliştirici Araçları Depolama bölmesi.

Bu makale üzerinde çalışırken, mümkün olduğunca fazla depolama alanını hızlı bir şekilde kullanmayı denemek için basit bir araç yazdım. Bu özellik, farklı depolama mekanizmalarını denemenin ve kotanızın tamamını kullandığınızda ne olduğunu görmenin hızlı ve kolay bir yoludur.

Kotanın aşılması sorunu nasıl halledilir?

Kotanızı aştığınızda ne yapmanız gerekir? En önemlisi, ister QuotaExceededError ister başka bir şey olsun, yazma hatalarını her zaman yakalamanız ve işlemeniz gerekir. Ardından, uygulamanızın tasarımına bağlı olarak bu özelliğin nasıl ele alınacağına karar verin. Örneğin, uzun süredir erişilmeyen içerikleri silebilir, boyuta göre verileri kaldırabilir veya kullanıcıların silmek istedikleri öğeleri seçmelerine olanak tanıyabilirsiniz.

Mevcut kotayı aştığınızda hem IndexedDB hem de Cache API, QuotaExceededError adlı bir DOMError gönderir.

IndexedDB

Kaynak, kotasını aştıysa IndexedDB'ye yazma denemeleri başarısız olur. İşlemin onabort() işleyicisi, bir etkinlik iletilerek çağrılır. Etkinlik, hata özelliğinde bir DOMException içerecektir. name hatası kontrol edildiğinde QuotaExceededError döndürülür.

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

Önbellek API'sı

Kaynak, kotasını aştıysa Cache API'ye yazma girişimleri QuotaExceededError DOMException ile reddedilir.

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
  }
}

Çıkarma işlemi nasıl yapılır?

Web depolama, "En İyi Çaba" ve "Kalıcı" olarak iki gruba ayrılır. En iyi çaba, depolama alanının kullanıcıyı kesintiye uğratmadan tarayıcı tarafından temizlenebilmesi anlamına gelir ancak uzun vadeli veya kritik veriler için daha az dayanıklıdır. Depolama alanı azaldığında, kalıcı depolama alanı otomatik olarak temizlenmez. Kullanıcının bu depolama alanını manuel olarak temizlemesi gerekir (tarayıcı ayarlarından).

Varsayılan olarak, bir sitenin verileri (IndexedDB, Cache API vb. dahil) en iyi çaba kategorisine girer. Yani, bir site kalıcı depolama alanı isteğinde bulunmadığı sürece, tarayıcı kendi takdirine bağlı olarak (örneğin, cihazın depolama alanı azaldığında) site verilerini çıkarabilir.

En iyi sonucu elde etmek için çıkarma politikası:

  • Chromium tabanlı tarayıcılar, tarayıcıda boş yer kalmadığında verileri çıkarmaya başlar. Tarayıcı sınırı aşmayana kadar önce en son kullanılan kaynaktan gelen tüm site verileri silinir.
  • Internet Explorer 10 ve sonraki sürümler verileri çıkarmaz ancak kaynağın daha fazla yazmasını engeller.
  • Firefox, kullanılabilir disk alanı dolduğunda verileri çıkarmaya başlar. Tarayıcı sınırı aşmayana kadar önce en son kullanılan kaynaktaki tüm site verilerini temizler.
  • Safari daha önce verileri çıkarmamıştı, ancak kısa süre önce tüm yazılabilir depolama alanlarına yeni bir yedi günlük sınır uyguladı (aşağıya bakın).

macOS'te iOS ve iPadOS 13.4 ve Safari 13.1'den itibaren, IndexedDB, hizmet çalışanı kaydı ve Cache API dahil olmak üzere tüm komut dosyası yazılabilir depolama alanlarında yedi günlük bir sınır söz konusudur. Bu, kullanıcı siteyle etkileşimde bulunmazsa Safari'nin yedi günlük Safari kullanımından sonra tüm içeriği önbellekten çıkaracağı anlamına gelir. Bu çıkarma politikası, ana ekrana eklenen yüklü PWA'lar için geçerli değildir. Tüm ayrıntılar için WebKit blog'unda Tam Üçüncü Taraf Çerez Engelleme ve Daha Fazlası sayfasına göz atın.

Bonus: IndexedDB için neden sarmalayıcı kullanmalı?

IndexedDB, kullanımdan önce büyük kurulum gerektiren düşük seviyeli bir API'dir. Bu durum, özellikle basit verileri depolamak için zorlayıcı olabilir. Vaat tabanlı çoğu API'nin aksine etkinliğe dayalıdır. IndexedDB için idb gibi vaat sarmalayıcılar, bazı güçlü özellikleri gizler ancak daha önemlisi IndexedDB kitaplığıyla birlikte gelen karmaşık makineleri (ör. işlemler, şema sürümü oluşturma) gizler.

Sonuç

Depolama alanının sınırlı olduğu ve kullanıcıların giderek daha fazla veri depolamasının istendiği günler geride kaldı. Siteler, çalıştırmak için gereken tüm kaynakları ve verileri etkili bir şekilde depolayabilir. StorageManager API'sini kullanarak ne kadar kullanılabilir ve ne kadar veri kullandığınızı belirleyebilirsiniz. Ayrıca kalıcı depolama alanı sayesinde, kullanıcı tarafından kaldırılmadığı sürece bu alanı çıkarılmaya karşı koruyabilirsiniz.

Ek kaynaklar

Teşekkürler

Bu makaleyi inceledikleri için Jarryd Goodman, Phil Walton, Eiji Kitamura, Daniel Murphy, Darwin Huang, Josh Bell, Marijn Kruisselbrink ve Victor Costan'a özel teşekkür ederiz. Bu makalenin dayandığı orijinal makaleleri yazan Eiji Kitamura, Addy Osmani ve Marc Cohen'e teşekkür ederiz. Eiji, mevcut davranışın doğrulanmasında yararlı olan Tarayıcı Depolama Alanını Kötüye Kullanan adlı faydalı bir araç yazdı. Bu özellik, mümkün olduğunca fazla veri depolamanıza ve tarayıcınızda depolama alanı sınırlarını görmenize olanak tanır. Depolama alanı sınırlarını bulmak için Safari'yi araştıran Francois Beaufort'a teşekkür ederiz.

Lokomotif resim, Unsplash'ta Guillaume Bolduc'a aittir.