{"id":1293,"date":"2016-08-12T15:56:42","date_gmt":"2016-08-12T15:56:42","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1293"},"modified":"2016-11-04T21:05:38","modified_gmt":"2016-11-04T21:05:38","slug":"building-an-ionic-app-with-offline-support-part-2","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2","title":{"rendered":"Building an Ionic App with Offline Support, Part 2"},"content":{"rendered":"<p><em>Special thanks to Ionic&#8217;s <a href=\"https:\/\/twitter.com\/justinwillis96\">Justin Willis<\/a> for updating this repo and post on November 4, 2016.<\/em><\/p>\n<p>In the <a href=\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1\/\">previous post<\/a>, we added basic offline support to a weather app by storing data locally with <a href=\"https:\/\/ionicframework.com\/docs\/v2\/native\/sqlite\/\">the Ionic Native SQLite plugin<\/a>. However, even this can fail. There are times where we may not be able to retrieve data from the database or from the network. In this post, we\u2019ll be solving this problem by creating a friendly alert that gives the user the option to open their network settings.<br \/>\n<!--more--><\/p>\n<p>Here\u2019s what it will look like:<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"169\" height=\"300\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1-169x300.png\" alt=\"weather app\" class=\"aligncenter size-medium wp-image-1296 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1-169x300.png 169w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1-576x1024.png 576w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1.png 621w\" data-sizes=\"auto, (max-width: 169px) 100vw, 169px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 169px; --smush-placeholder-aspect-ratio: 169\/300;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"169\" height=\"300\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1-169x300.png\" alt=\"weather app\" class=\"aligncenter size-medium wp-image-1296\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1-169x300.png 169w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1-576x1024.png 576w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1.png 621w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/noscript><\/a><\/p>\n<p>This will be created by combining the <a href=\"http:\/\/ionicframework.com\/docs\/v2\/components\/#alert\">alert component<\/a> with the <a href=\"http:\/\/ionicframework.com\/docs\/v2\/native\/diagnostic\/\">Ionic Native Diagnostic plugin<\/a>. We will also be creating a reusable service that wraps Angular\u2019s HTTP module. This service will display our alert whenever an HTTP request is made and there is no internet connection available. Let\u2019s get started!<\/p>\n<h3>Creating the Alert<\/h3>\n<p>To get started, add the the <a href=\"http:\/\/ionicframework.com\/docs\/v2\/native\/diagnostic\/\">diagnostic plugin<\/a>, as well as the <a href=\"http:\/\/ionicframework.com\/docs\/v2\/native\/network\/\">network plugin<\/a>:<\/p>\n<pre><code class=\"bash\">$ ionic plugin add cordova.plugins.diagnostic\n$ ionic plugin add cordova-plugin-network-information\n<\/code><\/pre>\n<p>Next, create a new service and import the plugins we just added, along with a few Ionic and Angular modules we need:<\/p>\n<pre><code class=\"ts\">import {Injectable} from &#039;angular2\/core&#039;;\nimport {Alert, NavController} from &#039;ionic-angular&#039;;\nimport {Network, Connection} from &#039;ionic-native&#039;;\n\n\n@Injectable()\nexport class NetworkService {\n  constructor(public nav: NavController) {\n  }\n}\n<\/code><\/pre>\n<p>The <code>Injectable<\/code> decorator will allow this service to be used by the HTTP service we\u2019re going to create in the next section. Now that the service is defined, a few convenience methods can be added to it:<\/p>\n<pre><code class=\"ts\">  noConnection() {\n    return (Network.connection === &#039;none&#039;);\n  }\n\n\n  private showSettings() {\n    if (cordova.plugins.diagnostic.switchToWifiSettings) {\n      cordova.plugins.diagnostic.switchToWifiSettings();\n    } else {\n      cordova.plugins.diagnostic.switchToSettings();\n    }\n  }\n<\/code><\/pre>\n<p>Both of these functions use one of the Ionic Native plugins we added earlier. The <code>noConnection<\/code> function determines whether there is a valid internet connection available, and the <code>showSettings<\/code> function opens the phone\u2019s settings. Now that these are added, let\u2019s use them in a third method:<\/p>\n<pre><code class=\"ts\"> showNetworkAlert() {\n    let networkAlert = Alert.create({\n      title: &#039;No Internet Connection&#039;,\n      message: &#039;Please check your internet connection.&#039;,\n      buttons: [\n        {\n          text: &#039;Cancel&#039;,\n          handler: () =&gt; {}\n        },\n        {\n          text: &#039;Open Settings&#039;,\n          handler: () =&gt; {\n            networkAlert.dismiss().then(() =&gt; {\n              this.showSettings();\n            })\n          }\n        }\n      ]\n    });\n    networkAlert.present();\n  }\n<\/code><\/pre>\n<p>This simply creates a new alert with a handler that calls our <code>showSettings<\/code> function. With these three methods, our <code>NetworkService<\/code> class is complete and ready to be used.<\/p>\n<h3>Creating the HTTP Wrapper<\/h3>\n<p>It\u2019s possible to use <code>NetworkService<\/code> each time our app makes a network request; however, this would be quite tedious. Instead, let\u2019s create a new service that wraps Angular\u2019s HTTP module. Notice that we are importing a few modules from Angular and inject both the HTTP module and our <code>NetworkService<\/code> into the new service:<\/p>\n<pre><code class=\"ts\">import {Http, Request, Response, RequestOptionsArgs} from &#039;angular2\/http&#039;;\n\n\n@Injectable()\nexport class SafeHttp {\n  constructor(private http: Http, private networkService: NetworkService) {\n  }\n}\n<\/code><\/pre>\n<p>Next, copy the RESTful actions we want to use with our service and add some logic to them, so that they use the methods we added to <code>NetworkService<\/code>:<\/p>\n<pre><code class=\"ts\">  get(url: string, options?: RequestOptionsArgs) {\n    if (this.networkService.noConnection()) {\n      this.networkService.showNetworkAlert();\n    } else { return this.http.get(url, options) }\n  }\n\n\n  post(url: string, body: string, options?: RequestOptionsArgs) {\n    if (this.networkService.noConnection()) {\n      this.networkService.showNetworkAlert();\n    } else { return this.http.post(url, body, options) }\n  }\n\n\n...\n<\/code><\/pre>\n<p>This will show our alert only when there is no connection available, and will otherwise pass the request to the HTTP module. We can repeat this pattern for the other RESTful actions.<\/p>\n<p>Now, let\u2019s use this service in our app!<\/p>\n<h3>Using our HTTP Wrapper<\/h3>\n<p>First we need to add our services to our <code>ngModule<\/code>:<\/p>\n<pre><code class=\"ts\">import { SafeHttp, NetworkService } from &#039;.\/safe-http&#039;;\n\n\n@NgModule({\n  \u2026\n  \u2026\n  \u2026\n  Providers: [SafeHttp, NetworkService]\n})\n<\/code><\/pre>\n<p>Then to use our HTTP wrapper service, import it into our page:<\/p>\n<pre><code class=\"ts\">import { Page } from &#039;ionic-angular&#039;;\nimport { SafeHttp, NetworkService } from &#039;.\/safe-http&#039;;\n\n\n@Page({\n  templateUrl: &#039;my-page.html&#039;,\n})\nexport class MyPage {\n  constructor(public safeHttp: SafeHttp) {\n  }\n}\n<\/code><\/pre>\n<p>Now, we can use it just as we would the regular HTTP module:<\/p>\n<pre><code class=\"ts\">  makeNetworkRequest() {\n      this.safeHttp.get(&#039;http:\/\/localhost:8100&#039;)    \n  }\n<\/code><\/pre>\n<h3>Conclusion<\/h3>\n<p>Certain parts of our apps may always require an internet connection, but it\u2019s not safe to assume that the user will always have one. Part of crafting a great UX involves handling cases in which things go wrong in an elegant way. By combining the <a href=\"http:\/\/ionicframework.com\/docs\/v2\/components\/#alert\">alert component<\/a> with the <a href=\"http:\/\/ionicframework.com\/docs\/v2\/native\/diagnostic\/\">Ionic Native Diagnostic<\/a> to present a friendly message, we can do just that.<\/p>\n<p>Check out the <a href=\"https:\/\/github.com\/jgw96\/ionic-offline-demo\">code<\/a> on GitHub and let us know how it goes!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Special thanks to Ionic&#8217;s Justin Willis for updating this repo and post on November 4, 2016. In the previous post, we added basic offline support to a weather app by storing data locally with the Ionic Native SQLite plugin. However, even this can fail. There are times where we may not be able to retrieve [&hellip;]<\/p>\n","protected":false},"author":38,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[23,3,27,25],"class_list":["post-1293","post","type-post","status-publish","format-standard","hentry","category-all","tag-framework","tag-ionic","tag-ionic-native","tag-tutorials"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Building an Ionic App with Offline Support, Part 2 - Ionic Blog<\/title>\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\/building-an-ionic-app-with-offline-support-part-2\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building an Ionic App with Offline Support, Part 2\" \/>\n<meta property=\"og:description\" content=\"Special thanks to Ionic&#8217;s Justin Willis for updating this repo and post on November 4, 2016. In the previous post, we added basic offline support to a weather app by storing data locally with the Ionic Native SQLite plugin. However, even this can fail. There are times where we may not be able to retrieve [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-12T15:56:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-11-04T21:05:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1-169x300.png\" \/>\n<meta name=\"author\" content=\"Drew Rygh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@drewrygh\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Drew Rygh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2\"},\"author\":{\"name\":\"Drew Rygh\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/714305e249562285d82bc73e7cee8fc1\"},\"headline\":\"Building an Ionic App with Offline Support, Part 2\",\"datePublished\":\"2016-08-12T15:56:42+00:00\",\"dateModified\":\"2016-11-04T21:05:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2\"},\"wordCount\":543,\"commentCount\":10,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1-169x300.png\",\"keywords\":[\"Framework\",\"Ionic\",\"Ionic Native\",\"Tutorials\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2\",\"url\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2\",\"name\":\"Building an Ionic App with Offline Support, Part 2 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1-169x300.png\",\"datePublished\":\"2016-08-12T15:56:42+00:00\",\"dateModified\":\"2016-11-04T21:05:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1.png\",\"width\":621,\"height\":1104,\"caption\":\"weather app\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building an Ionic App with Offline Support, Part 2\"}]},{\"@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\/714305e249562285d82bc73e7cee8fc1\",\"name\":\"Drew Rygh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8fb526de36a76cd48619dec3220c5bd1facfc89c55fe1df0df08264ce94d66a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8fb526de36a76cd48619dec3220c5bd1facfc89c55fe1df0df08264ce94d66a2?s=96&d=mm&r=g\",\"caption\":\"Drew Rygh\"},\"sameAs\":[\"https:\/\/x.com\/drewrygh\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/drew\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building an Ionic App with Offline Support, Part 2 - Ionic Blog","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\/building-an-ionic-app-with-offline-support-part-2","og_locale":"en_US","og_type":"article","og_title":"Building an Ionic App with Offline Support, Part 2","og_description":"Special thanks to Ionic&#8217;s Justin Willis for updating this repo and post on November 4, 2016. In the previous post, we added basic offline support to a weather app by storing data locally with the Ionic Native SQLite plugin. However, even this can fail. There are times where we may not be able to retrieve [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2","og_site_name":"Ionic Blog","article_published_time":"2016-08-12T15:56:42+00:00","article_modified_time":"2016-11-04T21:05:38+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1-169x300.png"}],"author":"Drew Rygh","twitter_card":"summary_large_image","twitter_creator":"@drewrygh","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Drew Rygh","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2"},"author":{"name":"Drew Rygh","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/714305e249562285d82bc73e7cee8fc1"},"headline":"Building an Ionic App with Offline Support, Part 2","datePublished":"2016-08-12T15:56:42+00:00","dateModified":"2016-11-04T21:05:38+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2"},"wordCount":543,"commentCount":10,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1-169x300.png","keywords":["Framework","Ionic","Ionic Native","Tutorials"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2","url":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2","name":"Building an Ionic App with Offline Support, Part 2 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1-169x300.png","datePublished":"2016-08-12T15:56:42+00:00","dateModified":"2016-11-04T21:05:38+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/weather-app-offline-1.png","width":621,"height":1104,"caption":"weather app"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-2#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Building an Ionic App with Offline Support, Part 2"}]},{"@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\/714305e249562285d82bc73e7cee8fc1","name":"Drew Rygh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8fb526de36a76cd48619dec3220c5bd1facfc89c55fe1df0df08264ce94d66a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8fb526de36a76cd48619dec3220c5bd1facfc89c55fe1df0df08264ce94d66a2?s=96&d=mm&r=g","caption":"Drew Rygh"},"sameAs":["https:\/\/x.com\/drewrygh"],"url":"https:\/\/ionic.io\/blog\/author\/drew"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1293","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\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1293"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1293\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}