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

Eric Bidelman

Kabul edelim, AppCache sinir bozucu ve sorunları var [1, 2, 3]. Önemli sınırlamalardan biri, öğeleri isteğe bağlı olarak dinamik bir şekilde önbelleğe almanın mümkün olmamasıdır. Bu da, bir uygulamayı çevrimdışına alma konusunda "ya hep ya hiç" bir şey değil. Manifest'teki 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 gelir. Dosyaları ve klasör hiyerarşilerini yerel (korumalı alan) dosya sisteminde programatik olarak depolayabilir ve ardından gerektiğinde kaynakları tek tek ekleyebilir/güncelleyebilir/kaldırabilirsiniz. İş arkadaşım Boris Smus bile bu tür çevrimdışı önbelleğe alma işlemini oyun bağlamında yönetmek için güzel bir kitaplık yazdı. Aynı fikir, herhangi bir web uygulaması türüyle çalışacak şekilde düşünülebilir.

crbug.com/89271, ilgili filesystem: URL yollarının son derece verimli şekilde çalışmasını sağlayan, FileSystem API'nin önemli bir düzeltmesidir.

Ö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 bu klasöre "test.png" 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. Daha sonra, bir img.src için "test.png" kullanmak istiyorsak tam mutlak yolunu kullanmam gerekiyordu: <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 havalı değil! Şimdi, bu hata düzeltmesi sayesinde dosyanın göreli yolunu (<img src="img/test.png">) koruyabilirim. Böylece dosyalar, dosya sistemi kaynağına doğru bir şekilde çözümlenecek.

Bu özellik, çevrimiçi sürümle tamamen aynı klasör yapısını korurken, bir sayfanın aşağı çekilip tüm kaynaklarını çevrimdışı kaydetmeyi kolaylaştırır.