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.

Getting Started with Progressive Web Apps


Published on

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.

Published in: Technology
  • Be the first to comment

Getting Started with Progressive Web Apps

  1. 1. Getting Started with Progressive Web Apps GDG Athens
  2. 2. @bstavroulakis Bill Stavroulakis
  3. 3. Goals What are Progressive Web Apps? Build a very simple PWA
  4. 4. 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.
  5. 5. 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.
  6. 6. Case Studies
  7. 7. 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)
  8. 8. PWA Demo
  9. 9. Step by Step Demos
  10. 10. 4 parts git clone 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
  11. 11. Part 1 - App-shell
  12. 12. action1(function (value1) { action2(value1, function(value2) { action3(value2, function(value3) { action4(value3, function(value4) { // Do something with value4 }); }); }); }); Pyramid of Doom
  13. 13. Part 2 - Client-side Storage
  14. 14. Cookies Compatibility Everywhere! Size 4KB Data-type String Pros Simple, Configurable, Compatible Cons Less secure, Limiting, Attaches to requests, Easily deleted
  15. 15. HTML5 Web Storage Compatibility Everywhere! Size 2.5-5MB Data-type String Pros Simple, Not transmitted, Compatible Cons Unstructured data, Slow access
  16. 16. 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
  17. 17. 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
  18. 18. Storage Options Cookies (Very Limiting) HTML5 Local Storage (Limited Size) WebSQL (Deprecated) IndexedDB (Limited Support)
  19. 19. Storage Options Cookies (Very Limiting) HTML5 Local Storage (Limited Size) WebSQL (Deprecated) IndexedDB (Limited Support)
  20. 20. The Offline Journey Begins
  21. 21. 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);
  22. 22. Part 3 - Service Worker
  23. 23. Service Worker Separate Thread Intercept Network Requests Functional Events (fetch, push, sync) Application Cache Strict Rules Bad Versioning Cannot Update Small Areas
  24. 24. No DOM Access No Page Global Script Context HTTPS Run Without a Page!! Event-driven
  25. 25. Installed/ Waiting
  26. 26. skipWaiting()
  27. 27. clients.claim()
  28. 28. Network Only Strategy
  29. 29. Network First Then Offline Strategy
  30. 30. Network First Then Offline Strategy
  31. 31. Offline First Then Network Strategy
  32. 32. Offline Only Strategy
  33. 33. Part 4 - Installable Web Apps
  34. 34. Visit Twice Manifest.json Meta-tag Short_name Start_url 144x144 Service Worker HTTPS
  35. 35. Deeply Integrated Apps e-on-android/
  36. 36. App-shell Client-side Storage Service Worker Manifest.json Summary
  37. 37.
  38. 38. e-web-apps