Written by Ramón Saquete
Índice
We are used to thinking of websites as an online medium, for which it is necessary to be connected to the Internet if we want to use it. However, since the Web started to become more mobile, there has also been a need for Web applications that can be used offline.
In a mobile device we will not always have coverage because we may be flying on an airplane, we may be abroad and not want to connect because of high fees, we may not have a data rate, or as with many tablets and laptops, we may only have WiFi and have none nearby.
Since the Webs have started to move to the world of mobile devices, the technologies that allow Webs to be used in offline mode have continued to evolve.
A Web that can function offline could have all or almost all of its content available offline and any applications or services it offers, such as a search engine or a text editor. Of course, there are functionalitieshow to buy in an online store, where to buy in an online store, how to buy in an online store, where we will have to wait until we are online However, this does not mean that while we have been offline, we have gained time filling the shopping cart, even if we have to wait for coverage to find out if everything we want is available.
In the past, we used to store information in the client by means of cookies, which do not allow us to store too much information (20 cookies of 4KiB in total) and are sent with each request and response. Another way to achieve this was with the Flash and Java plugins, for which you needed to have the plugin installed. There were also non-standard features in some browsers for local storage. However, nowadays there are many additional technologies, which are standard and do not have these problems, that really allow to implement offline Web applications, mainly, I am referring to Web Storage, Indexed DB and Application Cache.
Next I am going to make a summary of the different types of storage that we can use in the client with JavaScript. Each one is focused on achieving different objectives and has different maximum storage capacity, whose limit is defined differently in each browser and, of course, by the client’s free space.
Web Storage
Also called Dom Storage, it is divided into Local Storage, for persistent storage, and Session Storage, for storing objects that expire when the browser is closed. With this API we can store key/value type data, where the value can be a JSON object. This API is currently supported by all browsers, including IE8. Since it is the most compatible option, it is the most widespread and used when we want to store large blocks of data in which the user may be interested or that have been generated by the user.
Application Cache
This is the only specification that allows you to have completely offline Web applications. It caches pages by including a file in the HTML that indicates the files to be cached. It is similar to the browser cache, with the difference that it is only cleared by explicit command of the user or the application. It also has a JavaScript API through the applicationCache object, which is used to check the status of the Cache, as well as Cache-specific events.
This specification gives us programmers a lot of headaches to make the cache behave as we want, so much so that an alternative specification called ServiceWorker has been proposed. However, the Application Cache is supported by all browsers and in Internet Explorer from version 10 onwards.
Offline and online events
This is not a type of storagebut is a very important feature to be able to implement offline applications.When we go from online to offline, all of our products and services are the shares the user does, that can only be performed against the server, they should be stored in a queue, to be executed when it comes back online. When going online, any data that has become obsolete in the application must also be synchronized.
In order to control these situations, we have a new property called navigation.online, which will be true if we are online and false if we are not. When the status of this property changes, either the online event or the offline event is triggered.
Indexed Database
Indexes JSON objects that can be written and read quickly. Allows fast data traversal using cursors, so we can query data much faster than with Web Storage. Another advantage it has over this API is that it supports transactions. Although it has taken longer to be implemented in browsers than Web Storage, this API is currently compatible with all desktop and mobile browsers, with IE it is only supported as of version 10 and only partially.
FileSystem API
This technology is not yet standardized and can only be used from Chrome. If standardized, it will allow files to be stored within the client’s file system and linked later.
Web SQL Database
Its specification was deprecated and although many browsers support it, it is not used by Firefox or Internet Explorer. Originally it was going to allow having a SQLite database on the client and launching queries against it with JavaScript, but its specification was abandoned in favor of the NoSQL solution, which we have already discussed, IndexedDB. This was because of the overhead of programming using SQL in an OO language like JavaScript and because IndexedDB is faster. Personally, I do not agree with the abandonment of this technology, since it was the only one that allowed storing structured data.
This concludes this analysis of offline technologies, what do you think? Do you think it is worthwhile for the user to be able to use certain websites offline?
