{"id":1420,"date":"2016-09-13T15:47:55","date_gmt":"2016-09-13T15:47:55","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1420"},"modified":"2017-01-09T06:54:55","modified_gmt":"2017-01-09T06:54:55","slug":"announcing-pwa-support-in-ionic-2","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2","title":{"rendered":"Announcing PWA support in Ionic!"},"content":{"rendered":"

As you know, we’re huge fans of progressive web apps<\/a>, which are distributed with just a URL, offer an app-like experience using modern web APIs, and allow users of your app to get instant access to your app’s functionality, all without having to download your app from an app store. It’s been a top priority of ours to make PWAs<\/a> a first-class citizen right out of the box, and we are happy to let you know that the first iteration of that is now available when you create a new Ionic 1 or Ionic 2 app!
\n<\/p>\n

Building a PWA with Ionic<\/h3>\n

The two key pieces that are needed for a web app to become a progressive web app are a manifest and a service worker. Ionic now offers both of these by default with every new app that gets created!<\/p>\n

The manifest<\/a> gives the browser metadata about your app, so that when the user chooses to add your PWA to their home screen, it knows what icon to use, how the PWA should be displayed, the PWA’s name, and more. Normally, you’d have to add this yourself, but Ionic now provides a default manifest that’s already linked to the index.html and ready to go. You’ll find it in the www<\/code> folder of your Ionic project.<\/p>\n

A service worker<\/a> is a script that allows you to control how your PWA uses the network. Service workers<\/a> allow you to give your PWA functionality such as the ability to work offline, send push notifications, background sync, and more! For this first iteration of built-in PWA support in Ionic 1 and 2, we’re providing users with a blank canvas on which to build their service worker. The service worker that we now provide by default for every Ionic app is very minimal and simply adds placeholders for the appropriate events that a standard service worker emits. The goal of this is to see what the Ionic community thinks are some of the best uses for service workers, so we can use that to improve our service worker support in the near future.<\/p>\n

We also provide the service worker registration code in your index.html file.<\/p>\n

if ('serviceWorker' in navigator) {\n      navigator.serviceWorker.register('service-worker.js')\n        .then(() => console.log('service worker installed'))\n        .catch(err => console.log('Error', err));\n}\n<\/code><\/pre>\n
To enable the service worker, you can simply uncomment that registration code, and you’ll be ready to go! You’ll find the service-worker.js<\/code> file in the www<\/code> folder of your Ionic project.<\/p>\n
For examples of service workers, check out the ServiceWorker Cookbook<\/a> by Mozilla and the Google Chrome team\u2019s repo of example service workers<\/a>.<\/p>\n
We’re very excited to start supporting PWA\u2019s out of the box with Ionic and plan on steadily improving this support in the future. We are currently considering support for server-side rendering to get a blazing-fast first render and convenient hosting with the Ionic Cloud. Our service worker support will also be evolving in the near future to allow for automatic configuration of service workers. This will give your PWA offline support right out of the box, without you having to write any code.  We cannot wait to see the awesome PWAs that you build! Stay tuned to our blog and our docs<\/a> for updates!<\/p>\n","protected":false},"excerpt":{"rendered":"
As you know, we’re huge fans of progressive web apps, which are distributed with just a URL, offer an app-like experience using modern web APIs, and allow users of your app to get instant access to your app’s functionality, all without having to download your app from an app store. It’s been a top priority […]<\/p>\n","protected":false},"author":36,"featured_media":1030,"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,34,35],"class_list":["post-1420","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","tag-framework","tag-ionic","tag-ionic-2","tag-pwas","tag-service-workers"],"acf":[],"yoast_head":"\nAnnouncing PWA support in Ionic! - 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\/announcing-pwa-support-in-ionic-2\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing PWA support in Ionic!\" \/>\n<meta property=\"og:description\" content=\"As you know, we’re huge fans of progressive web apps, which are distributed with just a URL, offer an app-like experience using modern web APIs, and allow users of your app to get instant access to your app’s functionality, all without having to download your app from an app store. It’s been a top priority […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-13T15:47:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-01-09T06:54:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/what-is-pwa-img.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"940\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Justin Willis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Justinwillis96\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Justin Willis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2\"},\"author\":{\"name\":\"Justin Willis\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/55d9972c8b3e5ba54f29b041b8766d74\"},\"headline\":\"Announcing PWA support in Ionic!\",\"datePublished\":\"2016-09-13T15:47:55+00:00\",\"dateModified\":\"2017-01-09T06:54:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2\"},\"wordCount\":530,\"commentCount\":47,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/what-is-pwa-img.png\",\"keywords\":[\"Framework\",\"Ionic\",\"Ionic 2\",\"PWAs\",\"service workers\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2\",\"name\":\"Announcing PWA support in Ionic! - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/what-is-pwa-img.png\",\"datePublished\":\"2016-09-13T15:47:55+00:00\",\"dateModified\":\"2017-01-09T06:54:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/what-is-pwa-img.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/what-is-pwa-img.png\",\"width\":1400,\"height\":940,\"caption\":\"Progressive Web Apps with Ionic\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing PWA support in Ionic!\"}]},{\"@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\/55d9972c8b3e5ba54f29b041b8766d74\",\"name\":\"Justin Willis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/65499728661_017a7b09d0bed667b769_512-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/65499728661_017a7b09d0bed667b769_512-150x150.jpg\",\"caption\":\"Justin Willis\"},\"sameAs\":[\"https:\/\/x.com\/@Justinwillis96\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/justinwillis\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing PWA support in Ionic! - 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\/announcing-pwa-support-in-ionic-2","og_locale":"en_US","og_type":"article","og_title":"Announcing PWA support in Ionic!","og_description":"As you know, we’re huge fans of progressive web apps, which are distributed with just a URL, offer an app-like experience using modern web APIs, and allow users of your app to get instant access to your app’s functionality, all without having to download your app from an app store. It’s been a top priority […]","og_url":"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2","og_site_name":"Ionic Blog","article_published_time":"2016-09-13T15:47:55+00:00","article_modified_time":"2017-01-09T06:54:55+00:00","og_image":[{"width":1400,"height":940,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/what-is-pwa-img.png","type":"image\/png"}],"author":"Justin Willis","twitter_card":"summary_large_image","twitter_creator":"@Justinwillis96","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Justin Willis","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2"},"author":{"name":"Justin Willis","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/55d9972c8b3e5ba54f29b041b8766d74"},"headline":"Announcing PWA support in Ionic!","datePublished":"2016-09-13T15:47:55+00:00","dateModified":"2017-01-09T06:54:55+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2"},"wordCount":530,"commentCount":47,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/what-is-pwa-img.png","keywords":["Framework","Ionic","Ionic 2","PWAs","service workers"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2","url":"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2","name":"Announcing PWA support in Ionic! - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/what-is-pwa-img.png","datePublished":"2016-09-13T15:47:55+00:00","dateModified":"2017-01-09T06:54:55+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/what-is-pwa-img.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/what-is-pwa-img.png","width":1400,"height":940,"caption":"Progressive Web Apps with Ionic"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing PWA support in Ionic!"}]},{"@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\/55d9972c8b3e5ba54f29b041b8766d74","name":"Justin Willis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/65499728661_017a7b09d0bed667b769_512-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/65499728661_017a7b09d0bed667b769_512-150x150.jpg","caption":"Justin Willis"},"sameAs":["https:\/\/x.com\/@Justinwillis96"],"url":"https:\/\/ionic.io\/blog\/author\/justinwillis"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/what-is-pwa-img.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1420","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\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1420"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1420\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/1030"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}