Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Progressive Web Apps for Android and iOS

768 views

Published on

Presented at Web Unleashed 2017. More info at www.fitc.ca/webu

Presented by Simon MacDonald, Adobe

Overview

Progressive Web Apps are the new hotness with Google pressing hard to make them the defacto choice for building mobile applications but what’s to be done about iOS where many of the key API’s are not supported. That’s where Apache Cordova/PhoneGap comes in by polyfilling the missing functionality. In this talk Simon will show you how to create a PWA that runs on the web, Android and iOS from a single code base. Take advantage of some new tools to easily deploy and test your PWA.

Beginning with a brief overview of Progressive Web Apps, what features make your web app progressive and which API’s you can take advantage of, Simon will discuss the availability of these API’s on various platforms, taking care not to completely dump on Apple for falling behind. No, that’s a lie, he will jokingly take Apple to task.

He will introduce Apache Cordova/PhoneGap, explaining how you can use Apache Cordova/PhoneGap to deploy a web application to Android and iOS; explaining how Cordova plugins allow us to polyfil the missing functionality on iOS.

Simon will demo a PWA running on the desktop in Chrome, Android in Chrome and as a compiled hybrid app on iOS all from the same codebase.

Objective

To introduce developers to building progressive web apps for all platforms.

Target Audience

Web application developers


Five Things Audience Members Will Learn

What are Progressive Web Apps
How to build a progressive web app
The differences between PWA’s on Chrome and Safari
How to use a single code base to target web, Android and iOS
How to deploy a PWA on iOS as an app

Published in: Technology

Building Progressive Web Apps for Android and iOS

  1. 1. Cross Platform Progressive Web Apps
  2. 2. Simon MacDonald @macdonst
  3. 3. What is a Progressive Web App?
  4. 4. “ Progressive Web Apps use modern web capabilities to deliver an app-like user experience. “ They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web's low friction at every moment.
  5. 5. “ So they're just web pages?
  6. 6. Progressive Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
  7. 7. Responsive Fits any form factor: desktop, mobile, tablet, or whatever is next.
  8. 8. Connectivity Independent Enhanced with service workers to work offline or on low-quality networks. © Google
  9. 9. App Like Feels like an app, because the app shell model separates the application functionality from application content. Content
  10. 10. Safe Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with NOT!
  11. 11. Re-engagable Makes re-engagement easy through features like push notifications.
  12. 12. Installable Allows users to add apps they find most useful to their home screen without the hassle of an app store.
  13. 13. Linkable Easily share the application via URL, does not require complex installation.
  14. 14. Discoverable Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it. // index.html <link rel="manifest" href="/manifest.json"> // manifest.json { "short_name": "AirHorner", "name": "Kinlan's AirHorner of Infamy", "icons": [ { "src": "launcher-icon-1x.png", "type": "image/png", "sizes": "48x48" }, { "src": "launcher-icon-2x.png", "type": "image/png", "sizes": "96x96" }, { "src": "launcher-icon-4x.png", "type": "image/png", "sizes": "192x192" } ], "start_url": "index.html?launcher=true" }
  15. 15. It all starts with <link rel="manifest" href="manifest.json">
  16. 16. "short_name": "PWA Test", "name": "PWA Test", "start_url": "index.html", "display": "standalone", "background_color": "#fff", "theme_color": "#2196F3", "description": "A sample PWA.", "icons": [ { "src": "img/logo-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "img/logo-512.png", "sizes": "512x512", "type": "image/png" } ] manifest.json
  17. 17. "short_name": "PWA Test", "name": "PWA Test", "start_url": "index.html", "display": "standalone", "background_color": "#fff", "theme_color": "#2196F3", "description": "A sample PWA.", "icons": [ { "src": "img/logo-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "img/logo-512.png", "sizes": "512x512", "type": "image/png" } ] manifest.json
  18. 18. "short_name": "PWA Test", "name": "PWA Test", "start_url": "index.html", "display": "standalone", "background_color": "#fff", "theme_color": "#2196F3", "description": "A sample PWA.", "icons": [ { "src": "img/logo-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "img/logo-512.png", "sizes": "512x512", "type": "image/png" } ] manifest.json
  19. 19. "short_name": "PWA Test", "name": "PWA Test", "start_url": "index.html", "display": "standalone", "background_color": "#fff", "theme_color": "#2196F3", "description": "A sample PWA.", "icons": [ { "src": "img/logo-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "img/logo-512.png", "sizes": "512x512", "type": "image/png" } ] manifest.json "short_name": "PWA Test", "name": "PWA Test", "start_url": "index.html?start=a2hs", "display": "standalone", "background_color": "#fff", "theme_color": "#2196F3", "description": "A sample PWA.", "icons": [ { "src": "img/logo-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "img/logo-512.png", "sizes": "512x512", "type": "image/png" } ]
  20. 20. "short_name": "PWA Test", "name": "PWA Test", "start_url": "index.html", "display": "standalone", "background_color": "#fff", "theme_color": "#2196F3", "description": "A sample PWA.", "icons": [ { "src": "img/logo-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "img/logo-512.png", "sizes": "512x512", "type": "image/png" } ] manifest.json
  21. 21. "short_name": "PWA Test", "name": "PWA Test", "start_url": "index.html", "display": "standalone", "background_color": "#fff", "theme_color": "#2196F3", "description": "A sample PWA.", "icons": [ { "src": "img/logo-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "img/logo-512.png", "sizes": "512x512", "type": "image/png" } ] manifest.json
  22. 22. "short_name": "PWA Test", "name": "PWA Test", "start_url": "index.html", "display": "standalone", "background_color": "#fff", "theme_color": "#2196F3", "description": "A sample PWA.", "icons": [ { "src": "img/logo-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "img/logo-512.png", "sizes": "512x512", "type": "image/png" } ] manifest.json
  23. 23. "short_name": "PWA Test", "name": "PWA Test", "start_url": "index.html", "display": "standalone", "background_color": "#fff", "theme_color": "#2196F3", "description": "A sample PWA.", "icons": [ { "src": "img/logo-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "img/logo-512.png", "sizes": "512x512", "type": "image/png" } ] manifest.json
  24. 24. App Shell Architecture
  25. 25. Service Workers “ A service worker is a script that your browser runs in the background, separate from a web page
  26. 26. Registration if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js'); }); }
  27. 27. Installation var CACHE_VERSION = 'v1'; var CACHE_LIST = ['index.html', 'css/main.css', 'js/main.js']; self.addEventListener('install', function(event) { event.waitUntil(caches.open(CACHE_VERSION) .then(function(cache) { return cache.addAll(CACHE_LIST); })); });
  28. 28. Activation self.addEventListener('activate', function(event) { console.log("service worker has been activated."); });
  29. 29. Fetch self.addEventListener('fetch', function(event) { console.log('Handling fetch event for ' + event.request.url); event.respondWith( caches.match(event.request).then(function(response) { if (response) { console.log('Found response in cache:', response); return response; } console.log('No response found in cache. Fetch from network...'); return fetch(event.request); }) ); });
  30. 30. index.html "short_name": "PWA Test", "name": "PWA Test", "start_url": "index.html", "display": "standalone", "background_color": "#fff", "theme_color": "#2196F3", "description": "A sample PWA.", "icons": [ { "src": "img/logo-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "img/logo-512.png", "sizes": "512x512", "type": "image/png" } ] manifest.json <meta name="apple-mobile-web-app-title" content="PWA Test">
  31. 31. index.html "short_name": "PWA Test", "name": "PWA Test", "start_url": "index.html", "display": "standalone", "background_color": "#fff", "theme_color": "#2196F3", "description": "A sample PWA.", "icons": [ { "src": "img/logo-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "img/logo-512.png", "sizes": "512x512", "type": "image/png" } ] manifest.json <meta name="apple-mobile-web-app-capable" content="yes">
  32. 32. index.html "short_name": "PWA Test", "name": "PWA Test", "start_url": "index.html", "display": "standalone", "background_color": "#fff", "theme_color": "#2196F3", "description": "A sample PWA.", "icons": [ { "src": "img/logo-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "img/logo-512.png", "sizes": "512x512", "type": "image/png" } ] manifest.json <meta name= "apple-mobile-web-app-status-bar-style" content="black">
  33. 33. index.html "short_name": "PWA Test", "name": "PWA Test", "start_url": "index.html", "display": "standalone", "background_color": "#fff", "theme_color": "#2196F3", "description": "A sample PWA.", "icons": [ { "src": "img/logo-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "img/logo-512.png", "sizes": "512x512", "type": "image/png" } ] manifest.json <link rel="apple-touch-icon" href="img/icons/apple-touch-icon.png">
  34. 34. index.html "short_name": "PWA Test", "name": "PWA Test", "start_url": "index.html", "display": "standalone", "background_color": "#fff", "theme_color": "#2196F3", "description": "A sample PWA.", "icons": [ { "src": "img/logo-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "img/logo-512.png", "sizes": "512x512", "type": "image/png" } ] manifest.json <link rel="apple-touch-startup-image" href="img/Default-Portrait.png">
  35. 35. phonegap-plugin-pwa
  36. 36. phonegap-plugin- service-worker
  37. 37. cordova plugin add https://github.com/phonegap/phonegap-plugin-service-worker <preference name="ServiceWorker" value="service-worker.js" /> <preference name="CacheCordovaAssets" value="false" /> cordova create myApp --template=<PATH TO ASSETS> Create an App from your assets Add the Service Worker plugin Modify config.xml cordova run ios Run your app npm install -g cordova Install the Cordova CLI
  38. 38. You're Awesome
  39. 39. The End
  40. 40. Recommended Reading (article) (book) (video) (article) Hey, Hey, Cloud Four is a PWA! Responsive Web Design Web Push Notifications Don’t use iOS meta tags irresponsibly in your Progressive Web Apps

×