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 (

<div className='control-section'> {/* 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?