Progressive Web Apps (PWAs) provide an app-like user experience on the web by making use of modern web capabilities. PWAs use a web app manifest and service workers to work offline, receive push notifications, and load quickly. The web app manifest allows developers to define how the app should appear to users, while service workers cache assets to provide an app-shell experience regardless of network availability. Tools like sw-precache and sw-toolbox help generate service worker code and implement common caching strategies. By following best practices for manifests, service workers, and other features, web apps can achieve many of the benefits of native mobile apps without needing to be installed from an app store.

1. <Title>
Progressive Web Apps
(The future of Web)
Sai Kiran Sheshagiri
Full stack developer

2. Sai Kiran Sheshagiri
@saikiran78
in/saikiran78
Ø Full stack web developer @ Neudesic LLC
Ø Specializes in .Net and NodeJS for Enterprise application development
Ø MCTS in SharePoint Development and Administration
Ø Cloud practitioner (Current focus)
About Me

3. Agenda
What is PWA?
Tooling, Strategies & Patterns
• Advantages of building a PWA
• Web app manifest
• Service Worker
• App install banners
• Background Sync
• Push notifications
Deep dive on how to build a PWA?
• Tools for building a PWA
• Strategies and patterns
• Introduction to Progressive Web App
• Overview of Web

4. Any web application that is utilizing the modern
web API's to deliver an app (native) like
experience to users
flipkart.com opened in
browser
Icon added to Home
Screen
Look ‘n’ feel of the web
app is like a mobile app
1/3 2/3 3/3
What is Progressive Web Apps (PWA)?

5. 5
Let’s begin from 90’s
Web started as sharing documents and is now evolved as a singleplatform for
business to provide their services
Types of web applications - Single page application (Gmail), Online games, Video
streams (Netflix), Screen Sharing, Video Conference and more

6. 6
Mobile – The leading medium
Business now have to concentrate on providing services in another medium (i.e. Mobile
platform) to maintain the user base and also provide continuous support to their users
Web capabilities:
Ø Responsive web design
Ø more APIs (geo-location, audio-video capture, speech recognition etc..)

7. Web application in Mobile browser VS Mobile application (native)
* Businesses do not have a choice, except to maintaining different application platforms like a
web app (responsive web app), mobile app (iOS, Android)

8. Why don’t users like Mobile Web?
Push Notifications
Payment Services
Offline capabilities
“3-second rule of the web.”
The theory is that you have about 3 seconds to capture a
visitor’s attention. Longer than that and you’ll lose them. Some say
it’s 4 seconds, and others say 2. The exact number doesn’t really
matter, the point is that you have precious little time to capture and
keep someone’s attention.

9. - GOAL is to maintain single reliable client application to provide business services
without the over head of maintaining different applications (web app, iOS app,
Android app), teams, code bases.
How do we fix this gap between Mobile Web & Mobile App?
Why not always use mobile application on mobile devices?
- Convert the web site or web application to a Progressive Web App (PWA)

10. Characteristics of PWA Network Independent
• Function without Internet
connection
Safe
• Served only on HTTPS
Discoverable
• Browsers identify PWAs
automatically
Progressive, Responsive
• User experience is enhanced
gradually based on the browser’s
capabilities.
• Page looks good on different
screen sizes
Fresh
• Always up-to-date
Re-Engageable
• Can bring users back to the app
using, for example, Push
Notifications
Linkable
• Can be shared around as plain
URLs
Installable, App-Like
• Can be stored to the home screen just
like native apps but without the extra
hassle of the App Store
• Look ’n’ feel of native application

11. The web app manifest is a simple JSON file that gives you, the developer, the
ability to control how your app appears to the user
Web App Manifest

12. Capabilities allowed by
Web App Manifest
Network Independent
• Function without Internet
connection
Safe
• Served only on HTTPS
Discoverable
• Browsers identify PWAs
automatically
Progressive, Responsive
• User experience is enhanced
gradually based on the browser’s
capabilities.
• Page looks good on different
screen sizes
Fresh
• Always up-to-date
Re-Engageable
• Can bring users back to the app
using, for example, Push
Notifications
Linkable
• Can be shared around as plain
URLs
Installable, App-Like
• Can be stored to the home screen just
like native apps but without the extra
hassle of the App Store
• Look ’n’ feel of native application

13. 1
3
Sample – Web app manifest
More information – MDN and W3 Org

14. It's essentially a JavaScript file that runs separately from the main browser thread, intercepting
network requests, caching or retrieving resources from the cache, and delivering push messages.
Service Workers

15. Capabilities allowed by
Service Worker
Network Independent
• Function without Internet
connection
Safe
• Served only on HTTPS
Discoverable
• Browsers identify PWAs
automatically
Progressive, Responsive
• User experience is enhanced
gradually based on the browser’s
capabilities.
• Page looks good on different
screen sizes
Fresh
• Always up-to-date
Re-Engageable
• Can bring users back to the app
using, for example, Push
Notifications
Linkable
• Can be shared around as plain
URLs
Installable, App-Like
• Can be stored to the home screen just
like native apps but without the extra
hassle of the App Store
• Look ’n’ feel of native application

16. Registration of a service worker
**service worker file should be at the root so as to cache all the files from the web application otherwise it will only have permissions to cache the files from the
directory where it is created.

17. Life cycle of a Service Worker

18. sw-precache and sw-toolbox
Workbox (successor for above tools)
Tools & Strategies

19. 1
9
sw-precache
Generate service worker code that handles all lifecycle events
Service Worker Precache is a module for generating a service worker that precaches
resources. It integrates with your build process. Generate service worker code that
handles all lifecycle events

20. 2
0
sw-toolbox
• Cache Only
• Network Only
• Cache, falling back to network
• Network & Cache race
• Network falling back to cache
Service Worker Toolbox provides some simple helpers for use in creating your own
service workers. Specifically, it provides common caching strategies for dynamic
content, such as API calls, third-party resources, and large or infrequently used
local resources that you don't want precached.

21. Pattern 1: Cache Only

22. Pattern 2: Network Only

23. Pattern 3: Cache, falling back to network

24. Pattern 4: Cache & Network race

25. Pattern 5: Network falling back to Cache

26. How to use these patterns with sw-toolbox?
1
2
3
4
5
Install sw-toolbox
Register a resource (s) to a pattern
Source: https://www.youtube.com/watch?v=NpVvQXEbs2M&t=317s (Jad Joubron Presenation)

27. Configuration file combining sw-precache & sw-toolbox
Documentation:
[sw-precache]: https://github.com/GoogleChromeLabs/sw-precache
[sw-toolbox]: https://github.com/GoogleChromeLabs/sw-toolbox

28. App Install banners – Criteria
Has a web app manifest file with:
- a short_name (used on the home screen)
- a name (used in the banner)
- a 144x144 png icon
- a start_url that loads
Has a service worker registered on your site.
Is served over HTTPS (a requirement for using service worker).
Is visited at least twice, with at least five minutes between visits.

29. Push Notifications
The Push API and Notification API open a whole new set of
possibilities for you to re-engage with your users.
Push and notification use different, but complementary,
‘push’ API is invoked when a server supplies information to a service
worker
A ’notification’ is the action of a service worker or web page script
showing information to a user.

30. Background Sync
Request a background sync
Progressive enhancement (periodically sync the application)
Source: https://www.youtube.com/watch?v=NpVvQXEbs2M&t=317s (Jad Joubron Presenation)

31. Lighthouse

32. Browser Support
Source - https://jakearchibald.github.io/isserviceworkerready/

33. Slack Team: https://progressive-web-apps.slack.com
Further reading
App shell architecture
Credentials API
Payments API
Labs and templates
Workbox Lab
PWA Angular (code by John Papa)
PWA Starter Template (code by Jad Joubran)
References Q & A

34. Conclusion
Source -http://whatwebcando.today

35. Thank you