PDF Viewer is not working on PWA Mode

[shaangidwani]

Hi,

We are using the PDF Viewer in ReactJS for one of our applications. It's working fine when the client is connected to the internet, but its not working when client on PWA Mode (Disconnected Mode).

We have PWA offline application developed using reactjs and in this application we want to show pdf in pdf viewer and that place using SyncFusion PDF viewer control.

Right now, when we turn off wifi and open pdf in viewer, it is not able to read pdfium.wasm from service worker caching. It throws below error. Note that we can see below two files in chrome browser Cache Storage.

"./assets/ej2-pdfviewer-lib/pdfium.js",
"./assets/ej2-pdfviewer-lib/pdfium.wasm"

Error:
Uncaught (in promise) TypeError: Failed to fetch
at instantiateAsync (pdfium.js:420:24)
at createWasm (pdfium.js:464:13)
at pdfium.js:3788:19
at A.onmessage (1727faa9-d125-42dd-a057-b0831fbce249:1:3732)
instantiateAsync @ pdfium.js:420
createWasm @ pdfium.js:464
(anonymous) @ pdfium.js:3788
A.onmessage @ 1727faa9-d125-42dd-a057-b0831fbce249:1

pdfium.js:
function instantiateAsync(binary, binaryFile, imports, callback) {
if (!binary && typeof WebAssembly.instantiateStreaming == "function" && !isDataURI(binaryFile) && !isFileURI(binaryFile) && !ENVIRONMENT_IS_NODE && typeof fetch == "function") {
return fetch(binaryFile, {
credentials: "same-origin"
}).then(function (response) {
var result = WebAssembly.instantiateStreaming(response, imports);
return result.then(callback, function (reason) {
err("wasm streaming compile failed: " + reason);
err("falling back to ArrayBuffer instantiation");
return instantiateArrayBuffer(binaryFile, imports, callback)
})
})
} else {
return instantiateArrayBuffer(binaryFile, imports, callback)
}
}

Example Code:

PdfViewer.js

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import '../../index.css';
import {
PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject
} from '@syncfusion/ej2-react-pdfviewer';

const MyPdfViewer = ({ filePath, FileName, type }) => {
return (

{/* Render the PDF Viewer */}
<PdfViewerComponent
id="container"
documentPath={"data:application/pdf;base64," + filePath}
resourceUrl={window.location.origin + "/assets/ej2-pdfviewer-lib"}
style={{ 'height': '640px' }}>

           <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
               ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]} />

       </PdfViewerComponent>
   </div>

); };

export default MyPdfViewer;

Index.js
import { registerLicense } from '@syncfusion/ej2-base';
registerLicense(process.env.REACT_APP_SYNCFUSION_LICENSE_KEY);

service-worker.js
const pdfWorkerStaticAssets = [
"./assets/ej2-pdfviewer-lib/pdfium.js",
"./assets/ej2-pdfviewer-lib/pdfium.wasm"
]

self.addEventListener('install', (event) => {
event.waitUntil(
caches.open("pdf")
.then(cache => {
return cache.addAll(pdfWorkerStaticAssets);
})
);
});

self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then((response) => {
// Cache hit - return the response from the cache
if (response) {
return response;
}
// No cache match - fetch from the network
return fetch(event.request);
})
);
});

ej2-pdfviewer-lib folder location: TestProject\public\assets\ej2-pdfviewer-lib

Documentation referred: https://ej2.syncfusion.com/react/documentation/pdfviewer/getting-started

[shaangidwani]

Any body provide the help on this please?