Offline Use - Component (In app browser)

Get Help
1

Hello,

There is a code: Fliplet.Navigate.file(fileUrl)

I am not actually sure where I got it anymore lol but it opens the in app browser that fliplet made.

If I have a cached file, and its offline, lets say a pdf - is ther a simple way to view it?

normally I have the url from the datasource (url of the file in file manager) - lets say a pdf. If I want the user to open it (online) I use: Fliplet.Navigate.file(fileUrl)

but if offline, what is an alternative?
what is a good way to store the file in cache?

2

Hi Chase,

You can use these JS API’s to download the file for offline use: Media JS APIs | Fliplet Developers Documentation

This method will return the offline/online url to the file that you can to open the file:

Hope this helps,
Deb

3

Hi Deb,

Thanks so much for your guidance! I reviewed your response and implemented the offline caching via the Fliplet Media JS APIs. I noticed that using Fliplet.Navigate.file(fileUrl) provides a full in-app browser experience when accessing files online.

When I switch to offline mode using the caching approach, am I still responsible for rendering the file? For example, I might need to generate my own UI element, such as an iframe—for instance:

<iframe src="[[blobUrl]]" style="width:100%; height:100%; border:none;"></iframe>

Is that the correct approach for offline viewing, or does Fliplet offer any built-in method to render cached files in a similar in-app browser experience?

Thanks again for your help!

4

Hi Chase,

No, we don’t have the native ability to render offline files. But we have tested pdf.js to render files in screen before and it has worked, I suggest you can try that. This should work offline and online.

See here: PDF.js - Examples

Thanks,
Deb

1 Like
5

Hello again Deb,

I’m working on a screen with dual online/offline functionality that I need to debug in offline mode. I’ve tried using Safari’s Web Inspector and reviewed console logs while online to understand the behavior, but I’m not aware of any built-in Fliplet feature that might assist with offline debugging in the Viewer app. Could you share the best methods for testing offline functionality in Fliplet Viewer on iOS?

Additionally, does the app need to be published to conduct these tests, or can I test directly in the Viewer?

Thank you for your help!

6

Hi Chase,

Unfortunately we don’t have a built in way to do this. I can offer a few suggestions for techniques we use internally:

  1. For simpler use cases we can basically output console messages to the screen itself. For e.g. you can create a HTML pre tag on the screen and output your debugging messages onto that. It’s a little cumbersome as you’d have to keep running it every time you want to make a change but it will work. See: HTML pre tag

  2. The other option is generate an android app and then use the remote chrome debugger to access the console and take it from there. see: Remote debug Android devices  |  Chrome DevTools  |  Chrome for Developers

Thanks,
Deb