This ppt's include history, introduction, meaning, case studies of PWA.

1. Basic Understanding of Progressive
Web Apps

2. Anjali Tanpure
Software Engineer @Niyuj
Technical Blogger on Medium
Medium: https://medium.com/@tanpure.anjali
Twitter: https://twitter.com/anjali_tanpure
LinkedIn: https://www.linkedin.com/in/anjali-tanpure-35b8b6106/

3. Agenda
1. History and Idea behind PWA
2. What is PWA ?
3. PWA Pillars
4. Why PWA ?
5. Core building blocks
6. Demo time
7. Measure Performance
8. Case Studies
9. Limitations

4. “You can write amazing Web 2.0 and Ajax apps that look exactly and behave
exactly like apps on the iPhone. There’s no SDK that you need for these apps!
You’ve got everything you need if you know how to write apps using the most
modern web standards to write amazing apps for the iPhone today.”
- Steve Jobs (2007)
Source: https://divante.com/pwabook/

5. Alex Russell, Senior Staff Software Engineer at Google, pointed out in his text
“Progressive Web Apps: Escaping Tabs Without Losing Our Soul ”, published on
Infrequently.org in July 2015.
A year later in 2016, during the Google IO conference, Eric Bidelman, Senior
Staff Developers Programs Engineer, introduced “Progressive Web Apps as a
new standard in web development".
Source: https://divante.com/pwabook/

6. Idea Behind PWA
Universality

7. Websites
Web App
Single Page Applications (SPA’s)
Responsive Web Applications
Progressive Web Applications ?

8. Web
● Can run on any device
● Quick to open and use
● Open from the browser
● Always runs in the browser
● Always runs in a tab
● Probably won’t work offline
● Might Not optimised for the
device
● Linkable
● Approach - “I use this”
Native Apps
● Usually ecosystem-specific
● Download and install
● Open from launcher/file
● [Feels like it] runs from its own
● Has its own window
● Usually works fine offline
● Powerful capabilities or system
access
● Not linkable
● Approach - “I own this”

9. PWA: The best of both worlds

11. What are Progressive Web Apps ?

12. Progressively enhance web apps
To look & feel like native apps

13. ● New software development methodology
● Combines features offered by most modern browsers with the benefits
of mobile experience
● Are a type of mobile app delivered through the web, built using
common web technologies including HTML, CSS and JavaScript
● They are intended to work on any platform that uses a standards-
compliant browser.
● Feels like an app, works like a website. Faster, lighter & personalized.

14. According to creator of the term PWA (2015) -
“These apps aren’t packaged and deployed through stores, they’re
just websites that took right vitamins.
They progressively becomes apps…”
- Russell Alex (Google)

15. How we install it ?

16. 1. It starts as a normal web page in a browser, and as a user explores the
webpage, they get the prompt if they would like to “Add to Home
Screen”
2. Once the user gives the thumbs up to this prompt, PWA gets added to
their home screen
3. Once open from the home screen, it can even hide the browser UI
controls and appear as an app
PWA now available via Google Play Store (2019)

18. Pillars transform web into an
experience that feels like a native
application.

19. Reliable Fast
Engaging Integrated
Source: https://developers.google.com/web/fundamentals

20. Why PWA ?

22. Mobile users are spending 87 % of their time in apps, versus
just 13 % on the web.
Source: https://www.comscore.com

23. Users spend 50 % of their time in one app & 97 % in their
top 10 apps.
Source: https://www.comscore.com

24. Source: https://www.comscore.com

27. No downloading from app/play store, no waiting

28. One-size-fits-all

29. Native app functionality

30. ● Access device features like camera, location etc
● Improved performance
● Easy maintainable (cost, time optimization)
● Offline functionality using service workers
● Security

31. Progressive Web App vs. Native App

32. Core Building Blocks

33. HTTPS + Service Worker + Web App Manifest = Progressive Web App

34. Web App Manifest

35. {
"lang": "en",
"dir": "ltr"
"name": "The Air Horner",
"description": "This app helps you donate to worthy causes.",
"icons": [
{ "src": "images/icon.png", "sizes": "192x192"},
{ "src": "images/icon2.png", "sizes": "512x512"} ],
"scope": ".",
"start_url": "/index.html",
"orientation": "landscape",
"theme_color": "aliceblue",
"background_color": "red",
}

37. Criteria to Add to Home Screen
● The web app is not already installed from same browser
● Meets a user engagement heuristic (currently, the user has interacted
with the domain for at least 30 seconds)
● Includes a web app manifest that includes:
○ short_name or name
○ icons must include a 192px and a 512px sized icons
○ start_url
○ display must be one of: fullscreen, standalone, or minimal-ui
● Served over HTTPS (required for service workers)
● Has registered a service worker with a fetch event handler

38. Web App
Manifest: Splash
Screen

39. Service Workers

43. ✓ Reliable and intelligent caching
✓ Background content updating
✓ Web push notifications
✓ Most attractive offline functionality to prior visited sites

44. Service worker lifecycle

45. Demo Time !

46. Implementation of PWA With Angular
1. Create the project with Angular CLI
1. Add package: ng add @angular/pwa
1. Edit the manifest file: short_name or name, display, start_url, icon
2. Edit the service worker config file: ngsw-config.json has been created
at the root of your project. In it you can specify which files to prefetch
or lazy load when downloading a version of your PWA.
3. Noticing users about updates

47. Measure Performance -Lighthouse

49. Browser Support

50. App Manifest
Source: https://caniuse.com

51. Service Workers

52. Case Studies

53. 3X
More time spent on site
+70 %
Higher conversion rate among those arriving via
Add to Homescreen
+40 %
Higher re-engagement rate
3X
Lower data usage

54. +65%
Increase in pages per session
+75 %
Increase in Tweets sent
20%
Decrease in bounce rate
30%
Average load time reduced

55. 3X
Improvement in conversion rate
+38 %
Improvement in page load times
+160 %
Increase in shopper sessions
20%
Lower the bounce rate

56. And many more…
● Filpkart-lite
● BookMyShow
● Ola
● Alibaba
● Twitter Lite
● AliExpress
● The Weather Channel
● MakeMyTrip
● Housing.com
● OLX
● Voot
● Trivago
● Pinterest

57. Limitations

58. ● Web still does not have access to full hardware of device, unlike native
apps
● Support is good in modern browsers, but do not in legacy ones
● Limited Legitimacy
● Cross Application Login Support
● App stops working if respective browsers is uninstalled or disabled
● Adds multiple icons if accessed from different browsers from same
device

59. Resources
● https://developers.google.com/web/progressive-web-apps/
● https://www.youtube.com/playlist?list=PLNYkxOF6rcIB2xHBZ7opgc2Mv009X
87Hh
● https://codelabs.developers.google.com/dev-pwa-training/
● https://medium.com/@tanpure.anjali/pwa-add-to-home-screen-from-
different-browsers-be8fd0c1be5b
● https://medium.com/@tanpure.anjali/pwa-web-push-notifications-
overview-implementation-6539cd9530ed

60. Thanks :)