Fehler in der Filesystem API beheben

Das HTML5-Dateisystem ist eine leistungsstarke API. Mit mehr Leistung steigt auch die Komplexität. Je komplexer ein Projekt ist, desto frustrierender ist das Entfernen von Fehlern. Leider wird die File System API derzeit nicht von den DevTools unterstützt. Das erschwert die Fehlerbehebung. Mit „schwierig“ meine ich, dass ich Code schreiben muss, um Dateien im Dateisystem aufzulisten oder zu entfernen.

Bei meinen Bemühungen mit der Filesystem API habe ich ein paar Tipps gesammelt, die ich gerne weitergeben würde. Jede Empfehlung hat ihre eigenen Einschränkungen, aber wenn Sie eine Kombination davon verwenden, sind Sie schon 90% auf dem Weg zum Ziel. Hier sind die Top 5:

  1. Achten Sie darauf, dass Sie das Programm nicht über file:// ausführen. Das ist ein fieser Fehler, der vielen Menschen passiert. Chrome erzwingt strenge Sicherheitseinschränkungen für file://. Viele der erweiterten Datei-APIs (BlobBuilder, FileReader, File System API usw.) werfen Fehler oder schlagen stillschweigend fehl, wenn Sie die App lokal über file:// ausführen. Wenn Sie keinen Webserver zur Hand haben, können Sie Chrome mit dem Flag --allow-file-access-from-files starten, um diese Sicherheitsbeschränkung zu umgehen. Verwenden Sie dieses Flag nur zu Testzwecken.

  2. Die gefürchtete SECURITY_ERR oder QUOTA_EXCEEDED_ERR. Das passiert in der Regel, wenn Sie versuchen, Daten zu schreiben, sich aber in einem Zustand befinden, der unter Punkt 1 fällt. Andernfalls haben Sie wahrscheinlich kein Kontingent. Es gibt zwei Arten von Kontingenten, mit denen das Dateisystem geöffnet werden kann: TEMPORARY oder PERSISTENT. Wenn Sie letzteres verwenden, muss der Nutzer Ihrer App explizit den dauerhaften Speicher gewähren. In diesem Beitrag erfahren Sie, wie das geht.

  3. filesystem: URL FTW Es ist praktisch, die filesystem:-URL für den Stamm DirectoryEntry des Ursprungs Ihrer App zu öffnen. Was bedeutet das? Wenn sich Ihre App beispielsweise unter www.example.com befindet, öffnen Sie www.example.com in einem neuen Tab.filesystem:http://www.example.com/temporary/ Chrome zeigt eine schreibgeschützte Liste der Dateien/Ordner an, die im Ursprung Ihrer App gespeichert sind. Weitere Informationen zu filesystem:-URLs finden Sie unter https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls.

  4. chrome://settings/cookies ist Ihr Freund. Auf dieser Seite können Sie alle für eine Quelle gespeicherten Daten löschen. Dazu gehören Datenbankspeicher, AppCache, Cookies, localStorage und Elemente in der FileSystem API. Beachten Sie jedoch, dass es sich um ein „Alles-oder-Nichts-Prinzip“ handelt. Sie können nicht nur eine Datei oder Datenelemente entfernen.

  5. Denken Sie auch an Fehler-Callbacks. Die File System API ist asynchron, es sei denn, Sie verwenden die Synchronisierungsversion in Workers. Verwenden Sie in Ihren API-Aufrufen immer einen Fehler-Callback. Sie sind optional, aber Sie sparen sich später viel Ärger, wenn etwas schiefgeht.