Mengambil seluruh halaman secara offline menggunakan API HTML5 FileSystem

Mari kita hadapi kenyataan, AppCache itu menjengkelkan dan memiliki masalah [1, 2, 3]. Salah satu batasan besar adalah fakta bahwa aset tidak dapat di-cache secara dinamis sesuai permintaan. Pada dasarnya, hal ini membuat aplikasi menjadi tidak berfungsi sama sekali saat 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. Anda dapat menyimpan hierarki file dan folder secara terprogram di sistem file lokal (dengan sandbox) dan kemudian menambahkan/memperbarui/menghapus setiap resource sesuai kebutuhan. Rekan saya, Boris Smus, bahkan menulis library yang bagus untuk mengelola jenis penyimpanan dalam cache offline ini dalam konteks game. Ide yang sama dapat diekstrapolasi untuk digunakan dengan jenis aplikasi web apa pun.

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

Misalnya, saya telah menyimpan index.html di folder root sistem file (fs.root), membuat folder img, dan menyimpan "test.png" di dalamnya. URL filesystem: untuk kedua file tersebut 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">. Artinya, Anda harus menulis ulang semua URL relatif di index.html agar mengarah ke URL filesystem: file yang sesuai. Tidak keren! Sekarang, dengan perbaikan bug ini, saya dapat mempertahankan jalur relatif ke file (<img src="img/test.png">) karena akan di-resolve dengan benar ke asal sistem file.

Fitur ini memudahkan Anda untuk mendownload halaman dan menyimpan semua resource-nya secara offline, sekaligus mempertahankan struktur folder yang sama persis dengan versi online.