(browser) support safari private browsing mode by using base64 text instead of blob (#301)
### Platforms affected
cordova-browser
### Motivation and Context
Bascially cordova-browser uses indexeddb in order to store File(Blob) object as file-saving.
However the private browsing mode on safari browser in mac does not permit to store
File(Blob) object into the indexeddb.
(See Webkit source code https://github.com/WebKit/webkit/blob/5dada1bf8d706e1c544f1a23bfb67f3eaeb4f412/Source/WebCore/Modules/indexeddb/IDBObjectStore.cpp#L328-L331 )
This PR is to fix this issue.
### Description
The private borwsing mode on safari throws `DataCloneError` when storing Blob object to indexeddb.
Therefore this PR detects `DataCloneError` and store base64 encoded text instead of Blob object itself.
According to this, decoding/encoding helper functions are introduced.
Note that the safari browser (emulator ?) in the saucelab used in travis ci seems to work in
private browsing mode.
For example previous master branch fails tests for safari browser in travis ci like https://travis-ci.org/apache/cordova-plugin-file/builds/502885593?utm_source=github_status&utm_medium=notification .
This PR fix the issue.
### Testing
The test with both public and private browsing modes on safari on My local mac are done.
I confirmed this PR passes all test suites (specs).
### Checklist
- [ ] I've run the tests to see all new and existing tests pass
- [ ] I added automated test coverage as appropriate for this change
- [ ] Commit is prefixed with `(platform)` if this change only applies to one platform (e.g. `(android)`)
- [ ] If this Pull Request resolves an issue, I linked to the issue in the text above (and used the correct [keyword to close issues using keywords](https://help.github.com/articles/closing-issues-using-keywords/))
- [ ] I've updated the documentation if necessary
diff --git a/src/browser/FileProxy.js b/src/browser/FileProxy.js
index 66ad46b..17955b6 100644
--- a/src/browser/FileProxy.js
+++ b/src/browser/FileProxy.js
@@ -22,6 +22,8 @@
/* global require, exports, module */
/* global FILESYSTEM_PREFIX */
/* global IDBKeyRange */
+ /* global FileReader */
+ /* global atob, btoa, Blob */
/* Heavily based on https://github.com/ebidel/idb.filesystem.js */
@@ -685,6 +687,41 @@
MyFile.prototype.constructor = MyFile;
+ var MyFileHelper = {
+ toJson: function (myFile, success) {
+ /*
+ Safari private browse mode cannot store Blob object to indexeddb.
+ Then use pure json object instead of Blob object.
+ */
+ var fr = new FileReader();
+ fr.onload = function (ev) {
+ var base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(fr.result)));
+ success({
+ opt: {
+ size: myFile.size,
+ name: myFile.name,
+ type: myFile.type,
+ lastModifiedDate: myFile.lastModifiedDate,
+ storagePath: myFile.storagePath
+ },
+ base64: base64
+ });
+ };
+ fr.readAsArrayBuffer(myFile.blob_);
+ },
+ setBase64: function (myFile, base64) {
+ if (base64) {
+ var arrayBuffer = (new Uint8Array(
+ [].map.call(atob(base64), function (c) { return c.charCodeAt(0); })
+ )).buffer;
+
+ myFile.blob_ = new Blob([arrayBuffer], { type: myFile.type });
+ } else {
+ myFile.blob_ = new Blob();
+ }
+ }
+ };
+
// When saving an entry, the fullPath should always lead with a slash and never
// end with one (e.g. a directory). Also, resolve '.' and '..' to an absolute
// one. This method ensures path is legit!
@@ -847,7 +884,17 @@
tx.onabort = errorCallback || onError;
tx.oncomplete = function () {
- successCallback(request.result);
+ var entry = request.result;
+ if (entry && entry.file_json) {
+ /*
+ Safari private browse mode cannot store Blob object to indexeddb.
+ Then use pure json object instead of Blob object.
+ */
+ entry.file_ = new MyFile(entry.file_json.opt);
+ MyFileHelper.setBase64(entry.file_, entry.file_json.base64);
+ delete entry.file_json;
+ }
+ successCallback(entry);
};
};
@@ -946,7 +993,7 @@
tx.objectStore(FILE_STORE_)['delete'](fullPath);
};
- idb_.put = function (entry, storagePath, successCallback, errorCallback) {
+ idb_.put = function (entry, storagePath, successCallback, errorCallback, retry) {
if (!this.db) {
if (errorCallback) {
errorCallback(FileError.INVALID_MODIFICATION_ERR);
@@ -961,7 +1008,35 @@
successCallback(entry);
};
- tx.objectStore(FILE_STORE_).put(entry, storagePath);
+ try {
+ tx.objectStore(FILE_STORE_).put(entry, storagePath);
+ } catch (e) {
+ if (e.name === 'DataCloneError') {
+ tx.oncomplete = null;
+ /*
+ Safari private browse mode cannot store Blob object to indexeddb.
+ Then use pure json object instead of Blob object.
+ */
+
+ var successCallback2 = function (entry) {
+ entry.file_ = new MyFile(entry.file_json.opt);
+ delete entry.file_json;
+ successCallback(entry);
+ };
+
+ if (!retry) {
+ if (entry.file_ && entry.file_ instanceof MyFile && entry.file_.blob_) {
+ MyFileHelper.toJson(entry.file_, function (json) {
+ entry.file_json = json;
+ delete entry.file_;
+ idb_.put(entry, storagePath, successCallback2, errorCallback, true);
+ });
+ return;
+ }
+ }
+ }
+ throw e;
+ }
};
// Global error handler. Errors bubble from request, to transaction, to db.
