4

Since being asked to develop a web-app for someone, I have ben thinking about the whole project. One of the main things that the frontend needs is the ability to operate offline. At first it seemed that maintaining the application offline would be easy:

  1. Important information from the database could be replicated into indexedDB.
  2. Storage API's would be useful for storing tidbits of info.
  3. the Application Cache could handle storing assets offline.

My ideas seemed solid, until I did some research. The application cache has been deprecated. Apparently, it had some issues and wasn't as great as I thought. Now it seems nearly impossible to build offline apps. Through research and thought, I have considered a few solutions, but they all have some sort of flaw.

  1. One article I read considered using localStorage for storing assets. This seems ok, I guess, as the application would be single paged, but assets such as CSS, JavaScript libraries, and images would large, and while I could compress them, it seems kind of hacky to store them as strings in localStorage.

  2. MDN pointed me to Service workers. These seem good, but also overcomplicated and their browser support just wont work for me.

  3. I considered using the File API instead of localStorage to handle assets. The problem is that the File API only seems to work with user interaction such as file upload or drag and drop which is not what I need. I would need just to write to files using JavaScript behind the scenes. Even if that, however, I would expect a performance hit especially with user with slower disks.

As you can see from my solutions one of the main factors is speed. I suppose a procedure like this could be isolated from the main application using WebWorkers, but even then, the feeling of storing files in localStorage is not a good one.

I don't believe than any of these solutions are viable ones, but I cannot be too sure. How should I go about storing assets for offline applications? Ideally, I would like mobile support, but as of now I am looking for a solution that:

  • Will not have a serious degrade on performance

and

  • Semantically looks good and does not use any hacks or bad practices.

What solutions do I have available? Are any of my above solutions decent?

James Parsons
  • 6,097
  • 12
  • 68
  • 108

1 Answers1

2

Application Cache has only just been deprecated by Firefox a couple of weeks ago, but to me it seems a rather rash move on their part as they haven't finished the replacement yet! See https://www.fxsitecompat.com/en-US/docs/2015/application-cache-api-has-been-deprecated/ and https://bugzilla.mozilla.org/show_bug.cgi?id=1204581 (in particular: "We have not shipped service workers yet, and our implementation of Cache API without service workers is not quite useful for replacing appcache yet.")

I reckon it will be at least a couple of years until AppCache is removed from browsers, and as you've discovered, right now it's your only real choice for cross-browser compatibility. As Service Workers become more mature, a wrapper will probably be developed to ease transition from AppCache to the SW equivalent. (Sounds possible, at least: Is Service Worker intended to replace or coexist with Appcache?)

Which brings me to my next point: for offline database stuff, I recommend LocalForage, Mozilla's wrapper for various offline storage options. It will choose the best available option on the user's browser, saving you the hassle of deciding. I've just used it on a project, it's really simple to use. https://mozilla.github.io/localForage/

Speed-wise you'll probably be pleasantly surprised. Even using LocalStorage (which is synchronous, so blocks execution while running) you might never notice any delay in real-world use.

Community
  • 1
  • 1
JoLoCo
  • 1,355
  • 2
  • 13
  • 23