Progressive Web Apps – The Future of the Web World Want to know more about these lightweight web applications that replicate the look and feel of a native app. They use less space, load faster, need less data, and work even when one is offline. Read more on - https://bit.ly/2Yxcx5e

1. PWA - Progressive Web Apps
- Akhilesh Mourya and Amit Hinduja
Progressive Web Apps

2. Contents
● Introduction to PWA
● PWA Components
● PWA Mobile Experience
● PWA functioning
● PWA Development stacks
● Case Study
● Pros and Cons of PWA

3. Time Spent on Apps
How much time smartphone users spend in most popular applications?

4. App Downloads
Smartphone users downloading apps per month.

5. What is Progressive Web Apps?
PWA is a set of best practices, guidelines that allows developers to build using HTML,
CSS, and JavaScript to create a web application that functions just like a native mobile
app.

6. PWA Components
Manifest File
Service Worker
Application shell
is the minimal
HTML, CSS and
Javascript
powering a user
interface.

7. PWA Mobile Experience

8. PWA Development Stacks
React Angular Ionic
Library by facebook,
released in 2013. Used
extensively within
facebook
Framework by google.
AngularJS released in
2010, upgraded to v7
from 2016 - 2019
Wrapper for JS
frameworks. Originally
based on Angular but v4
is framework agnostic

9. Comparison
React Angular Ionic
Performance &
Speed Very High - Virtual
Dom
Very High -
matches that of
React
Slower than React
and Angular
Store
Management Redux & MobX NGRX & Redux
Depends on
framework used
Maintenance
Tedious because
of dependencies
Very easy Very tedious

10. Comparison
React Angular Ionic
Scalability Very scalable,
component
based
architecture
Very scalable,
framework and
CLI tools
Tedious because
it adds an
additional
wrapper
Stability
Very stable
Framework very
stable
Stable for hybrid
apps not
suggested for
PWA
Community
Very big
community
Very big
community
Medium

12. Journey and Size Comparison
3 months to develop with React and Redux, just 10% data usage

13. Performance

14. Performance Optimization

15. Performance Budget

16. Pros & Cons

17. Pros & Cons
PROS
● Progressive
● Responsive
● App-like
● Updated
● Secure
● Searchable
● Reactivable
● Installable
● Linkable
● Offline
CONS
● greater use of the device battery;
● not all devices support the full range of PWA
features (same speech for iOS and Android
operating systems);
● it is not possible to establish a strong
re-engagement for iOS users
● support for offline execution is however
limited;
● There is no possibility to acquire traffic from
that channel

18. DO YOU HAVE
ANY QUESTIONS?
www.systango.com
hello@systango.com
UK: +44 1253 547777
What to know more about Progressive Web Apps? Click here

19. Appendix
● Network DevTools panel
● Designing Great UIs for PWAs
● Offline Cookbook
● sw-precache page
● App shell demo
● Push Notifications
● sw-toolbox tutorial
● App shell example
● Accelerated Mobile Pages (AMP)
● web app manifest
● PWA.rocks