Download as PDF, PPTX
Uploaded byBill Stavroulakis
Getting Started with Progressive Web Apps
The document provides an overview of Progressive Web Apps (PWAs) and their benefits, emphasizing the low engagement rates of native apps and the potential for increased revenue through web apps. It outlines the essential features of PWAs, such as app-shell, HTTPS, and service workers, and presents various storage options like cookies and IndexedDB. Additionally, it includes links to demos and case studies for practical implementation guidance.
More Related Content
Similar to Getting Started with Progressive Web Apps
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
Getting Started with Progressive Web Apps
- 1. Getting Started with ProgressiveWeb Apps GDG Athens
- 2.
- 3. Goals What are ProgressiveWeb Apps? Build a very simple PWA
- 8. Why Native Appsare 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 thanhalf 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.
- 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.
- 16. Step by StepDemos https://bstavroulakis.com/pluralsight/courses/progressive-web-apps/
- 17. 4 parts git clonehttps://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-typeString Pros Simple, Configurable, Compatible Cons Less secure, Limiting, Attaches to requests, Easily deleted
- 22. HTML5 Web Storage CompatibilityEverywhere! 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 Size10-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 (VeryLimiting) HTML5 Local Storage (Limited Size) WebSQL (Deprecated) IndexedDB (Limited Support)
- 26. Storage Options Cookies (VeryLimiting) HTML5 Local Storage (Limited Size) WebSQL (Deprecated) IndexedDB (Limited Support)
- 27. The Offline JourneyBegins
- 28. Application Cache Status varappCache = 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 InterceptNetwork Requests Functional Events (fetch, push, sync) Application Cache Strict Rules Bad Versioning Cannot Update Small Areas
- 35. No DOM Access NoPage Global Script Context HTTPS Run Without a Page!! Event-driven
- 37.
- 38.
- 39.
- 41.
- 42. Network First ThenOffline Strategy
- 43. Network First ThenOffline Strategy
- 44. Offline First ThenNetwork Strategy
- 45.
- 46. Part 4 -Installable Web Apps
- 47.
- 48.
- 49.
- 50.
- 51.