getting started with progressive web apps

Getting Started with Progressive Web AppsGDG Athens

@bstavroulakis

bstavroulakis.comdotnetweekly.comfullstackweekly.com

Bill Stavroulakis

Goals

What are Progressive Web Apps?

Build a very simple PWA

Why Native Apps are a Gamble

● 60% of apps in the Google Play app store have never been downloaded.

● The average user downloads less than 3 apps per month. Half of US

smartphone users download zero apps per month.

● Mobile users spend most of their time in apps, but 94% of app revenue

comes from 1% of publishers, and users spend 80% of their time using just

5 apps.

● 80% of users who download an app fail to become active users.

● Worried about missing out on app store revenue? In app purchases are

where the money is at, and you can do that in your own app without

splitting costs with Apple or Google.

Meanwhile, more than half of all web traffic comes from mobile. In other words, instead of downloading your app, users are using top apps like Facebook, Instagram, and Snapchat or browsing the web.

Case Studies

https://developers.google.com/web/showcase/

Progressive Apps - Building Blocks

App-shell (Loads Instantly)

HTTPS (Safety)

App-like (Emulate Behavior, App-shell, Push Notifications)

Web (Crawlable and Discoverable)

Progressive Enhancements (Leverage Device)

Installable (Add to Homescreen)

PWA Demo

https://bit.ly/pwa-car-deals

Step by Step Demos

https://bstavroulakis.com/pluralsight/courses/progressive-web-apps/

4 parts

git clone https://github.com/bstavroulakis/progressive-web-apps/

git reset --hard

App-shell git checkout 2-webapp-structure

Client-side Storage git checkout 3-client-side-storage

Service Worker git checkout 4-service-worker

Installable Web Apps git checkout master

Part 1 - App-shell

action1(function (value1) {

action2(value1, function(value2) {

action3(value2, function(value3) {

action4(value3, function(value4) {

// Do something with value4

});

});

});

});

Pyramid of Doom

Part 2 - Client-side Storage

Cookies

Compatibility Everywhere!

Size 4KB

Data-type String

Pros Simple, Configurable, Compatible

Cons Less secure, Limiting, Attaches to requests, Easily deleted

HTML5 Web Storage

Compatibility Everywhere!

Size 2.5-5MB

Data-type String

Pros Simple, Not transmitted, Compatible

Cons Unstructured data, Slow access

WebSQL

Compatibility Chrome, Safari, Opera, Strong mobile support

Size 2.5-5MB

Data-type String

Pros Asynchronous, Great search speed

Cons Deprecated, Steep learning curve, Schema pre-defined

IndexedDB

Compatibility Modern browsers

Size 10-20% of available space (browser specific)

Data-type JS Object

Pros Asynchronous, Large dataset

Cons Steep learning curve, Complicated while implementing

Storage Options

Cookies (Very Limiting)

HTML5 Local Storage (Limited Size)

WebSQL (Deprecated)

IndexedDB (Limited Support)

Storage Options

Cookies (Very Limiting)

HTML5 Local Storage (Limited Size)

WebSQL (Deprecated)

IndexedDB (Limited Support)

The Offline Journey Begins

Application Cache Status

var appCache = window.applicationCache;

appCache.update();appCache.addEventListener('cached', handleCacheEvent, false);appCache.addEventListener('checking', handleCacheEvent, false);appCache.addEventListener('downloading', handleCacheEvent, false);appCache.addEventListener('error', handleCacheError, false);appCache.addEventListener('noupdate', handleCacheEvent, false);appCache.addEventListener('obsolete', handleCacheEvent, false);appCache.addEventListener('progress', handleCacheEvent, false);appCache.addEventListener('updateready', handleCacheEvent, false);

Part 3 - Service Worker

Service Worker

Separate Thread

Intercept Network Requests

Functional Events (fetch, push, sync)

Application Cache

Strict Rules

Bad Versioning

Cannot Update Small Areas

No DOM Access

No Page

Global Script Context

HTTPS

Run Without a Page!!

Event-driven

Installed/ Waiting

skipWaiting()

clients.claim()

Network Only Strategy

Network First Then Offline Strategy

Network First Then Offline Strategy

Offline First Then Network Strategy

Offline Only Strategy

Part 4 - Installable Web Apps

Visit Twice

Manifest.json

Meta-tag

Short_name

Start_url

144x144

Service Worker

HTTPS

Deeply Integrated Apps

https://www.xda-developers.com/deeply-integrated-progressive-web-apps-are-already-live-for-chrome-on-android/

App-shell

Client-side Storage

Service Worker

Manifest.json

Summary

http://bit.ly/2fP01mo

https://github.com/bstavroulakis/progressive-web-apps