Mengambil seluruh halaman secara offline menggunakan API HTML5 FileSystem

Mari kita hadapi itu, AppCache menjengkelkan dan memiliki masalah [1, 2, 3]. Salah satu batasan besarnya adalah bahwa tidak mungkin melakukan cache aset secara dinamis sesuai permintaan. Pada dasarnya, hal ini merupakan faktor utama yang memengaruhi pembuatan aplikasi secara offline. Semua yang ada dalam manifes di-cache di awal atau tidak ada yang di-cache.

FileSystem API HTML5 menjadi solusi yang menarik untuk kekurangan AppCache. Pengguna dapat menyimpan file dan hierarki folder secara terprogram di sistem file lokal (dengan sandbox) dan kemudian menambahkan/memperbarui/menghapus resource individual jika diperlukan. Rekan saya, Boris Smus, bahkan menulis library yang bagus untuk mengelola jenis cache offline ini dalam konteks game. Ide yang sama dapat diekstrapolasi untuk berfungsi dengan semua jenis aplikasi web.

crbug.com/89271 merupakan perbaikan penting untuk FileSystem API yang membuat jalur filesystem: URL relatif berfungsi dengan baik.

Misalnya, saya telah menyimpan index.html dalam folder root sistem file (fs.root), membuat folder img, dan menyimpan "test.png" di dalamnya. URL filesystem: untuk kedua file tersebut masing-masing adalah filesystem:http://example.com/temporary/index.html dan filesystem:http://example.com/temporary/img/test.png. Kemudian, jika ingin menggunakan "test.png" untuk img.src, saya harus menggunakan jalur absolut lengkapnya: <img src="filesystem:http://example.com/temporary/img/test.png">. Itu berarti menulis ulang semua URL relatif di index.html agar mengarah ke URL filesystem: file yang sesuai. Kacau! Sekarang, dengan perbaikan bug ini, saya dapat menyimpan jalur relatif ke file (<img src="img/test.png">) karena jalur tersebut akan diselesaikan dengan benar ke asal sistem file.

Fitur ini memudahkan Anda menarik halaman ke bawah dan menyimpan semua resourcenya secara offline, dengan tetap mempertahankan struktur folder yang sama persis seperti versi online.