You Don’t Need A Mobile App! Responsive Web Apps Using AWS

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Adrian HallSr. Developer Advocate, AWS Mobile

Progressive Web Apps In the Real World


50%

34%

9% 7%

Mobile App Desktop Mobile Web Tablet App

Digital MediaTime Spent on devices

comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience, June 2017


Developing Mobile Apps: Options

Native Apps Cross-Platform Native Apps

Hybrid Web Apps Hosted Web Apps


Secure Installable Shareable

Discoverable Network Agnostic Always up-to-date

Why Progressive Web Apps


Hosted Progressive Web Apps are good

ü Uses existing web frameworksü Puts an icon on the home screenü Available offlineü Acts like a mobile app

𝘹 Cross-Platform support


Core Components

Application Shell Service Worker Storage & Cache


App Shel l

v Bundled HTML, CSS & JavaScript

v Separates UI from Data

v Downloaded Once; Immediately Cached

v Loads from Cache


Nat ive Integrat ion - Manifest JSON

https://developer.mozilla.org/en-US/docs/Web/Manifest

v Chrome, Opera, Firefox, Samsung

v Simple JSON Document

v Control Native Appearance

v Defines Home Screen UI

v Defines Splash Screen, Theme, URL


Native Integration – HTML Meta


Native Integration – Device APIs

v Geolocation API

v Device Orientation

v Motion

v Fullscreen API (Android Only)

v Click to Call


Service Worker

v A Programmable Network Proxy

v Cannot access the DOM

v Responds to messages

v Has Access to IndexedDBhttps://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API


Serv ice Worker - Life Cycle

Installing

Activated

Error

Idle

Terminated

Fetch


var cacheName = 'MyPWA-1';

var filesToCache = [‘/’,‘/index.html’,‘/scripts/app.js’,‘/styles/app.css’,‘/images/logo.png’

];

self.addEventListener('install', function(e) { self.skipWaiting();e.waitUntil(

caches.open(cacheName).then(function(cache) {

return cache.addAll(filesToCache); })

);});

Service Worker - Event Listeners

Define caches

Listen for ‘install’ event

Skip waiting (auto reload)

Cache App Shell files


self.addEventListener('fetch', function(e) { var dataUrl = 'https://my.apigateway.com/v1/items';if (e.request.url.indexOf(dataUrl) > -1) {

e.respondWith( caches.open(dataCacheName).then(function(cache) {

return fetch(e.request).then(function(response){ cache.put(e.request.url, response.clone()); return response;

}); })

); } else {

e.respondWith( caches.match(e.request).then(function(response) {

return response || fetch(e.request); });

);}

});

Service Worker - Fetch & Cache Data

• Check event request URL

• Cache and Return Response

• Return Cached Response(App Shell UI)


Storage & Cache

v Local Storage is blocking & synchronous

v IndexedDb is indexed & asynchronousü Transactional Database Systemü APIs are available in Service Workersü Can be Complex

v Local Forage: https://github.com/localForage/localForage


Toolchain & Production Scalev Web Framework

§ React, Angular, Ember, etc.

v CLI / Build System§ Webpack, Grunt, Gulp, Ionic, etc.

v Libraries / Utilities§ Nativebase, LocalForge, etc.

v Cloud Services§ Amazon Cognito, Pinpoint, DynamoDB, etc.


AWS Services for Mobile Apps

Amazon Pinpoint

Amazon Cognito

AWS Device Farm

Amazon DynamoDB

Amazon S3 AWS Lambda Amazon API Gateway


AWS Mobile Hub makes it easy

• Manage multiple services as a project.

• Configure common services for best practices.

• Host your PWA easily.

• Download service constants.


Learn Morehttps://aws.amazon.com/mobile

You Don’t Need A Mobile App! Responsive Web Apps Using AWS

Documents

Transcript of You Don’t Need A Mobile App! Responsive Web Apps Using AWS