{"id":1153,"date":"2016-08-11T15:48:06","date_gmt":"2016-08-11T15:48:06","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1153"},"modified":"2016-11-04T21:06:07","modified_gmt":"2016-11-04T21:06:07","slug":"building-an-ionic-app-with-offline-support-part-1","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1","title":{"rendered":"Building an Ionic App with Offline Support, Part 1"},"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>Service workers, app shell, progressive web apps\u2014anything involving offline support seems to be all the rage these days. Whether it\u2019s a new design concept or a shiny new browser feature, developers seem to have many options when it comes to adding better offline support to their apps. All of these options can be overwhelming, but it doesn\u2019t need to be that way.<\/p>\n<h3>Start with the Basics<\/h3>\n<p>While service workers and the app shell design concept are great, sometimes it\u2019s best to start with the basics. SQLite is a mature database that has been around for ages. Ionic has a great <a href=\"https:\/\/ionicframework.com\/docs\/v2\/native\/sqlite\/\">native plugin<\/a> for it, which happens to work great on iOS, Android, and Windows Phone.<br \/>\n<!--more--><\/p>\n<p>In this series, we&#8217;ll be building a weather app that is fully functional while offline. This post will walk through the steps of setting up the app and adding SQLite, so it can display data while offline. The app will pull seven days of weather data from a service and store it locally for later use. If a user opens the app without an internet connection, the app can fall back to use data collected up to seven days ago. Here\u2019s what the final product will look like:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"640\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/drewspost.png\" alt=\"weather app\" class=\"aligncenter size-full wp-image-1292 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/drewspost.png 360w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/drewspost-169x300.png 169w\" data-sizes=\"auto, (max-width: 360px) 100vw, 360px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 360px; --smush-placeholder-aspect-ratio: 360\/640;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"640\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/drewspost.png\" alt=\"weather app\" class=\"aligncenter size-full wp-image-1292\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/drewspost.png 360w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/drewspost-169x300.png 169w\" sizes=\"auto, (max-width: 360px) 100vw, 360px\" \/><\/noscript><\/p>\n<h3>Getting Started<\/h3>\n<p>The code for this weather app can be found <a href=\"https:\/\/github.com\/jgw96\/ionic-offline-demo\">here<\/a>. We will be working from the <code>part-1<\/code> branch, which contains a number of steps that are commented out. You can follow along by uncommenting the code in each step of this blog post.  Let\u2019s begin by cloning the repo and installing its dependencies:<\/p>\n<pre><code class=\"bash\">$ git clone https:\/\/github.com\/jgw96\/ionic-offline-demo.git\n$ cd ionic-offline-demo &amp;&amp; git checkout part-1\n$ npm install\n<\/code><\/pre>\n<p>We\u2019ll also need to add Ionic\u2019s <a href=\"https:\/\/ionicframework.com\/docs\/v2\/native\/sqlite\/\">SQLite<\/a> and <a href=\"http:\/\/ionicframework.com\/docs\/v2\/native\/geolocation\/\">Geolocation<\/a> plugins:<\/p>\n<pre><code class=\"bash\">$ ionic plugin add cordova-sqlite-storage\n$ ionic plugin add cordova-plugin-geolocation\n<\/code><\/pre>\n<p>Finally, if you\u2019re planning on running the demo locally, you\u2019ll need to sign up and obtain API keys for <a href=\"https:\/\/forecast.io\">forecast.io<\/a> and <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/\">Google Maps<\/a>. We\u2019ll be using these services to get weather data and translate our geolocation into friendly city and state names.<\/p>\n<h3>Using SqlStorage<\/h3>\n<p>We\u2019ll be using <a href=\"https:\/\/ionicframework.com\/docs\/v2\/native\/sqlite\/\">SQLite Ionic Native module<\/a>, a wrapper Ionic provides that makes it easier to interact with a SQLite database. Let\u2019s open up <code>home.ts<\/code> and import it:<\/p>\n<pre><code class=\"ts\">\/\/ [Step 1 - Using SQLite]\nImport { SQLite } from \u2018ionic-native\u2019;\n<\/code><\/pre>\n<h3>Creating Tables<\/h3>\n<p>Next, we need to create a table to store the forecast data we\u2019ll be saving later. Each row in this table will represent data for a particular day. When our app is initialized, or in the constructor method for our page, let\u2019s add the following query to create the table:<\/p>\n<pre><code class=\"ts\">    \/\/ [Step 2 - Creating Tables]\n    this.storage = new SQLite();\n    this.storage.openDatabase({\n      name: \u2018ionic.offline\u2019,\n      location: \u2018default\u2019\n    }).then(() =&gt; {\n      this.storage.executeSql(`create table if not exists forecasts(\n        date CHAR(5) PRIMARY KEY,\n        location CHAR(40),\n        icon CHAR(30),\n        tempCurrent INT,\n        tempMin INT,\n        tempMax INT\n      ))`, {});\n    });\n   ```\n\n\n### Saving Data\nNow that our table is created, let\u2019s write a function that will save forecast data. We will pass this function a `forecasts` object, which contains data obtained through the [forecast.io API](https:\/\/forecast.io\/):\n\n\n```ts\n  \/\/ [Step 3 - Saving Data]\n  saveForecasts = (forecasts) =&gt; {\n    let query = &quot;INSERT OR REPLACE INTO forecasts VALUES (?, ?, ?, ?, ?, ?)&quot;;\n    for (let forecast of forecasts) {\n      this.storage.executeSql(query, { forecast.date,\n                                 forecast.location,\n                                 forecast.icon,\n                                 forecast.tempCurrent,\n                                 forecast.tempMin,\n                                 forecast.tempMax });\n    }\n    return forecasts;\n  }\n\n\n<\/code><\/pre>\n<h3>Retrieving Data<\/h3>\n<p>Our weather app needs to be able to retrieve the forecast for the current day. The following function will return forecast data for the given date:<\/p>\n<pre><code class=\"ts\">  \/\/ [Step 4 - Retrieving Data]\n  getForecast(date: string) {\n    return this.storage.executeSql(&quot;SELECT * FROM forecasts WHERE date = ?&quot;, { date }).then((resp) =&gt; {\n      if (resp.res.rows.length &gt; 0) {\n        for (var i = 0; i &lt; resp.res.rows.length; i++) {\n          let item = resp.res.rows.item(i);\n          return item;\n        }\n      }\n    });\n  }\n<\/code><\/pre>\n<h3>Tying it Together<\/h3>\n<p>When the app is initialized, we now have the option to use data stored locally. If we can\u2019t retrieve local data, we can go to the network to retrieve the data. Let\u2019s check out what this looks like in code:<\/p>\n<pre><code class=\"ts\">    \/\/ [Step 5 - Tying it Together]\n    this.getForecast(this.getToday()).then((data) =&gt; {\n      if (data) {\n        \/\/ obtained forecast from database\n        this.data = data;\n      } else {\n        \/\/ could not get forecast from database, go to network\n        this.fetchForecasts();\n      }\n    });\n<\/code><\/pre>\n<p>With this added, our app will be able to display today\u2019s forecast while offline, assuming the forecast was saved earlier. Check out the <a href=\"https:\/\/github.com\/drewrygh\/ionic-offline-demo\">GitHub repo<\/a> for all of the code used to build this app.<\/p>\n<h3>Not Just About Offline Support<\/h3>\n<p>By retrieving data from a local SQLite database, rather than going to the network, we&#8217;re improving the experience for all of our users, not just the ones using our app offline. Network requests are expensive, and by preventing them, our content gets displayed more quickly. Utilizing local storage is not just about offline support; it\u2019s about performance.<\/p>\n<h3>Conclusion<\/h3>\n<p>Adding offline support to an existing app can be straightforward when you start with the basics. By utilizing <a href=\"https:\/\/ionicframework.com\/docs\/v2\/native\/sqlite\/\"> the Ionic Native SQLite module<\/a>, we not only add better offline support to our apps, we improve their performance.<\/p>\n<p>At this point, you may be wondering what happens when we can\u2019t retrieve data from the database or from the network. In the next post, we\u2019ll address this by adding a No Connection page that gives the user an option to open their network settings.<\/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. Service workers, app shell, progressive web apps\u2014anything involving offline support seems to be all the rage these days. Whether it\u2019s a new design concept or a shiny new browser feature, developers seem to have many options when it comes [&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,13,25],"class_list":["post-1153","post","type-post","status-publish","format-standard","hentry","category-all","tag-framework","tag-ionic","tag-ionic-2","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 1 - 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-1\" \/>\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 1\" \/>\n<meta property=\"og:description\" content=\"Special thanks to Ionic&#8217;s Justin Willis for updating this repo and post on November 4, 2016. Service workers, app shell, progressive web apps\u2014anything involving offline support seems to be all the rage these days. Whether it\u2019s a new design concept or a shiny new browser feature, developers seem to have many options when it comes [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-11T15:48:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-11-04T21:06:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/drewspost.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=\"5 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-1#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1\"},\"author\":{\"name\":\"Drew Rygh\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/714305e249562285d82bc73e7cee8fc1\"},\"headline\":\"Building an Ionic App with Offline Support, Part 1\",\"datePublished\":\"2016-08-11T15:48:06+00:00\",\"dateModified\":\"2016-11-04T21:06:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1\"},\"wordCount\":701,\"commentCount\":22,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/drewspost.png\",\"keywords\":[\"Framework\",\"Ionic\",\"Ionic 2\",\"Tutorials\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1\",\"url\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1\",\"name\":\"Building an Ionic App with Offline Support, Part 1 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/drewspost.png\",\"datePublished\":\"2016-08-11T15:48:06+00:00\",\"dateModified\":\"2016-11-04T21:06:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/drewspost.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/drewspost.png\",\"width\":360,\"height\":640,\"caption\":\"weather app\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1#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 1\"}]},{\"@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 1 - 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-1","og_locale":"en_US","og_type":"article","og_title":"Building an Ionic App with Offline Support, Part 1","og_description":"Special thanks to Ionic&#8217;s Justin Willis for updating this repo and post on November 4, 2016. Service workers, app shell, progressive web apps\u2014anything involving offline support seems to be all the rage these days. Whether it\u2019s a new design concept or a shiny new browser feature, developers seem to have many options when it comes [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1","og_site_name":"Ionic Blog","article_published_time":"2016-08-11T15:48:06+00:00","article_modified_time":"2016-11-04T21:06:07+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/drewspost.png"}],"author":"Drew Rygh","twitter_card":"summary_large_image","twitter_creator":"@drewrygh","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Drew Rygh","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1"},"author":{"name":"Drew Rygh","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/714305e249562285d82bc73e7cee8fc1"},"headline":"Building an Ionic App with Offline Support, Part 1","datePublished":"2016-08-11T15:48:06+00:00","dateModified":"2016-11-04T21:06:07+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1"},"wordCount":701,"commentCount":22,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/drewspost.png","keywords":["Framework","Ionic","Ionic 2","Tutorials"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1","url":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1","name":"Building an Ionic App with Offline Support, Part 1 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/drewspost.png","datePublished":"2016-08-11T15:48:06+00:00","dateModified":"2016-11-04T21:06:07+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/drewspost.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/drewspost.png","width":360,"height":640,"caption":"weather app"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/building-an-ionic-app-with-offline-support-part-1#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 1"}]},{"@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\/1153","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=1153"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1153\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}