WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive...
Transcript of WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive...
![Page 1: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/1.jpg)
O F F L I N E - F I R S T D E S I G N &
W E B C O M P O N E N T S
A M A H D Y A B D E L A Z I Z W W W . A M A H D Y . N E T
@ A M A H D Y 7
![Page 2: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/2.jpg)
![Page 3: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/3.jpg)
Massive Tech. Specs
• 88 Gigabyte of RAM
• Multi-Hexa Processor
• 2 Tera Pixel Camera
• Convertible into white Goblin
![Page 4: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/4.jpg)
![Page 5: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/5.jpg)
€ 1 0 0 0
![Page 6: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/6.jpg)
USER
![Page 7: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/7.jpg)
T E C H S P E C S
V S . U S A B I L I T Y
D E S I G N N O T E # 0 0
![Page 8: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/8.jpg)
A M A Z O N
![Page 9: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/9.jpg)
AMAZON
![Page 10: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/10.jpg)
AMAZON
![Page 11: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/11.jpg)
AMAZON
![Page 12: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/12.jpg)
![Page 13: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/13.jpg)
F A M I L I A R T O O L S
V S . TA R G E T A U D I E N C E
D E S I G N N O T E # 0 1
![Page 14: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/14.jpg)
![Page 15: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/15.jpg)
Twitter• 24 MB
• ? Permission
• ? Autofill
• ? Remember
• ? Updates
• ? Cost
![Page 16: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/16.jpg)
Twitter• 24 MB
• ? Permission
• ? Autofill
• ? Remember
• ? Updates
• ? Cost
• 0.24 MB
• Permission
• Autofill
• Remembers
• Latest
• The Platform
![Page 17: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/17.jpg)
N AT I V E ?
O R C R O S S / M U L T I P L AT F O R M ?
![Page 18: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/18.jpg)
USER
![Page 19: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/19.jpg)
W H Y M O B I L E P H O N E D O E S N O T C O M E W I T H
A L L A P P S P R E - I N S TA L L E D ?
![Page 20: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/20.jpg)
W H Y M O B I L E P H O N E D O E S N O T C O M E W I T H
A L L A P P S P R E - I N S TA L L E D ?
T H AT ’ S C A L L E D I N T E R N E T
![Page 21: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/21.jpg)
Technology
‘ C L O U D ’ I S T H E D E F A U L T
‘ M O B I L E ’ I S TA K I N G O V E R
![Page 22: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/22.jpg)
F A N C Y T E C H
V S . U S E R E X P E R I E N C E
D E S I G N N O T E # 1 0
![Page 23: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/23.jpg)
Progressive Web Apps
(PWA)
![Page 24: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/24.jpg)
Progressive Web Apps
F A S T
S E R V I C E W O R K E R
O F F L I N E - F I R S T D E S I G N
E N G A G I N G ( W E B N O T I F I C AT I O N S )
![Page 25: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/25.jpg)
Progressive Web Apps
F A S T
S E R V I C E W O R K E R
O F F L I N E - F I R S T D E S I G N
E N G A G I N G ( W E B N O T I F I C AT I O N S )
![Page 26: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/26.jpg)
OfflineFirst
![Page 27: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/27.jpg)
OfflineFirst WebComponents
![Page 28: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/28.jpg)
OfflineFirst WebComponents Java
Jfokus
![Page 29: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/29.jpg)
WebComponents
![Page 30: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/30.jpg)
![Page 31: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/31.jpg)
![Page 32: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/32.jpg)
• Encapsulation
• Reusability
Benefits of using Web Components
![Page 33: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/33.jpg)
Vaadin Framework
After WC• Works only with Vaadin Framework
• Limited to own add-ons
• Challenging to modify/ test/ debug
Before WC• Standard: works anywhere
• Can work with any Standard WC
• Separation of concern
![Page 34: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/34.jpg)
OfflineFirst WebComponents Java
Jfokus
![Page 35: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/35.jpg)
OfflineFirst Design
![Page 36: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/36.jpg)
O F F L I N E - F I R S T I S T H E O N L Y W A Y T O
A C H I E V E A T R U E 1 0 0 %
A L W A Y S - O N U S E R E X P E R I E N C E . *
* A S S U M I N G T H E D E V I C E I S R E L I A B L E
![Page 37: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/37.jpg)
Solution
C A C H I N G
F I R E B A S E
O F F L I N E S T O R A G E
D ATA R E P L I C AT I O N
![Page 38: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/38.jpg)
Solution
![Page 39: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/39.jpg)
![Page 40: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/40.jpg)
![Page 41: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/41.jpg)
Demo
![Page 42: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/42.jpg)
Demo
https://github.com/amahdy/offline-first-app
![Page 43: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/43.jpg)
Challenges
I N I T I A L L O A D T I M E
S E C U R I T Y O F S T O R E D D ATA
R A C E C O N D I T I O N
![Page 44: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/44.jpg)
OfflineFirst WebComponents Java
Jfokus
![Page 45: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/45.jpg)
![Page 46: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/46.jpg)
Solution
![Page 47: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/47.jpg)
Vaadin Framework
After WCBefore WChttps://dzone.com/articles/using-web-components-in-plain-java
![Page 48: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/48.jpg)
Vaadin Framework
After WCBefore WChttps://dzone.com/articles/using-web-components-in-plain-java
![Page 49: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/49.jpg)
Vaadin Framework
After WCBefore WChttps://dzone.com/articles/using-web-components-in-plain-java
![Page 50: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/50.jpg)
Vaadin Framework
After WCBefore WChttps://dzone.com/articles/using-web-components-in-plain-java
![Page 51: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/51.jpg)
Practical Test
1. Mobile-first design
2. Touch-first design
3. Coffee-first design
![Page 52: WEB COMPONENTS - Jfokus · OFFLINE-FIRST DESIGN & WEB COMPONENTS AMAHDY ABDELAZIZ ... Progressive Web Apps FAST SERVICE WORKER OFFLINE-FIRST DESIGN ENGAGING (WEB NOTIFICATIONS) Progressive](https://reader033.fdocuments.us/reader033/viewer/2022042219/5ec5698baa5b3c707b54f4f2/html5/thumbnails/52.jpg)
D E M O A P P
https://github.com/amahdy/offline-first-app
J A V A W I T H P W A
H T T P : / / J . M P / J A V A P W A
T H A N K Y O U ! - B U D D H A
@ A M A H D Y 7