{"id":3023,"date":"2019-11-26T18:42:17","date_gmt":"2019-11-26T18:42:17","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3023"},"modified":"2019-11-26T18:42:17","modified_gmt":"2019-11-26T18:42:17","slug":"replacing-native-plugins-with-web-apis","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis","title":{"rendered":"Making Fetch Happen: Replacing Native Plugins with Web APIs"},"content":{"rendered":"<p>Whenever I need to add a native device feature to an Ionic app, my first instinct is to reach for a native plugin first. However, a built-in browser <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\">Web API<\/a> could be the better alternative, offering the same feature set as well as improved performance and reduced maintenance cost.<\/p>\n<h2>Web API Benefits<\/h2>\n<p>There are several benefits to using a Web API over a native plugin, including:<\/p>\n<ul>\n<li><strong>Reduce app bloat:<\/strong> By design, native plugins bring in additional code to a project, increasing app download size for your users. A Web API, however, is already available.<\/li>\n<li><strong>Increase app performance:<\/strong> Less plugin code leads to better overall performance. This is especially a factor in app startup timing, where most plugins are initialized and loaded into memory.<\/li>\n<li><strong>Reduce app maintenance:<\/strong> Web APIs are less likely to degrade over time as new mobile operating system updates are released. Browser vendors regularly ship critical security updates as well &#8211; no action required by you or your app users.<\/li>\n<li><strong>Faster development cycles:<\/strong> Less reliance on native plugins decreases the need to test on device hardware, which slows down development. That\u2019s what makes <code>ionic serve<\/code> so powerful &#8211; build your entire app locally in the browser, then test on a device towards the end of the development cycle.<\/li>\n<li><strong>Better cross-platform support:<\/strong> Web APIs make it easier to bring your app to more platforms. For example, the ability to deploy an iOS or Android app as a PWA.<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<h2>A Real World Example: Switching from File Plugin to Fetch API<\/h2>\n<p>There\u2019s an easier way to read a file on a device, which potentially replaces the need for the <a href=\"https:\/\/ionicframework.com\/docs\/native\/file\">Cordova File plugin<\/a> entirely, by using the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API\">Fetch Web API<\/a>.<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/mean-girls-fetch-happen.png\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"338\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/mean-girls-fetch-happen.png\" alt=\"\" class=\"aligncenter size-full wp-image-3027 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/mean-girls-fetch-happen.png 600w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/mean-girls-fetch-happen-300x169.png 300w\" data-sizes=\"auto, (max-width: 600px) 100vw, 600px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/338;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"338\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/mean-girls-fetch-happen.png\" alt=\"\" class=\"aligncenter size-full wp-image-3027\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/mean-girls-fetch-happen.png 600w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/mean-girls-fetch-happen-300x169.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/noscript><\/a><\/p>\n<p>This is particularly useful when paired with the Cordova Camera plugin:<\/p>\n<pre><code class=\"language-typescript\">\/\/ Capture photo using the device camera\nconst tempPhoto = await this.camera.getPicture(options);\n\n\/\/ Convert from file:\/\/ protocol to WebView safe one (avoid CORS)\nconst webSafePhoto = this.webview.convertFileSrc(tempPhoto);\n\n\/\/ Retrieve the photo image data\nconst response = await fetch(webSafePhoto);\n<\/code><\/pre>\n<p>I discovered this while building an encrypted image <a href=\"https:\/\/github.com\/ionic-team\/demo-encrypted-image-storage\">demo app<\/a>. The demo\u2019s main goal was to save an image captured from the device camera into <a href=\"https:\/\/ionicframework.com\/docs\/enterprise\/offline-storage\">Ionic Offline Storage<\/a>. The challenge was that Offline Storage required the image data to be stored as an array buffer, a data format that the Camera plugin didn\u2019t provide.<\/p>\n<p>One solution was to use the Cordova File plugin. This felt clunky and confusing to understand. To make it work, I had to use the File plugin to read the photo file into a <code>FileEntry<\/code> object, then convert it into a <code>Blob<\/code>, then into an <code>ArrayBuffer<\/code>:<\/p>\n<pre><code class=\"language-typescript\">import { File } from &#039;@ionic-native\/file\/ngx&#039;;\n\npublic async saveCameraPhoto() {\n  const options: CameraOptions = {\n      quality: 100,\n      destinationType: this.camera.DestinationType.FILE_URI,\n      encodingType: this.camera.EncodingType.JPEG,\n      mediaType: this.camera.MediaType.PICTURE\n  }\n\n  const tempPhoto = await this.camera.getPicture(options);\n\n  let fileEntry = await this.file.resolveLocalFilesystemUrl(tempPhoto) as any;\n  fileEntry.file((file) =&gt; {\n    const fileReader = new FileReader();\n\n    fileReader.onloadend = () =&gt; {\n      let blob = new Blob(&quot;image\/jpeg&quot;, fileReader.result as ArrayBuffer);\n      const imageDoc = new MutableDocument(\u201cdoc\u201d);\n      imageDoc.setBlob(\u201cblob\u201d, blob);\n\n      await this.database.save(imageDoc);\n     }\n\n    fileReader.readAsArrayBuffer(file);\n  });\n}\n<\/code><\/pre>\n<p>In contrast, using the Fetch API only required a couple of lines of code.<\/p>\n<pre><code class=\"language-typescript\">const response = await fetch(webSafePhoto);\nconst photoArrayBuffer = await response.arraybuffer();\n<\/code><\/pre>\n<p>The complete example:<\/p>\n<pre><code class=\"language-typescript\">public async takePicture() {\n  const options: CameraOptions = {\n      quality: 100,\n      destinationType: this.camera.DestinationType.FILE_URI,\n      encodingType: this.camera.EncodingType.JPEG,\n      mediaType: this.camera.MediaType.PICTURE\n  }\n\n  const tempPhoto = await this.camera.getPicture(options);\n  const webSafePhoto = this.webview.convertFileSrc(tempPhoto);\n  const response = await fetch(webSafePhoto);\n\n  \/\/ Different data response options:\n  const photoBlob = await response.blob();\n  const photoArrayBuffer = await response.arraybuffer();\n}\n<\/code><\/pre>\n<p>Cleaner, simpler code that accomplished exactly what I needed. \ud83e\udd13<\/p>\n<h2>Is a Web API the Right Choice for My App?<\/h2>\n<p>While there are many benefits to using a Web API over a native plugin, take some time to evaluate the situation based on your app\u2019s needs. Considerations include:<\/p>\n<ul>\n<li><strong>Functionality:<\/strong> Chances are high that the Web API\u2019s features will differ from the plugin\u2019s. If requirements change in the future, will the Web API be able to cover them? In my Fetch API example, it only retrieves data, so it\u2019s not a complete replacement for the File plugin. If I needed to write a File, I\u2019d go back to using the plugin.<\/li>\n<li><strong>Performance:<\/strong> Web APIs are generally very performant given they are built into the browser. It still makes sense to test as needed, though.<\/li>\n<li><strong>Platform Support:<\/strong> Is the Web API available to my users today, as well as any additional platforms I may support in the future?<\/li>\n<\/ul>\n<p>Fortunately, checking platform support is easy thanks to two sites:<\/p>\n<ul>\n<li><a href=\"https:\/\/whatwebcando.today\/\">WhatWebCanDo.Today<\/a> describes the features of all APIs available.<\/li>\n<li><a href=\"https:\/\/caniuse.com\">CanIUse.com<\/a> covers browser support for each API.<\/li>\n<\/ul>\n<p>I recommend beginning your search on <code>WhatWebCanDo.Today<\/code> to determine exactly which APIs you might leverage, then do more research on <code>CanIUse.com<\/code> to ensure the API will be available and fully supported on all of the platforms you\u2019re interested in.<\/p>\n<p>Using Fetch as an example, we can see that <a href=\"https:\/\/caniuse.com\/#feat=fetch\">it has wide support<\/a> across all browsers. As Ionic developers targeting iOS and Android, pay close attention to both iOS Safari and Android Browser support:<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/real-world-debug-caniusefetch.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1770\" height=\"784\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/real-world-debug-caniusefetch.png\" alt=\"caniuse.com - fetch\" class=\"aligncenter size-full wp-image-3024 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/real-world-debug-caniusefetch.png 1770w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/real-world-debug-caniusefetch-300x133.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/real-world-debug-caniusefetch-768x340.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/real-world-debug-caniusefetch-1024x454.png 1024w\" data-sizes=\"auto, (max-width: 1770px) 100vw, 1770px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1770px; --smush-placeholder-aspect-ratio: 1770\/784;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1770\" height=\"784\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/real-world-debug-caniusefetch.png\" alt=\"caniuse.com - fetch\" class=\"aligncenter size-full wp-image-3024\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/real-world-debug-caniusefetch.png 1770w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/real-world-debug-caniusefetch-300x133.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/real-world-debug-caniusefetch-768x340.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/real-world-debug-caniusefetch-1024x454.png 1024w\" sizes=\"auto, (max-width: 1770px) 100vw, 1770px\" \/><\/noscript><\/a><\/p>\n<p>In this case, support began in iOS 10 (10.3) and Android 5 (Chromium 76), so should be safe to use in an Ionic app.<\/p>\n<h2>Web API First<\/h2>\n<p>The uniquely powerful benefit of web-based hybrid apps is the ability to leverage both web and native technology as needed.<\/p>\n<p>While every app\u2019s needs are different, explore Web API options first before reaching for a plugin. Though not for everyone, you might be pleasantly surprised at how far they can get you. For more interesting Web API examples, check out my Ionic Native <a href=\"https:\/\/github.com\/ionic-team\/demo-encrypted-image-storage\">encrypted storage demo app<\/a>.<\/p>\n<p>What are some creative ways you\u2019ve used native web APIs recently? Or plugins you\u2019ve replaced in favor of a web API? Share your insights below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Whenever I need to add a native device feature to an Ionic app, my first instinct is to reach for a native plugin first. However, a built-in browser Web API could be the better alternative, offering the same feature set as well as improved performance and reduced maintenance cost. Web API Benefits There are several [&hellip;]<\/p>\n","protected":false},"author":62,"featured_media":3031,"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":[123],"tags":[28,79,162],"class_list":["post-3023","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-perspectives","tag-cordova","tag-performance","tag-web-api"],"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>Making Fetch Happen: Replacing Native Plugins with Web APIs - 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\/replacing-native-plugins-with-web-apis\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Making Fetch Happen: Replacing Native Plugins with Web APIs\" \/>\n<meta property=\"og:description\" content=\"Whenever I need to add a native device feature to an Ionic app, my first instinct is to reach for a native plugin first. However, a built-in browser Web API could be the better alternative, offering the same feature set as well as improved performance and reduced maintenance cost. Web API Benefits There are several [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-26T18:42:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/web-apis-img.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Matt Netkow\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dotNetkow\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matt Netkow\" \/>\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\/replacing-native-plugins-with-web-apis#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis\"},\"author\":{\"name\":\"Matt Netkow\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790\"},\"headline\":\"Making Fetch Happen: Replacing Native Plugins with Web APIs\",\"datePublished\":\"2019-11-26T18:42:17+00:00\",\"dateModified\":\"2019-11-26T18:42:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis\"},\"wordCount\":791,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/web-apis-img.png\",\"keywords\":[\"Cordova\",\"performance\",\"Web API\"],\"articleSection\":[\"Perspectives\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis\",\"url\":\"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis\",\"name\":\"Making Fetch Happen: Replacing Native Plugins with Web APIs - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/web-apis-img.png\",\"datePublished\":\"2019-11-26T18:42:17+00:00\",\"dateModified\":\"2019-11-26T18:42:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/web-apis-img.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/web-apis-img.png\",\"width\":1600,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Making Fetch Happen: Replacing Native Plugins with Web APIs\"}]},{\"@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\/93c8b2fe110f183510c6285b0de40790\",\"name\":\"Matt Netkow\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg\",\"caption\":\"Matt Netkow\"},\"sameAs\":[\"https:\/\/x.com\/dotNetkow\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/mattnetkow\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Making Fetch Happen: Replacing Native Plugins with Web APIs - 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\/replacing-native-plugins-with-web-apis","og_locale":"en_US","og_type":"article","og_title":"Making Fetch Happen: Replacing Native Plugins with Web APIs","og_description":"Whenever I need to add a native device feature to an Ionic app, my first instinct is to reach for a native plugin first. However, a built-in browser Web API could be the better alternative, offering the same feature set as well as improved performance and reduced maintenance cost. Web API Benefits There are several [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis","og_site_name":"Ionic Blog","article_published_time":"2019-11-26T18:42:17+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/web-apis-img.png","type":"image\/png"}],"author":"Matt Netkow","twitter_card":"summary_large_image","twitter_creator":"@dotNetkow","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Matt Netkow","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis"},"author":{"name":"Matt Netkow","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790"},"headline":"Making Fetch Happen: Replacing Native Plugins with Web APIs","datePublished":"2019-11-26T18:42:17+00:00","dateModified":"2019-11-26T18:42:17+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis"},"wordCount":791,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/web-apis-img.png","keywords":["Cordova","performance","Web API"],"articleSection":["Perspectives"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis","url":"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis","name":"Making Fetch Happen: Replacing Native Plugins with Web APIs - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/web-apis-img.png","datePublished":"2019-11-26T18:42:17+00:00","dateModified":"2019-11-26T18:42:17+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/web-apis-img.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/web-apis-img.png","width":1600,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/replacing-native-plugins-with-web-apis#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Making Fetch Happen: Replacing Native Plugins with Web APIs"}]},{"@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\/93c8b2fe110f183510c6285b0de40790","name":"Matt Netkow","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg","caption":"Matt Netkow"},"sameAs":["https:\/\/x.com\/dotNetkow"],"url":"https:\/\/ionic.io\/blog\/author\/mattnetkow"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/11\/web-apis-img.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3023","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\/62"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3023"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3023\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3031"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}