ReactNative shell app to pre-fetch and render HTML in WebViews


(Marc) #1

Hi,
I’m trying to come with a solution to create an app and would love to hear your thoughts about it.

The main requirement is that it should be able to display different content sections which will be created in a back-office as HTML markup with some CSS styling and images, and it should be able to do it offline.

So the flow would be:

  • Start up the RN app
  • Log in user
  • Query for content metadata based on user profile
  • Receive metadata as…
[{
    id: 'section1',
    name: 'Schedule',
    icon: 'calendar',
    url: 'schedule.html'
}, {
    id: 'section2',
    name: 'Contacts',
    icon: 'user',
    url: 'contacts.html'
},
...
]
  • Download all relevant data << this is where I’m not sure which route to take

----- User could go offline now ------

  • Render menu with N navigation options
  • User navigates to contacts.html and sees a list of people with names and pictures, all loaded locally from device

So where I’m stuck is at deciding how to package and download the content data.

Should I package the whole thing in as a zip file, download it and extract in the device FS as…

  \section1
    - schedule.html
    - schedule-hero-img.png
  \section2 
    - contacts.html
    - user1.png
    - user2.png
    - user3.png
    ...  

… and then load these contents in a WebView? Would this work? (assuming images are referenced relatively)

any ideas are welcome!

thanks in advance