1

I am setting up a progressive web app with PWA Builder. I need to download pdf, once I Progressive web app downloaded on the local device after disconnected internet than I check again click to the link of pdf for downloading. I tried but the PDF file doesn't download. Please suggest.

Prem Kumar
  • 11
  • 1
  • 4
  • I don't know pwabuilder, but which ServiceWorker setup did you choose? Seems like you want "Cache-first network" so that all of your files can be cached, even if never visited. But "Offline copy of pages" should have cached your file if you actually fetched it before disconnection. The other ones, not sure, "Offline page" would not, except if you did include the pdf file as a dataURI inside *offline.html*. Anyway, can you please show the actual code you are running in the ServiceWorker and how the original request to this pdf file is made. – Kaiido Dec 28 '18 at 11:10
  • Services get from https://www.pwabuilder.com/serviceworker(Offline copy with Backup offline page) ------------------------------------------------------------------------------------------------------ Used in the file "pwabuilder-sw.js": - - var precacheFiles = [ 'index.html', 'contact.html', 'about.html', 'pdf/dummy.pdf', 'img/portfolio/cake.png', 'videos/small-test.mp4' ]; – Prem Kumar Dec 28 '18 at 15:17

1 Answers1

0

First of all, I think you must have internet connection to download pdf first. Then, convert it to base64 and store inside localStorage. Once user open your web app again, check if he/she open same pdf as we stored, show it from localStorage.

Edit: I don't think you couldn't be able to cache in service worker. That's only for predefined data.

There's two more options: - websql - indexsql - pouchsql

https://www.sitepoint.com/offline-web-apps-service-workers-pouchdb/

PPShein
  • 13,309
  • 42
  • 142
  • 227
  • 1
    Never store binary files in the localStorage. This API is not meant for it. If you really want to store binary files, then use IndexedDB. Now OP is building a PWA, i.e they do use ServiceWorkers and have access to a cache. – Kaiido Dec 28 '18 at 10:57
  • I didn't say to store binary file. I said to store base64 string. – PPShein Dec 28 '18 at 11:45
  • Fetch that base64 string to convert PDF to display. – PPShein Dec 28 '18 at 12:07
  • 3
    ... You don't get it. localStorage API is meant to store a small amount of data (e.g json) and is generally limited to 10MB max for the whole domain. Store just a few big pdfs and you're screwed. Not only this, but localStorage is actually retrieved synchronously (i.e paint blocking) every time your users will load your page. All this to say again, don't use localStorage to store binary files, never. Instead use IndexedDB which can hold fairly more data, can hold binary data as is (no need for 34% bigger base64 encoding), is async and loads the resource on a per demand basis only. – Kaiido Dec 28 '18 at 13:02
  • And once again, The question at hand is about a progressive-web-app implementation and has access to ServiceWorkers and cache. i.e the ServiceWorker should cache their resources. – Kaiido Dec 28 '18 at 13:03
  • Ah, I missed that. – PPShein Dec 28 '18 at 13:44