Serving a local static website using Cordova?

1k Views Asked by At

We are currently starting work on a project which consists of a website, plus Apps for Android, iOS and (yes) Windows phone.

The apps are identical on all three platforms, and are relatively simple, at least in theory.

  1. They need to provide offline access to the content on the site. This is static content, so is a set of .html pages plus assets (images, css, javascript, etc.).
  2. They need to be able to periodically update the content automatically, when an internet connection is available.
  3. Any external links should open in the user's internet browser rather than within the app.
  4. The app should not display any browser 'chrome' (e.g. address bar, etc.).

It seems like Cordova is a good way to go with this (though I'm open to other suggestions). However, I'm having difficulty finding any information about how to proceed.

For point 1, the way I'd imagine it working is that the app loads some form of web view pointing to file://path/to/site/index.html. Assuming the site uses relative URLs for all internal links and assets this should be sufficient to provide a fully browsable offline version of the site. The app will ship with a static export of the current site.

For point 2, I imagined that the Cordova app would occasionally run a synchornisation process, which would essentially be a number of web requests to the website's API to find out if there is new content. It would then download any new files, placing them in the file structure referred to in point 1, overwriting existing files. (For the purposes of this question, I don't care if that temporarily puts the site in an inconsistent state.)

Point 3 sounds trivial, but I'm not sure if it is. Would target="_blank" be enough? Or a bit of JavaScript to trigger some Cordova action when the link is clicked? We control the way the HTML is generated, so we can insert additional markup for offline use, if necesssary.

Can anyone offer any advice about how to handle an automatically-updating local static site in this manner? Is it even possible?

1

There are 1 best solutions below

7
Marc On

Cordova mostly does store your html files in an app and the shows the index.html (Or an other page if you define it) in an WebView. The cool thing here is that Cordova will also provide an API to call Device APIs from JS.

Cordova does not automatically reload you html files and assets into the app. For that you would need to release a new App or you simply reload just the Data in your App and you control all of that in JavaScript.

If you do not need any Device APIs I would recommend you take a look at ServiceWorkers for caching and reloading files. With some HTML Tags you can also create a really App like behavior after pressing "Add to homescreen".

Best Regards Marc