pwaintroductionfordeveloper-170703105509.pdf

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

6. Service Worker Registration

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

12. Demo App (Android)

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/

15. Testing (Lighthouse)

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