Impossible de stocker les types de Blob dans IndexedDB sur Safari

Question

Je rencontre des problèmes avec le stockage de blobs dans IndexedDB sur Safari version 10.1.2 (également confronté au même problème sur IOS). J'utilise l'enveloppe du module angular2-indexeddb, cependant - je ne pense pas que ce soit un problème avec le module en tant que tel. Mon code fonctionne bien dans Chrome, mais lorsque l'on tente de mettre un objet blob dans le Safari IndexedDB, le dossier affiche toujours comme « nul » (voir le champ FileData):

J'ai essayé une variété de différents fichiers blob (audio, vidéo, html) et ils affichent toujours comme 'null'. Aucune erreur (visible) n'est renvoyée par IndexedDb lors de l'insertion de cet enregistrement. D'après ce que j'ai lu - les blobs devraient être supportés dans Safari. Je pense que le problème pourrait être associé à la façon dont le blob est créé? Peut-être que Safari n'aime pas les données BLOB?

est Ci-dessous un échantillon de mon code (je ne l'ai pas inclus trop ici, alors s'il vous plaît laissez-moi savoir si plus d'information est nécessaire):

 // create blob: 
     const aFileParts = ['<a id="a"><b id="b">foo!</b></a>']; 
     const oMyBlob = new Blob(aFileParts, {type : 'text/html'}); 

     console.log('blob type' + oMyBlob.type); // outputs as 'text/html' 

     // initialize my indexeddb store: 
     return this.initializeStores().then(() => { 

     // add 'oMyBlob' to the FileData data store: 
     return this.db.add('FileData', 
      { FileName: 'foo', FileData: oMyBlob, FileType: 'audio' }).then(() => { 

      // Success 
      console.log('added ' + 'foo' + ' to FileData store.'); 

      // Get the file from the FileData store 
      return this.db.getByIndex('FileData', 'FileName', 'foo').then((record) => { 
       return Promise.resolve(); 
      }); 

      }, (error) => { 
      console.log(error); 
      this.handleError(error) 
      return Promise.reject(error); 
      }); 
     }, (error) => { 
     this.handleError(error); 
     return Promise.reject(error); 
     }); 

comme une note de côté - je peux stocker ces données comme un ArrayBuffer dans Safari IndexedDB sans aucun problème. Le problème est que je dois alors le convertir en un blob lorsque je le récupère de la base de données (la puissance de traitement supplémentaire requise n'est pas idéale).

Toute aide est très appréciée.

Answer 1

J'ai donc réussi à trouver la cause du problème. Lors de la création de mon magasin, je faisait référence à un index erroné (principalement parce que je suivais un tutoriel en ligne)

const objectDataStore = evt.currentTarget.result.createObjectStore(
    'FileData', { keyPath: 'id', autoIncrement: true }); 

Le keypath « id » n'existe pas dans mon magasin. Cela causait les problèmes lors de l'enregistrement des blobs (étrangement, sans erreur signalée ... et il ne semblait pas causer de problèmes sur le chrome).

Le code correct:

const objectDataStore = evt.currentTarget.result.createObjectStore(
    'FileData', { keyPath: 'FileName', autoIncrement: true }); 

'FileName' est le nom d'une propriété dans mon objet magasin. Cela corrige maintenant le problème sur le safari de bureau. Donc la leçon ici est de s'assurer que le KeyPath est correct.

Cependant, je suis maintenant confronté à un nouveau problème. Sur IOS Safari, le blob échoue à persister dans l'indexedDb. Je reçois l'erreur suivante:

error: DOMError {name: "UnknownError", message: "An unknown error occurred within Indexed Database."} 

Il semble donc que les blobs ne sont pas pris en charge pour IndexedDB sur IOS Safari (je suppose que c'est un bug). Pour l'instant, je vais juste stocker ArrayBuffers au lieu de blobs.