{"id":3565,"date":"2020-12-18T18:30:08","date_gmt":"2020-12-18T18:30:08","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3565"},"modified":"2020-12-18T18:30:08","modified_gmt":"2020-12-18T18:30:08","slug":"best-practices-for-building-offline-apps","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps","title":{"rendered":"Best Practices for Building Offline Apps"},"content":{"rendered":"

(Photo by Jon Flobrant<\/a> on Unsplash<\/a>)<\/span><\/p>\n

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? Embrace it.<\/em> Tame any concerns about building offline experiences by learning the fundamentals of Offline First.<\/p>\n

Offline First<\/a> is 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

<\/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 caches<\/em> the worm.\u201d \ud83d\ude09<\/p>\n

Bad jokes aside, cache your content<\/a> early 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 Service Workers<\/em> below.<\/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 “last write wins” 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 what<\/em> to update along with when<\/em> to 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’s 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’ll 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 Network Information API<\/a> is 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 (navigator.connection.effectiveType != '4g') {\n  console.log('slow connection!');\n  \/\/ show modal dialog warning user that video will be loaded at lower resolution\n}\nelse {\n  console.log('ready to go!');\n  \/\/ immediate load video file\n}\n<\/code><\/pre>\n
Another option is Capacitor\u2019s Network 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
import { Plugins } from '@capacitor\/core';\n\nconst { Network } = Plugins;\n\nlet handler = Network.addListener('networkStatusChange', (status) => {\n  console.log("Network status changed", status);\n});\n\n\/\/ Get the current network status\nlet status = await Network.getStatus();\n\n\/\/ Example output:\n{\n  "connected": true,\n  "connectionType": "wifi"\n}\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> let 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 add<\/em> method. For example:<\/p>\n
const resource = caches.add('\/styles.css');\n<\/code><\/pre>\n
or you can use addAll<\/em> to 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 resources = caches.addAll('\/styles.css', '\/fonts.woff', 'otherdata\/'); \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', function(event) {\n  event.waitUntil(caches.open('static-files')\n    .then(function(cache) {\n       return caches.addAll([\n         '\/css\/styles.css',\n         '\/static\/images\/',\n         '\/fonts\/fonts.woff'\n       ]);\n    })\n  );\n }\n);\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> contains 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 setItem<\/code> and getItem<\/code>. The following code sets a ‘name’ value and returns it when called.<\/p>\n
var offlineStore = window.localStorage;\nofflineStore.setItem('name', 'John');\nvar name = localStorage.getItem('name');\n<\/code><\/pre>\n
Use the clear<\/code> method to delete data.<\/p>\n
 localStorage.clear('name');\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’s where IndexedDB<\/a> comes 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 “store” for your data and IndexedDB lets you go from there. Here’s an example of creating an IndexedDB of books and their authors:<\/p>\n
\/\/ creates a new version of the database if needed\nconst dbName = "books_db";\nlet request = window.indexedDB.open(dbName, 1),db,tx,store, index;\n\nrequest.onupgradeneeded = function() {\n  let db = request.result,\n  store = db.createObjectStore("booksStore", { keyPath: "isbn" }), \n  index = store.createIndex("title", "title");\n} \n\nrequest.onsuccess = function() {\n  \/\/ db where data goes\n  db = request.result;\n\n  \/\/ defines the transactions allowed\n  tx = db.transaction("booksStore", "readwrite");\n\n  \/\/ the store you create for the data that uses the 'isbn' key.\n  store = tx.objectStore("booksStore");\n\n  \/\/ an index you can use to search data\n  index = store.index("title"); \n\n  \/\/ insert data\n  store.put({isbn: 1234, title: "Moby Dick", author: "Herman Melville"});\n  store.put({isbn: 4321, title: "Emma", author: "Jane Austen"}); \n\n  \/\/ retrieve data\n  let book1 = store.get(1234);\n  book1.onsuccess = function() {\n    console.log(book1.result);\n  } \n\n  \/\/ close the database connection once the transaction has completed\n  tx.oncomplete = function() {\n    db.close();\n  };\n};\n<\/code><\/pre>\n
You can learn more by reading the IndexedDB docs<\/a>. There are other solutions like localForage<\/a> which is a wrapper API for IndexedDB that aims to make it easier to work with.<\/p>\n
Ionic\u2019s Offline Storage solution<\/h3>\n
For more advanced, robust data storage needs, check out Ionic\u2019s Offline Storage<\/a> solution. 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.database.transaction((tx) => {\n  tx.executeSql('CREATE TABLE IF NOT EXISTS software (name, company)');\n  tx.executeSql('INSERT INTO software VALUES (?,?)', ['offline', "ionic"]);\n  tx.executeSql('INSERT INTO software VALUES (?,?)', ['auth-connect', "ionic"]);\n});\n<\/code><\/pre>\n
Querying data involves writing SELECT statements then looping through the data results:<\/p>\n
this.database.transaction((tx) => {\n  tx.executeSql("SELECT * from software", [], (tx, result) => {\n    \/\/ Rows is an array of results. Use zero-based indexing to access\n    \/\/ each element in the result set: item(0), item(1), etc. \n    for (let i = 0; i < result.rows.length; i++) {\n      \/\/ { name: "offline-storage", company: "ionic", type: "native", version: "2.0" }\n      console.log(result.rows.item(i));\n\n      \/\/ ionic\n      console.log(result.rows.item(i).company);\n    }\n  });\n});\n<\/code><\/pre>\n
Learn more about building fast, data-driven apps here<\/a>.<\/p>\n
Availability Messages<\/h3>\n
It’s 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 Ionic Framework Toast Component<\/a> is 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\nasync function showOfflineToast() {  \n  const toast = document.createElement('ion-toast');  \n\n  \/\/ Display the message that the User is now offline. \n  toast.message = 'The latest chat messages will appear when you are back online.';\n\n  \/\/ Display the toast message for 2 seconds\n  toast.duration = 2000;\n}\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
    What tips and tricks do you use when building offline apps? Let us know below.<\/p>\n","protected":false},"excerpt":{"rendered":"
    (Photo by Jon Flobrant on Unsplash) 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 […]<\/p>\n","protected":false},"author":78,"featured_media":3568,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"1","publish_post_category":"30","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"491906","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/best-practices-for-building-offline-apps\/201507","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[121],"tags":[173,200,78],"class_list":["post-3565","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","tag-mobile","tag-offline","tag-ux"],"acf":[],"yoast_head":"\nBest Practices for Building Offline Apps - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Internet access is never guaranteed. Learn how build great offline app experiences with the Offline First approach.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Best Practices for Building Offline Apps\" \/>\n<meta property=\"og:description\" content=\"Internet access is never guaranteed. Learn how build great offline app experiences with the Offline First approach.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-18T18:30:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/12\/jon-flobrant-MSbqTMftCy0-unsplash-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Canaan Merchant\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Canaan Merchant\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps\"},\"author\":{\"name\":\"Canaan Merchant\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/322c7d50fb25b9c270ebdf16cc47ef15\"},\"headline\":\"Best Practices for Building Offline Apps\",\"datePublished\":\"2020-12-18T18:30:08+00:00\",\"dateModified\":\"2020-12-18T18:30:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps\"},\"wordCount\":1565,\"commentCount\":172,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/12\/jon-flobrant-MSbqTMftCy0-unsplash-scaled.jpg\",\"keywords\":[\"mobile\",\"offline\",\"UX\"],\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps\",\"url\":\"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps\",\"name\":\"Best Practices for Building Offline Apps - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/12\/jon-flobrant-MSbqTMftCy0-unsplash-scaled.jpg\",\"datePublished\":\"2020-12-18T18:30:08+00:00\",\"dateModified\":\"2020-12-18T18:30:08+00:00\",\"description\":\"Internet access is never guaranteed. Learn how build great offline app experiences with the Offline First approach.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/12\/jon-flobrant-MSbqTMftCy0-unsplash-scaled.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/12\/jon-flobrant-MSbqTMftCy0-unsplash-scaled.jpg\",\"width\":2560,\"height\":1707,\"caption\":\"offline-lighthouse\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Best Practices for Building Offline Apps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/322c7d50fb25b9c270ebdf16cc47ef15\",\"name\":\"Canaan Merchant\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/12\/canaan-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/12\/canaan-150x150.png\",\"caption\":\"Canaan Merchant\"},\"url\":\"https:\/\/ionic.io\/blog\/author\/canaan\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Best Practices for Building Offline Apps - Ionic Blog","description":"Internet access is never guaranteed. Learn how build great offline app experiences with the Offline First approach.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps","og_locale":"en_US","og_type":"article","og_title":"Best Practices for Building Offline Apps","og_description":"Internet access is never guaranteed. Learn how build great offline app experiences with the Offline First approach.","og_url":"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps","og_site_name":"Ionic Blog","article_published_time":"2020-12-18T18:30:08+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/12\/jon-flobrant-MSbqTMftCy0-unsplash-scaled.jpg","type":"image\/jpeg"}],"author":"Canaan Merchant","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Canaan Merchant","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps"},"author":{"name":"Canaan Merchant","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/322c7d50fb25b9c270ebdf16cc47ef15"},"headline":"Best Practices for Building Offline Apps","datePublished":"2020-12-18T18:30:08+00:00","dateModified":"2020-12-18T18:30:08+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps"},"wordCount":1565,"commentCount":172,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/12\/jon-flobrant-MSbqTMftCy0-unsplash-scaled.jpg","keywords":["mobile","offline","UX"],"articleSection":["Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps","url":"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps","name":"Best Practices for Building Offline Apps - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/12\/jon-flobrant-MSbqTMftCy0-unsplash-scaled.jpg","datePublished":"2020-12-18T18:30:08+00:00","dateModified":"2020-12-18T18:30:08+00:00","description":"Internet access is never guaranteed. Learn how build great offline app experiences with the Offline First approach.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/12\/jon-flobrant-MSbqTMftCy0-unsplash-scaled.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/12\/jon-flobrant-MSbqTMftCy0-unsplash-scaled.jpg","width":2560,"height":1707,"caption":"offline-lighthouse"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/best-practices-for-building-offline-apps#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Best Practices for Building Offline Apps"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/322c7d50fb25b9c270ebdf16cc47ef15","name":"Canaan Merchant","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/12\/canaan-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/12\/canaan-150x150.png","caption":"Canaan Merchant"},"url":"https:\/\/ionic.io\/blog\/author\/canaan"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/12\/jon-flobrant-MSbqTMftCy0-unsplash-scaled.jpg","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/78"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3565"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3565\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3568"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}