{"id":2574,"date":"2021-01-08T12:42:41","date_gmt":"2021-01-08T12:42:41","guid":{"rendered":"https:\/\/ntspl.co.in\/blog\/?p=2574"},"modified":"2021-12-20T11:20:53","modified_gmt":"2021-12-20T11:20:53","slug":"best-practices-for-building-offline-apps","status":"publish","type":"post","link":"https:\/\/www.ntspl.co.in\/blog\/best-practices-for-building-offline-apps\/","title":{"rendered":"Best Practices for Building Offline Apps"},"content":{"rendered":"

It\u2019s a hard truth every software developer faces at some point: consistent Internet access is never guaranteed. WiFi is available everywhere nowadays, but service can be spotty or overloaded with connection requests (such as at large events or conferences). And, you can\u2019t stop your users from accessing your app while their connection is poor or non-existent. So as a developer, what do you do?\u00a0Embrace it.<\/em>\u00a0Tame any concerns about building offline experiences by learning the fundamentals of Offline First.<\/p>\n

Offline First<\/a>\u00a0is the software engineering principle that assumes that apps can and will be used without a network connection at some point. This is especially important if you are designing for a mobile audience, who may go offline multiple times per day. Building Offline First apps increase the utility of your app and lead to better user satisfaction.<\/p>\n

Offline First Mindset<\/h2>\n

Here are some of the things you can do to adopt an Offline First mindset.<\/p>\n

Cache early, cache often<\/h3>\n

As the old saying goes, \u201cthe early bird\u00a0caches<\/em> the worm.\u201d<\/p>\n

Bad jokes aside,\u00a0cache your content<\/a>\u00a0early and often while connections are stable to save yourself headaches when network connections are more intermittent.<\/p>\n

Caching content improves app performance since the now-local information is retrieved faster. Apps can be opened and closed while keeping their state that way as well. Check out some specific strategies for caching in the section on\u00a0Service Workers<\/em>\u00a0below.<\/p>\n

Identify the Non-Negotiable<\/h3>\n

On the flip side, some features are non-negotiable: you simply have to be connected to the internet to use them, such as location services.<\/p>\n

That\u2019s OK! Identify what features need an internet connection, then create messages or alerts informing those features\u2019 needs to users. Users will appreciate it because you\u2019ll take the guesswork out of understanding your app\u2019s limits when offline.<\/p>\n

Be Ready for Conflict<\/h3>\n

Conflicting information can be a big problem. It may not be enough to simply merge and override all changes except the last time a user was online. Users should have a clear understanding of what happens when conflict is unavoidable. Once they know their options, they can choose what works for them.<\/p>\n

There are several solutions for handling conflicting information. It is up to you if you want the user to pick and choose which version to keep or to institute a \u201clast write wins\u201d rule. No matter what you choose, the app should handle this gracefully.<\/p>\n

Know When to Apply Updates<\/h3>\n

Update too frequently and you may miss out on the benefits of being offline first. Update too slowly and you may create more conflicts than necessary and frustrate users.<\/p>\n

Knowing\u00a0what<\/em>\u00a0to update along with\u00a0when<\/em>\u00a0to update is an important consideration as well. Uploading only the most important data to your servers saves on storage and the time needed to upload.<\/p>\n

Expect the Unexpected<\/h3>\n

Users are unpredictable. While you should test for a wide variety of situations you cannot account for everything. Track what users actually do with continued testing and surveying when users are offline.<\/p>\n

One personal example is my wife borrowing e-books from the library to read on her Kindle. Since borrowed books \u201cexpire\u201d after a set rental period, she keeps her Kindle offline as long as possible to ensure that if she needs more time to finish a book, she can do so without losing access to it.<\/p>\n

I do not know if the Kindle App\u2019s developers anticipated people hanging onto books like that, but it is one example of people remaining offline as long as it takes to fit their use cases. The idea that everyone wants to constantly be online is one that should be tested against your own assumptions.<\/p>\n

Those are the concepts you need to be aware of. To put these concepts to work you\u2019ll need the right tools. Fortunately, there are a number of existing tools that make it easier for developers to program with Offline First in mind.<\/p>\n

Tools<\/h2>\n

The Network Information API<\/h3>\n

The\u00a0Network Information API<\/a>\u00a0is a critical tool for developers who want to ensure a smooth experience for users. Developers can use this API to create paths that open an app in online or offline mode from the moment a user opens the app. This cuts down on the errors a user sees when an app tries to find a connection but fails to open at all.<\/p>\n

The Network Information API even distinguishes between WiFi and Cellular networks, allowing for fine-grained control over how content is served. The API also detects changes that allow apps to continue to function as a user moves from one network connection to another (like going in and out of subway tunnels).<\/p>\n

As an example, when a user is on a slower connection, they get an alert that performance may be degraded:<\/p>\n

if<\/span> (navigator.connection.effectiveType != '4g'<\/span>) {\r\n  console<\/span>.log('slow connection!'<\/span>);\r\n  \/\/ show modal dialog warning user that video will be loaded at lower resolution<\/span>\r\n}\r\nelse<\/span> {\r\n  console<\/span>.log('ready to go!'<\/span>);\r\n  \/\/ immediate load video file<\/span>\r\n}\r\n<\/code><\/pre>\n
import<\/span> { Plugins } from<\/span> '@capacitor\/core'<\/span>;\r\n\r\nconst<\/span> { Network } = Plugins;\r\n\r\nlet<\/span> handler = Network.addListener('networkStatusChange'<\/span>, (status<\/span>) =><\/span> {\r\n  console<\/span>.log(\"Network status changed\"<\/span>, status);\r\n});\r\n\r\n\/\/ Get the current network status<\/span>\r\nlet<\/span> status = await<\/span> Network.getStatus();\r\n\r\n\/\/ Example output:<\/span>\r\n{\r\n  \"connected\"<\/span>: true<\/span>,\r\n  \"connectionType\"<\/span>: \"wifi\"<\/span>\r\n}\r\n<\/code><\/pre>\n
Monitoring the network with these two APIs is a crucial early step in making your offline experiences as smooth as possible.<\/p>\n
Service Workers<\/h3>\n
Service Workers<\/a>\u00a0let you control network requests, cache those requests, and then allow users to access cached content when offline.<\/p>\n
With the Cache API, it is simple to add resources with the built-in\u00a0add<\/em>\u00a0method. For example:<\/p>\n
const<\/span> resource = caches.add('\/styles.css'<\/span>);\r\n<\/code><\/pre>\n
or you can use\u00a0addAll<\/em>\u00a0to add multiple files, which uses a promise to ensure all the resources are cached and rejects the request if one is not loaded. For example:<\/p>\n
const<\/span> resources = caches.addAll('\/styles.css'<\/span>, '\/fonts.woff'<\/span>, 'otherdata\/'<\/span>); \r\n<\/code><\/pre>\n
An event listener can fire after the app is installed which creates a cache and loads its contents ready to be used once installation is complete:<\/p>\n
self.addEventListener('install'<\/span>, function<\/span>(event<\/span>) <\/span>{\r\n  event.waitUntil(caches.open('static-files'<\/span>)\r\n    .then(function<\/span>(cache<\/span>) <\/span>{\r\n       return<\/span> caches.addAll([\r\n         '\/css\/styles.css'<\/span>,\r\n         '\/static\/images\/'<\/span>,\r\n         '\/fonts\/fonts.woff'<\/span>\r\n       ]);\r\n    })\r\n  );\r\n }\r\n);\r\n<\/code><\/pre>\n
From there you can create additional functions that check for updates to the cached contents, delete out of date files, or add additional files as needed.<\/p>\n
Offline Storage<\/h2>\n
How you save data locally is another important consideration. There are several solutions: localStorage, IndexedDB, and Ionic Offline Storage.<\/p>\n
localStorage<\/h3>\n
localStorage<\/a>\u00a0contains built-in methods to create and store key -> value pairs. These are persisted offline and when a browser is closed. You can declare and retrieve data using\u00a0setItem<\/code>\u00a0and\u00a0getItem<\/code>. The following code sets a \u2018name\u2019 value and returns it when called.<\/p>\n
var<\/span> offlineStore = window<\/span>.localStorage;\r\nofflineStore.setItem('name'<\/span>, 'John'<\/span>);\r\nvar<\/span> name = localStorage<\/span>.getItem('name'<\/span>);\r\n<\/code><\/pre>\n
Use the\u00a0clear<\/code>\u00a0method to delete data.<\/p>\n
 localStorage<\/span>.clear('name'<\/span>);\r\n<\/code><\/pre>\n
IndexedDB<\/h3>\n
localStorage is great for storing strings, but what if you want to store more complex data like images or blobs? That\u2019s where\u00a0IndexedDB<\/a>\u00a0comes in. IndexedDB lets you create a new local database connection and map objects to the schema you provide. It requires more code than localStorage but you can take advantage of more features.<\/p>\n
When creating an IndexedDB you create a \u201cstore\u201d for your data and IndexedDB lets you go from there. Here\u2019s an example of creating an IndexedDB of books and their authors:<\/p>\n
\/\/ creates a new version of the database if needed<\/span>\r\nconst<\/span> dbName = \"books_db\"<\/span>;\r\nlet<\/span> request = window<\/span>.indexedDB.open(dbName, 1<\/span>),db,tx,store, index;\r\n\r\nrequest.onupgradeneeded = function<\/span>() <\/span>{\r\n  let<\/span> db = request.result,\r\n  store = db.createObjectStore(\"booksStore\"<\/span>, { keyPath<\/span>: \"isbn\"<\/span> }), \r\n  index = store.createIndex(\"title\"<\/span>, \"title\"<\/span>);\r\n} \r\n\r\nrequest.onsuccess = function<\/span>() <\/span>{\r\n  \/\/ db where data goes<\/span>\r\n  db = request.result;\r\n\r\n  \/\/ defines the transactions allowed<\/span>\r\n  tx = db.transaction(\"booksStore\"<\/span>, \"readwrite\"<\/span>);\r\n\r\n  \/\/ the store you create for the data that uses the 'isbn' key.<\/span>\r\n  store = tx.objectStore(\"booksStore\"<\/span>);\r\n\r\n  \/\/ an index you can use to search data<\/span>\r\n  index = store.index(\"title\"<\/span>); \r\n\r\n  \/\/ insert data<\/span>\r\n  store.put({isbn<\/span>: 1234<\/span>, title<\/span>: \"Moby Dick\"<\/span>, author<\/span>: \"Herman Melville\"<\/span>});\r\n  store.put({isbn<\/span>: 4321<\/span>, title<\/span>: \"Emma\"<\/span>, author<\/span>: \"Jane Austen\"<\/span>}); \r\n\r\n  \/\/ retrieve data<\/span>\r\n  let<\/span> book1 = store.get(1234<\/span>);\r\n  book1.onsuccess = function<\/span>() <\/span>{\r\n    console<\/span>.log(book1.result);\r\n  } \r\n\r\n  \/\/ close the database connection once the transaction has completed<\/span>\r\n  tx.oncomplete = function<\/span>() <\/span>{\r\n    db.close();\r\n  };\r\n};\r\n<\/code><\/pre>\n
Ionic\u2019s Offline Storage solution<\/h3>\n
For more advanced, robust data storage needs, check out Ionic\u2019s\u00a0Offline Storage<\/a>\u00a0solution. It\u2019s a cross-platform data storage system that works on iOS and Android and powered by SQLite (a SQL database engine). Since it provides a performance-optimized query engine and on-device data encryption (256-bit AES), it\u2019s great for data-driven apps.<\/p>\n
Since it\u2019s based on the industry-standard SQL, it\u2019s easy for developers to add to their project. For example, creating a new table then inserting initial data:<\/p>\n
this<\/span>.database.transaction((tx<\/span>) =><\/span> {\r\n  tx.executeSql('CREATE TABLE IF NOT EXISTS software (name, company)'<\/span>);\r\n  tx.executeSql('INSERT INTO software VALUES (?,?)'<\/span>, ['offline'<\/span>, \"ionic\"<\/span>]);\r\n  tx.executeSql('INSERT INTO software VALUES (?,?)'<\/span>, ['auth-connect'<\/span>, \"ionic\"<\/span>]);\r\n});\r\n<\/code><\/pre>\n
Querying data involves writing SELECT statements then looping through the data results:<\/p>\n
this<\/span>.database.transaction((tx<\/span>) =><\/span> {\r\n  tx.executeSql(\"SELECT * from software\"<\/span>, [], (tx, result<\/span>) =><\/span> {\r\n    \/\/ Rows is an array of results. Use zero-based indexing to access<\/span>\r\n    \/\/ each element in the result set: item(0), item(1), etc. <\/span>\r\n    for<\/span> (let<\/span> i = 0<\/span>; i < result.rows.length; i++) {\r\n      \/\/ { name: \"offline-storage\", company: \"ionic\", type: \"native\", version: \"2.0\" }<\/span>\r\n      console<\/span>.log(result.rows.item(i));\r\n\r\n      \/\/ ionic<\/span>\r\n      console<\/span>.log(result.rows.item(i).company);\r\n    }\r\n  });\r\n});\r\n<\/code><\/pre>\n
Availability Messages<\/h3>\n
It\u2019s important to communicate with users when their offline experience changes. Your app should be proactive about letting users know when they are online or offline. Use network event listeners to detect changes in a user\u2019s connection and send messages letting a user know that not all features may be available.<\/p>\n
The\u00a0Ionic Framework Toast Component<\/a>\u00a0is one tool that can help you set availability messages quickly and easily. Once your app detects that it is offline use a toast to notify the user:<\/p>\n
\/\/ Display a toast message if the network connection goes offline<\/span>\r\nasync<\/span> function<\/span> showOfflineToast<\/span>() <\/span>{  \r\n  const<\/span> toast = document<\/span>.createElement('ion-toast'<\/span>);  \r\n\r\n  \/\/ Display the message that the User is now offline. <\/span>\r\n  toast.message = 'The latest chat messages will appear when you are back online.'<\/span>;\r\n\r\n  \/\/ Display the toast message for 2 seconds<\/span>\r\n  toast.duration = 2000<\/span>;\r\n}\r\n<\/code><\/pre>\n
Start Building Offline Apps<\/h2>\n
Users will go offline at some point, due to intermittent network connectivity or their location (remote areas or thick-walled buildings for example). They may simply be concerned about limiting bandwidth usage to save on costs, preferring offline modes over the need for constant connection. Regardless of the reason, we must account for these scenarios.<\/p>\n
If this seems challenging to get started with Offline First, don\u2019t worry. Use the following checklist to ensure that you are on the right track when developing an Offline-First experience. Your users will thank you!<\/p>\n
    \n
  1. Are you designing for an Offline-First experience?<\/li>\n
  2. Are you checking for network connections using the Network API? What type of connections are you detecting?<\/li>\n
  3. Have you configured a service worker to serve offline content?<\/li>\n
  4. What features cannot work without an internet connection? How will you let users know what is or is not possible offline?<\/li>\n
  5. What are your storage solutions for offline content? Will you rely on localStorage or a more robust system like IndexedDB?<\/li>\n<\/ol>\n
    The post Best Practices for Building Offline Apps<\/a> appeared first on Ionic Blog<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    It\u2019s a hard truth every software developer faces at some point: consistent Internet access is never guaranteed. WiFi is available everywhere nowadays, but service can be spotty or overloaded with connection requests (such as at large events or conferences). And, you can\u2019t stop your users from accessing your app while their connection is poor or […]<\/p>\n","protected":false},"author":53,"featured_media":2604,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11],"tags":[456,455],"class_list":["post-2574","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-building-offline-apps","tag-offline-first-apps"],"acf":{"custom_meta_title":"Best Practices for Building Offline First Apps | NTSPL","meta_description":"Consistent internet connection is never guaranteed. Let's discuss the approaches that will help you to  build offline first apps with a better user experience.","meta_keyword":"building offline apps, offline first app","other_meta_tag":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n"},"_links":{"self":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/2574"}],"collection":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/comments?post=2574"}],"version-history":[{"count":6,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/2574\/revisions"}],"predecessor-version":[{"id":4408,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/2574\/revisions\/4408"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/media\/2604"}],"wp:attachment":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/media?parent=2574"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/categories?post=2574"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/tags?post=2574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Learn more about\u00a0building fast, data-driven apps here<\/a>.<\/p>\n
You can learn more by reading the\u00a0IndexedDB docs<\/a>. There are other solutions like\u00a0localForage<\/a>\u00a0which is a wrapper API for IndexedDB that aims to make it easier to work with.<\/p>\n
Another option is Capacitor\u2019s\u00a0Network API<\/a>. It extends the Network Information API to provide even more useful features for web and mobile apps, such as monitoring the network for status changes, which your app can then react to.<\/p>\n