Debug dell'API Filesystem

Il filesystem HTML5 è una potente API. Con la potenza, aumenta la complessità. Con la complessità aumentano le frustrazioni legate al debug. Purtroppo, al momento DevTools di Chrome non supporta l'API Filesystem. Il debug è più difficile di quanto dovrebbe essere. Per difficile intendo che è necessario scrivere codice per elencare/rimuovere i file nel file system.

Durante i miei esperimenti con l'API Filesystem, ho raccolto un paio di suggerimenti che ho pensato di condividere. Ogni suggerimento ha il proprio insieme di limitazioni, ma utilizzando una combinazione di questi suggerimenti otterrai il 90% del risultato. Ecco i primi 5:

  1. Assicurati di non eseguire l'app da file://. Si tratta di un problema subdolo che colpisce molte persone. Chrome impone importanti limitazioni di sicurezza su file://. Molte delle API di file avanzate (BlobBuilder, FileReader, API Filesystem e così via) generano errori o non terminano l'esecuzione se l'app viene eseguita localmente da file://. Se non hai a disposizione un server web, Chrome può essere avviato con il flag --allow-file-access-from-files per aggirare questa limitazione di sicurezza. Utilizza questo flag solo a scopo di test.

  2. Il temuto SECURITY_ERR o QUOTA_EXCEEDED_ERR. Questo accade in genere quando si tenta di scrivere dati, ma si è soggetti al problema 1. In caso contrario, è probabile che tu non abbia quota. Il file system può essere aperto con due tipi di quote, TEMPORARY o PERSISTENT. Se utilizzi quest'ultima, l'utente deve concedere esplicitamente lo spazio di archiviazione permanente alla tua app. Consulta questo post per scoprire come.

  3. filesystem: URL FTW. È utile aprire l'URL filesystem: per la radice DirectoryEntry dell'origine dell'app. Che cosa significa? Ad esempio, se la tua app si trova su www.example.com, apri filesystem:http://www.example.com/temporary/ in una nuova scheda. Chrome mostrerà un elenco di sola lettura dei file/delle cartelle archiviati nell'origine dell'app. Per ulteriori informazioni sugli URL filesystem:, visita la pagina https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls.

  4. chrome://settings/cookies è tuo amico. Questa pagina ti consente di eliminare completamente i dati archiviati per un'origine. Sono inclusi lo spazio di archiviazione del database, AppCache, i cookie, localStorage e gli elementi dell'API FileSystem. Tieni presente però che si tratta di un'opzione "tutto o niente". Non puoi rimuovere un solo file o parti di dati.

  5. Non dimenticare i callback di errore. L'API Filesystem opera in un ambiente asincrono (a meno che non utilizzi la versione sincronizzata in Workers). Utilizza sempre il callback di errore nelle chiamate API. Sono facoltativi, ma ti faranno risparmiare un sacco di problemi in seguito quando le cose si complicano.