Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
WHY PROGRESSIVE APPS FOR WORDPRESS?
DINOSAUR GAME
History of Software distribution
Difference Engine
CARTRIDGES & CASSETTES
FLOPPY DISCS, CDS & DVDS
USAGE TREND ONMOBILE WEB VS. MOBILE APP
●●●●
HOW CAN WE GET BOTH?
●
●
WHAT ARE PROGRESSIVE WEB APPS?
EngagingReliable
Fast
●
●
How do you use your App?
Need for PWA?
NATIVE APPS VS. PWA
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
FEATURES OF PWA
BUILDING A PWA
STEP 1: Create a Web App Manifest
●
●
WHAT IS A WEB APP MANIFEST?
●●●●
WHAT IS A WEB APP MANIFEST?
Home screen, launcher etc
App install prompt
Icons used for: Home screen, App launcher,Task Switcher,Splash Screen
…
Service Workers
WHAT ARE SERVICE WORKERS?
SERVICE WORKERS
Service Worker Lifecycle
Register aService Worker
Add filesto Cache
Cache
DeletePrevious Cache
3 phases of Service Worker Lifecycle
STEP 2: REGISTER A SERVICE WORKER( register )
STEP 3: ADD FILES TO CACHE ( install )
STEP 4: Delete previous cache ( activate )
Service Worker Lifecycle
Service Worker, Manifest and Cache
Once the SW is active, itHas full control over pages.
It can now handle events such as:
1. Fetch2. Push 3. Sync
STEP 5: FETCH DATA FROM CACHE ( fetch )
Fetch event
Fetch event
STEP 6: ADD A CUSTOM ADD TO HOME SCREEN
Lighthouse Score - Performance
Lighthouse Score - Performance
PWA Plugins for WordPress
Super PWA
Browser Compatibility
Browser Compatibility
Browser Compatibility
Popular PWAs
Popular PWAs
wp-decoupled
References
Backend FrontendAPI