Progressive Web Apps consist of a new palette of technologies such as the Web App Manifest, homescreen install support, Service Workers and the app shell. These bridge the gap between native and web apps offering new capabilities for web developers to create amazing desktop and mobile experiences.

1. Getting Started with
Progressive Web Apps
GDG Athens

2. @bstavroulakis
bstavroulakis.com
dotnetweekly.com
fullstackweekly.com
Bill Stavroulakis

3. Goals
What are Progressive Web Apps?
Build a very simple PWA

8. 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.

9. 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.

13. Case Studies
https://developers.google.com/web/showcase/

14. 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)

15. PWA Demo
https://bit.ly/pwa-car-deals

16. Step by Step Demos
https://bstavroulakis.com/pluralsight/courses/progressive-web-apps/

17. 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

18. Part 1 - App-shell

19. action1(function (value1) {
action2(value1, function(value2) {
action3(value2, function(value3) {
action4(value3, function(value4) {
// Do something with value4
});
});
});
});
Pyramid of Doom

20. Part 2 - Client-side Storage

21. Cookies
Compatibility Everywhere!
Size 4KB
Data-type String
Pros Simple, Configurable, Compatible
Cons Less secure, Limiting, Attaches to
requests, Easily deleted

22. HTML5 Web Storage
Compatibility Everywhere!
Size 2.5-5MB
Data-type String
Pros Simple, Not transmitted, Compatible
Cons Unstructured data, Slow access

23. 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

24. 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

25. Storage Options
Cookies (Very Limiting)
HTML5 Local Storage (Limited Size)
WebSQL (Deprecated)
IndexedDB (Limited Support)

26. Storage Options
Cookies (Very Limiting)
HTML5 Local Storage (Limited Size)
WebSQL (Deprecated)
IndexedDB (Limited Support)

27. The Offline Journey Begins

28. 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);

29. Part 3 - Service Worker

30. Service Worker
Separate Thread
Intercept Network Requests
Functional Events (fetch, push, sync)
Application Cache
Strict Rules
Bad Versioning
Cannot Update Small Areas

35. No DOM Access
No Page
Global Script Context
HTTPS
Run Without a Page!!
Event-driven

37. Installed/ Waiting

38. skipWaiting()

39. clients.claim()

41. Network Only Strategy

42. Network First Then Offline Strategy

43. Network First Then Offline Strategy

44. Offline First Then Network Strategy

45. Offline Only Strategy

46. Part 4 - Installable Web Apps

47. Visit Twice
Manifest.json
Meta-tag
Short_name
Start_url
144x144
Service Worker
HTTPS

48. Deeply Integrated Apps
https://www.xda-developers.com/deeply-integrated-progressive-web-apps-are-already-live-for-chrom
e-on-android/

49. App-shell
Client-side Storage
Service Worker
Manifest.json
Summary

50. http://bit.ly/2fP01mo

51. https://github.com/bstavroulakis/progressiv
e-web-apps