SlideShare a Scribd company logo
Progressive
Web
Apps with Ionic
@stevanbarry
stevanbarry.com
What is a PWA?
load like regular web pages or websites but can
offer the user functionality such as working
offline, push notifications, and device hardware
access traditionally available only to native
mobile applications.
Intro to Progressive Web App Development (using Ionic)
Why?
Google (with Microsoft joining in late)
V
Apple
Or its about building ‘an experience that feels seamless and
integrated no matter the platform or device’.
Building a PWA with Ionic
Ionic offers most of the files needed to deploy a PWA
Ionic is still free in most part - it's also very stable (version 3)
Uses open standards - opensource SDK released under a permissive MIT license.
Easy to set up via node.js and npm - $ ionic start helloWorld blank
npx create-stencil ionic-pwa
<link rel="manifest" href="/manifest.webmanifest">
<amp-install-serviceworker
src="sw.js"layout="nodisplay"></amp-install-serviceworker>
Vitals for PWAs
{
"name": "HackerWeb",
"short_name": "HackerWeb",
"start_url": ".",
"display": "standalone",
"background_color": "#fff",
"description": "A simply readable Hacker News app.",
"icons": [{
"src": "images/touch/homescreen48.png",
"sizes": "48x48",
"type": "image/png"
}],
"related_applications": [{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
}]
}
and a service worker
Intro to Progressive Web App Development (using Ionic)
https://es.goodbarber.com
Intro to Progressive Web App Development (using Ionic)

More Related Content

Intro to Progressive Web App Development (using Ionic)