getting started with progressive web apps
TRANSCRIPT
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)
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