HTML5 FileSystem API'yi kullanarak sayfanın tamamını çevrimdışına alma

Kabul edelim, AppCache can sıkıcı ve sorunlara sahip [1, 2, 3]. En büyük sınırlamalardan biri, öğeleri isteğe bağlı olarak dinamik olarak önbelleğe almanın mümkün olmamasıdır. Bu durum, bir uygulamayı çevrimdışı hale getirme konusunda her şeyin ya da hiçbir şeyin söz konusu olduğu anlamına gelir. Manifestteki her şey önceden önbelleğe alınır veya hiçbir şey önbelleğe alınmaz.

HTML5 FileSystem API, AppCache'in eksiklikleri için cazip bir çözüm haline geliyor. Dosyaları ve klasör hiyerarşilerini yerel (korumalı alan) dosya sisteminde programatik olarak depolayabilir ve ardından gerektiğinde tek tek kaynakları ekleyebilir/güncelleyebilir/kaldırabilirsiniz. İş arkadaşım Boris Smus, oyun bağlamında bu tür çevrimdışı önbelleğe alma işlemlerini yönetmek için hoş bir kitaplık bile yazdı. Aynı fikir, herhangi bir web uygulamasıyla çalışmak için de uygulanabilir.

crbug.com/89271, FileSystem API için önemli bir düzeltmedir ve göreli filesystem: URL yollarının sorunsuz çalışmasını sağlar.

Örneğin, index.html dosyasını dosya sisteminin kök klasörüne (fs.root) kaydettiğimi, bir img klasörü oluşturduğumu ve "test.png" dosyasını bu klasöre kaydettiğimi varsayalım. Bu iki dosyanın filesystem: URL'si sırasıyla filesystem:http://example.com/temporary/index.html ve filesystem:http://example.com/temporary/img/test.png olur. Ardından, bir img.src için "test.png" kullanmak isteseydim tam mutlak yolunu kullanmam gerekirdi: <img src="filesystem:http://example.com/temporary/img/test.png">. Bu, index.html'deki tüm göreli URL'lerin, ilgili dosyanın filesystem: URL'sine işaret edecek şekilde yeniden yazılması anlamına geliyordu. Bu hiç hoş değil. Bu hata düzeltmesiyle birlikte, dosyayla ilgili göreli yolu (<img src="img/test.png">) bir dosya sistemi kaynağına doğru şekilde çözebileceğim için koruyabilirim.

Bu özellik, bir sayfayı indirip tüm kaynaklarını çevrimdışı olarak kaydetmeyi kolaylaştırır. Bu sırada, çevrimiçi sürümle aynı klasör yapısı korunur.