A Design Scheme for offline applications

Offline applications store data locally while offline, and synchronize data online to servers. HTML5 provides two mechanisms: Program caching and local storage. You can use cachemanifest and indexedDB to search for related content. Each browser does not have the same support. This article attempts a feasible solution. Program cache program cache Ratio

Offline applications store data locally while offline, and synchronize data online to servers. HTML5 provides two mechanisms: Program caching and local storage. You can use cache manifest and indexedDB to search for related content. Each browser does not have the same support. This article attempts a feasible solution. Program cache program cache Ratio

Offline applications store data locally while offline, and synchronize data online to servers. HTML5 provides two mechanisms: Program caching and local storage. You can use cache manifest and indexedDB to search for related content. Each browser does not have the same support. This article attempts a feasible solution.

Program Cache

The program cache is easy to set. You only need to write a. manifest file, server space, and write it to the attributes of html elements. Some problems I encountered:

Therefore, for offline applications, I think the function of program caching is to save static files.

Local Storage and database

It is said that the browser restricts local storage to 5 MB, so we will not consider it. It mainly uses indexedDB supported by the browser to perform data operations.

Data Stream/object interaction design

View in a browser generally directly accesses data from the server. After considering offline applications, you need to add an intermediary mediator, as shown in, to eliminate the differences between online and offline views and simplify the view design. There are two implementation methods:

1. Based on the original online mode, the original data streams are split. The advantage is that the original data format, server space, and website operations are not interrupted.

2. Mainly offline. No matter online or not, the view only accesses the data of indexedDB, and replicates data between indexedDB and the server in the background.

The test cost of method 1 is higher than that of method 2. Method 1: Test the view to the server, and the view to indexedDB and indexedDB to the server. Method 2: Test the view to indexedDB and indexedDB to the server. So I chose method 2.

Data replication

Data access from a view to indexedDB is theoretically easy. In fact, there are many inexplicable points. Here we only discuss data replication. You must consider data version control.

No data has been changed before replication. The local data version is the same as the server version. The data replication process is enabled.

Someone has changed the data before the replication. The local data version is earlier than the server version. You are prompted to select how to perform data operations. I did not test this case.

The status of each piece of data in the data table needs to be considered during the replication process. The Conversion Diagram is as follows:

Summary

From the solution in this article, we can see that the difficulty of offline applications lies in the synchronization of local data and service data, website space, and browser support.