Progressive Web Apps aim to provide an app-like user experience through features like push notifications, offline support, and installation prompts while maintaining the key web-based advantages of universality, security, and lack of dependence on app stores. They work across browsers using progressive enhancement and rely on modern web APIs like service workers and the web app manifest to provide app-like functionality, falling back to support core content on all platforms through techniques like polyfilling and graceful degradation. While browser support for some features like service workers is still evolving, Progressive Web Apps aim to make high-quality web apps available to all.

1. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
in practice

2. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
linkedin.com/in/luke-romanowicz
@luke_romanowicz
Contact
Interests
Full Stack Team Leader at Divante and a core
member of Vue Storefront. Working in IT for over
8 years.
Łukasz Romanowicz
• Automation
• Testing
• DevOps
• IoT
• U.S. Motocraft

3. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Who knows what PWA is?

4. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Progressive Web Applications

5. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
• Website you can install on mobile phone
and use just like native
• Web Application you can use offline
• Apps that use push notifications
• Single Page Application
• Web Application written on top of
modern framework with serverside
rendering

6. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
The truth behind PWA
Progressive web apps use modern web APIs
along with traditional progressive enhancement
strategy to create cross-platform web applications.
These apps work everywhere and provide several
features that give them the same user experience
advantages as native apps.
- MDN web docs
"
"

7. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
How to make your app progressive?

8. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Progressive enhancement
• Emphasize core webpage content first
• Ensure all the core features work on
all target platforms
• Ensure all the core features are
performant enough on older devices
with lower bandwith

9. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
● Load the visible content first
● Make high priority content as
lightweight as possible
● Fetch less important chunks later
Content prioritizing
credits: ux.shopify.com

10. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Keep in mind target platforms APIs.
Most of the missing features can
be replaced with alternatives.
Fallbacks
source: caniuse.com

11. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
How to get them?
● Babel
● Polyfill.io
● Npm/Yarn/GitHub
Polyfills

12. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
● Use Chrome Coverage to get rid of
dead code
● Fetch unused code later (e.g. with
dynamic import)
Improving performance:
Code splitting & lazy loading

13. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
● Assets minification and compression
● Optimal formats (e.g. use SVGs raster
images whenever it’s possible)
● Use lightest libs to achieve your goal
(bundlephobia.com may help you!)
Improving performance:
minimize content

14. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
● Utilize browser storage
● Set correct cache headers for your assets
● Serve cached responses whenever possible
Improving performance:
Proper caching

15. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com

16. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Once upon a time,
there was a visionary…

17. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
source: youtube.com/watch?v=y1B2c3ZD9fk

18. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
2012
-W
ork
starts
on
Service
W
orkers
2013
-m
anifest.json
2015
(June)-PW
A
term
coined
2015
(A
pril)-Introduced
in
Chrom
e
42
2015
-FirstPW
A:airhorner.com
2015
(O
ct)-Flipcart.com
launched
2017
-W
ebAPK
&
D
esktop
PW
A
2007
(June)–
Steve
Jobs
talking
aboutthe
future
ofm
obile
apps
Short history of
native alike web apps

19. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
● Create manifest.json
● Link it on html page
● That’s it!
Installing app on desktop:
The Web App Manifest

20. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
But can I use it?
source: caniuse.com

21. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Possible fallbacks
● Safari native meta attributes
(apple-mobile-web-app-capable, apple-touch-icon)
● Hybrid Apps (native wrappers for web
apps) – e.g. React Native, Xamarin,
Ionic

22. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Offline browsing:
Service Workers
Service workers essentially act as proxy servers
that sit between web applications, the browser, and
the network (when available).
- MDN web docs
"
"
Installing service worker:
source: developers.google.com

23. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Offline browsing:
Service Workers
Precache chosen dependencies:
Consume cache with cache-first strategy:

24. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Service Workers:
Basic cache strategies
source: developers.google.com
Network-first Cache-first

25. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Service Workers:
Read more
developers.google.com/we
b/fundamentals/instant-and-
offline/offline-cookbook
developer.mozilla.org/en-U
S/docs/Web/API/Service_
Worker_API
serviceworke.rs

26. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Service Workers:
Other use cases
● Automatically update offline-ready applications
● Additional layer for interacting with users (e.g.
using push notifications)
● Browser-side load balancer
● Offline analytics

27. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Accelerate creating
Service Workers
● Workbox
● 3rd party Webpack plugins
● pwabuilder.com/serviceworker

28. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
All’s cool, but can I use it?
source: caniuse.com

29. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Possible fallback
There are no fallbacks for Service Workers
source: exacthire.com

30. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Service Workers:
Pitfalls and caveats
● Basic access authentication can’t prompt from Service Workers
● You need SSL/TLS to make it work outside your local environment
● Redirects need special care
● Service Worker updating/versioning might be tricky, especially when SW is
failing

31. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Push Notifications
Service workers essentially act as proxy servers
that sit between web applications, the browser, and
the network (when available).
- MDN web docs
"
"
source: Alexander Zlatkov @ Medium source: eventus.io

32. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Just let me know if I can use it …
source: caniuse.com

33. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Possible fallbacks
● Email Newsletter
● SMS
● Social platforms direct messages
(e.g. through Messenger)
● Customer service calls
● Analog letters

34. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Other platform-specific features:
● Geolocalization
● Gyro/accelerometer data
● Sending SMS
● Vibration
● WebGL
● Proximity sensor
● Front/Rear camera
● Direct calls
● Google Pay/Apple

35. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Proper UI is the key
source: Vuetify source: MaterialUI source: towergame.app

36. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Polytics & Restrictions
● What if, for whatever reason, your native app gets blocked from native store?
● What if one of the most popular device manufacturers gets banned from native store?
● What if you don’t want to pay fees for monetizing your mobile app?
With PWA you are not dependent on
any third parties anymore!

37. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
SUMMARY
PWA CAN BE DONE WITHOUT ANY
ADDITIONAL JAVASCRIPT

38. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Progressive Web Apps
- At best a fully functional application, at worst a responsive website
- Prioritize core content
- Don’t forget about performance
- Webpack + Babel provide backwards compatibility
- Older browsers will lack features such as Service Workers
- Always think about Graceful Degradation
- Caniuse(.com) can tell you what features a clients browser offers
@sandermangelsander@vuestofront.io

39. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Great sources of
PWA knowledge
● Progressive Web Apps section @ developers.google.com
● Progressive Web Apps section @ developer.mozilla.org
● Maximiliano Firtman @ medium - medium.com/@firt
● Chrome Dev Team @ twitter – twitter.com/@ChromiumDev

40. Progressive Web Apps in practice @luke_romanowiczlromanowicz@divante.com
Thank you for your time Łukasz Romanowicz
Team Leader & Vue Storefront Maintainer
lromanowicz@divante.com
@luke_romanowicz
@lukeromanowicz
divante.com
vuestorefront.io