Introduction to Progressive Web Apps (PWA)
Download as ODP, PDF0 likes1,525 views
Progressive Web Apps (PWA) allow web applications to have app-like capabilities by being installable, load quickly, and work offline or on low quality networks. PWAs use service workers to cache assets and API responses so that the app is able to function with limited or no network connection. Other features of PWAs include being responsive and being able to re-engage users with push notifications. The document provides an overview of PWAs and their capabilities as well as links to learn more and examples of existing PWA implementations.
Ad
More Related Content
What's hot (20)
Similar to Introduction to Progressive Web Apps (PWA) (20)
Ad
Recently uploaded (20)
Ad
Introduction to Progressive Web Apps (PWA)
- 1. Progressive Web Apps (PWA) An Introduction By: Sandip Nirmal [email protected]
- 2. Contents ● Web Application ● Progressive Web App ● Taking App Offline ● Making app installable ● App Demo ● Browser Support, etc
- 3. Web Application “Web application or web app is a client–server software application in which the client (or user interface) runs in a web browser” - Wikipedia ● Connectivity Dependant ● Non installable
- 4. Progressive Web App ● Offline first ● Installable ● Safe ● Responsive ● Re-engageable ● App-like ● etc
- 5. Taking App Offline ● Service Worker are ● event-driven script contexts that run at an origin. ● Sits in between origin and internet ● Acts as a proxy ● Caches API are ● New Storage API ● Can store any content (served over the web) ● Developer has entire control over it
- 7. Service Worker events (install)
- 8. Service Worker events (fetch)
- 9. Service Worker events (fetch)
- 10. Service Worker events (activate)
- 11. App Installation ● App manifest ● App icons ● App orientation
- 13. Demo App (iOS)
- 14. Browser Support ● Chrome - Desktop and Mobile (Android) ● Firefox - Desktop and Mobile (Android) ● Microsoft Edge - Windows desktop and Mobile (Under Development) ● Opera - Desktop and Mobile (Android) ● Safari - MacOS and iOS (Under consideration) ● https://jakearchibald.github.io/isserviceworkerready/
- 16. Why PWA ● 55% of entire web traffic is from mobile devices ● Browser supports native features (https://whatwebcando.today/) ● Reduced development efforts Current (web/desktop + android + iOS + windows) With PWA (PWA & iOS)
- 17. References (Getting Started) ● https://www.udacity.com/course/offline-web-applications--ud899 (Free course) ● https://developers.google.com/web/progressive-web-apps/ ● https://jakearchibald.com/2014/offline-cookbook ●Example Apps https://pwa.rocks/ https://www.chromestatus.com https://flipkart.com https://housing.com
- 18. THANK YOU Demo App : https://sandipnirmal.github.io/weather-app-PWA Code Repo: https://www.github.com/sandipnirmal/weather-app-PWA
Editor's Notes
- #4: Web Applications traditionally assume that the network is reachable. HTML documents are loaded over HTTP and traditionally fetch all of their sub-resources via subsequent HTTP requests. This places web content at a disadvantage versus other technology stacks.
- #5: Connectivity independent Installable Other features can be found on https://developers.google.com/web/progressive-web-apps/checklist
- #15: Opera is built on Chrome’s engine blink Safari added features in iOS 4, hasn’t picked pace from then on Steve Jobs wanted all iPhone apps to be built using Web technology (before App Store)
- #16: Lighthouse - PWA testing tool (Chrome extension) Validates all aspects of PWA
- #17: Mobile first websites There is no guarantee of network App Store free distribution. (No loss of 30% app revenue) Need to implement payment gateway on our own.