Een hele pagina offline halen met de HTML5 FileSystem API,Een hele pagina offline halen met de HTML5 FileSystem API

Laten we eerlijk zijn, AppCache is vervelend en kent problemen [ 1 , 2 , 3 ]. Een grote beperking is het feit dat het onmogelijk is om assets op verzoek dynamisch in de cache op te slaan. In wezen maakt dit het een alles of niets-zaak als het gaat om het offline zetten van een app. Alles in het manifest wordt vooraf in de cache opgeslagen, of er wordt niets in de cache opgeslagen.

De HTML5 FileSystem API wordt een aantrekkelijke oplossing voor de tekortkomingen van AppCache. Men kan bestanden en maphiërarchieën programmatisch opslaan in het lokale (sandbox) bestandssysteem en vervolgens indien nodig individuele bronnen toevoegen/bijwerken/verwijderen. Mijn collega, Boris Smus, heeft zelfs een mooie bibliotheek geschreven om dit soort offline caching in de context van games te beheren. Hetzelfde idee kan worden geëxtrapoleerd om met elk type webapp te werken.

crbug.com/89271 is een belangrijke oplossing voor de FileSystem API die ervoor zorgt dat relatieve bestandssystemen: URL- paden als een zonnetje werken.

Laten we bijvoorbeeld zeggen dat ik index.html heb opgeslagen in de hoofdmap van het bestandssysteem ( fs.root ), een img-map heb gemaakt en daarin "test.png" heb opgeslagen. Het filesystem: URL voor deze twee bestanden zou respectievelijk filesystem:http://example.com/temporary/index.html en filesystem:http://example.com/temporary/img/test.png zijn. Als ik vervolgens "test.png" wilde gebruiken voor een img.src , moest ik het volledige absolute pad gebruiken: <img src="filesystem:http://example.com/temporary/img/test.png"> . Dat betekende dat alle relatieve URL's in index.html moesten worden herschreven, zodat ze naar filesystem: URL. Niet cool! Met deze bugfix kan ik nu het relatieve pad naar het bestand ( <img src="img/test.png"> ) behouden, omdat ze correct worden omgezet naar de oorsprong van een bestandssysteem.

Deze functie maakt het triviaal om een ​​pagina naar beneden te halen en alle bronnen offline op te slaan, terwijl nog steeds exact dezelfde mapstructuur behouden blijft als de online versie.

,

Laten we eerlijk zijn, AppCache is vervelend en kent problemen [ 1 , 2 , 3 ]. Een grote beperking is het feit dat het onmogelijk is om assets op verzoek dynamisch in de cache op te slaan. In wezen maakt dit het een alles of niets-zaak als het gaat om het offline zetten van een app. Alles in het manifest wordt vooraf in de cache opgeslagen, of er wordt niets in de cache opgeslagen.

De HTML5 FileSystem API wordt een aantrekkelijke oplossing voor de tekortkomingen van AppCache. Men kan bestanden en maphiërarchieën programmatisch opslaan in het lokale (sandbox) bestandssysteem en vervolgens indien nodig individuele bronnen toevoegen/bijwerken/verwijderen. Mijn collega, Boris Smus, heeft zelfs een mooie bibliotheek geschreven om dit soort offline caching in de context van games te beheren. Hetzelfde idee kan worden geëxtrapoleerd om met elk type webapp te werken.

crbug.com/89271 is een belangrijke oplossing voor de FileSystem API die ervoor zorgt dat relatieve bestandssystemen: URL- paden als een zonnetje werken.

Laten we bijvoorbeeld zeggen dat ik index.html heb opgeslagen in de hoofdmap van het bestandssysteem ( fs.root ), een img-map heb gemaakt en daarin "test.png" heb opgeslagen. Het filesystem: URL voor deze twee bestanden zou respectievelijk filesystem:http://example.com/temporary/index.html en filesystem:http://example.com/temporary/img/test.png zijn. Als ik vervolgens "test.png" wilde gebruiken voor een img.src , moest ik het volledige absolute pad gebruiken: <img src="filesystem:http://example.com/temporary/img/test.png"> . Dat betekende dat alle relatieve URL's in index.html moesten worden herschreven, zodat ze naar filesystem: URL. Niet cool! Met deze bugfix kan ik nu het relatieve pad naar het bestand ( <img src="img/test.png"> ) behouden, omdat ze correct worden omgezet naar de oorsprong van een bestandssysteem.

Deze functie maakt het triviaal om een ​​pagina naar beneden te halen en alle bronnen offline op te slaan, terwijl nog steeds exact dezelfde mapstructuur behouden blijft als de online versie.