Ошибка не удалось завершить операцию webkitblobresource 1 safari

Update TLDR;

Blobs in indexeddb are unreliable in iOS Webkit. So instead save your blobs as array buffer and the type of the blob as a string in the indexeddb. You can get the ArrayBuffer and the type of a blob-like this:

await blob.arrayBuffer()
blob.type

When you want to retrieve the data from the indexeddb and display it just create a new blob from the ArrayBuffer and type:

const blob = new Blob([value.buffer], { type: value.type });
URL.createObjectURL(blob);

Investigation

I have a very similar issue on iOS WebKit / safari: I also store images and video blobs received from the server in the indexeddb. The blobs are then retrieved and converted to an URL with createObjectUrl(). This works perfectly on all browser engines except WebKit / safari. iOS WebKit / safari only works the first couple of times. I have not found a perfect solution but I can share my findings so far:

Generally, all comments to similar issues are saying «blobs on WebKit are unreliable».

There are some possible workarounds: https://stackoverflow.com/a/60075517/13517617 I still have to try this one though.

Also what we may can do is use the fileReader to create a base64 String and use this as src. instead of createObjectUrl(). This can be achieved like this:

const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
const base64data = reader.result
};

This is not an ideal solution as we now have some callbacks.

There are some hints pointing to that the mime type of the blobs have to be specified correctly to make it work in iOS WebKit / safari all the time.

I will dig deeper and share my final answer here. Maybe some else is faster or has encountered this issue before.

Update TLDR;

Blobs in indexeddb are unreliable in iOS Webkit. So instead save your blobs as array buffer and the type of the blob as a string in the indexeddb. You can get the ArrayBuffer and the type of a blob-like this:

await blob.arrayBuffer()
blob.type

When you want to retrieve the data from the indexeddb and display it just create a new blob from the ArrayBuffer and type:

const blob = new Blob([value.buffer], { type: value.type });
URL.createObjectURL(blob);

Investigation

I have a very similar issue on iOS WebKit / safari: I also store images and video blobs received from the server in the indexeddb. The blobs are then retrieved and converted to an URL with createObjectUrl(). This works perfectly on all browser engines except WebKit / safari. iOS WebKit / safari only works the first couple of times. I have not found a perfect solution but I can share my findings so far:

Generally, all comments to similar issues are saying «blobs on WebKit are unreliable».

There are some possible workarounds: https://stackoverflow.com/a/60075517/13517617 I still have to try this one though.

Also what we may can do is use the fileReader to create a base64 String and use this as src. instead of createObjectUrl(). This can be achieved like this:

const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
const base64data = reader.result
};

This is not an ideal solution as we now have some callbacks.

There are some hints pointing to that the mime type of the blobs have to be specified correctly to make it work in iOS WebKit / safari all the time.

I will dig deeper and share my final answer here. Maybe some else is faster or has encountered this issue before.

Apple Footer

The problem occur when using file download on IOS and using reload on the window displaying the blob.

Configuration:
Nothing special. PDFjs viewer.

Web browser and its version:
Operating system and its version: IOS 10.2
PDF.js version: 1.6.210.
Is an extension:
Steps to reproduce the problem: 1. 2.

• Using PDFViewer, after displaying a PDF, use the download file button.
• A new tab open that show the pdf in native pdf renderer of Safari.
• Use «reload» of the page : the page display an error instead of displaying the pdf again (in native pdf renderer of Safari)

What is the expected behavior? (add screenshot)
Best case : Display the pdf again (at least if the tab containing pdf.js displaying the pdf is still open)
Acceptable : empty page or user friendly message.

What went wrong? (add screenshot)
I get an error page like (approximatively translated from french) :
Safari cannot open this page.
Error: The operation cannot complete (WebkitBlobRessource error 1).

I get an error like (approximatively translated from french) :
Safari cannot open this page.
Error: The operation cannot complete (WebkitBlobRessource error 1).

Just reporting for documentation as I dont think there is a solution to this problem. The ressource have very likely been released from memory, maybe Webkit / Safari could display a more user friendly message ( I did a quick search on webkit but base but found no related issue).

У меня есть функция загрузки PDF в моем веб-приложении. Он отлично работает со всеми браузерами и iOS11, но он не работает в браузере Safari и ios12 на мобильных устройствах или iod pro. Я получаю ниже ошибки — Ошибка WebKitBlobResource 1

export const downloadPDF = (downloadLink, fileName, trackId, productId, historyId) => {
  return (dispatch) => {
    return request.doGetAuth(downloadLink).then(response => {
      let contentType = response.headers.get('content-type');
      if (_.includes(contentType, 'application/json')) {
        return response.json();
      } else {
        return response.blob();
      }
    }).then(blobby => {
      if (!blobby.message) {
        const blob = new Blob([blobby], {
          type: 'application/pdf'
        });
        if (isIos()) {
          if (!isCriOs()) {
            // For ios 
            let url = window.URL.createObjectURL(blob);
            dispatch(downloadReadyAction(url, fileName));
          } else {
            // if chrome
            let reader = new FileReader();
            reader.onload = function(e) {
              dispatch(downloadReadyAction(reader.result, fileName));
            }
            reader.readAsDataURL(blob);
          }
        } else {
          FileSaver.saveAs(blob, fileName);
        }
      }
    }).catch(err => {
      console.log('Problem downloading pdf from server ' + err)
    })
  }
}