Progressive Web App is a hot topic on the web right now. As per recent studies ( Comscore ), users spend more time ( 87% ) on the native app compared to the mobile web because native apps are more predictable, they work offline, show notifications and have access to mobile sensors. However, 78% of the time is spent in the user’s top 3 apps, and the rest of the apps just sit there and eat up the memory. Mobile web, on the other hand, has a better reach ( 100 visits/ month for an average user ) but does not does have a native-like experience. In this talk you will learn, how we can combine the capabilities of native apps and the reach of the web, to get the best of both worlds, using Progressive Web Apps with WordPress.

1. WHY PROGRESSIVE APPS FOR
WORDPRESS?
#WCMUMBAI2019
Imran Sayed @imranhsayed

2. DINOSAUR GAME
#WCMUMBAI2019

3. #WCMUMBAI2019
Hardest problem
with the software is
the distribution.

4. History of Software
distribution
#WCMUMBAI2019

5. #WCMUMBAI2019
19th Century :
The first known computer
algorithm was written by
Charles Babbage
Difference Engine

6. #WCMUMBAI2019
1980s :
Spread of cartridges and
cassette tapes for
distribution of commercial
software.
CARTRIDGES & CASSETTES

7. #WCMUMBAI2019
When the programmes
started to become large ,
floppy discs, cds and dvds
were used
FLOPPY DISCS, CDS & DVDS

8. #WCMUMBAI2019
Web application
model has
completely
revolutionized
software
distribution.

9. #WCMUMBAI2019

10. USAGE TREND ON
MOBILE WEB VS.
MOBILE APP
#WCMUMBAI2019

11. #WCMUMBAI2019
● Easy access on home screen
● Work offline
● Push notifications bring user back
● Access to mobile features and sensors
13% on Mobile Web
87% on Mobile Apps
According to commScore Mobile Metrix
Why users spend more time on native Apps?

12. #WCMUMBAI2019
80%
Of the time is spent
on user’s top 3 apps.
According to commScore Mobile Metrix

13. #WCMUMBAI2019
Capability
Reach
Approx. 100 visits/ month for an avg user.
Mobile Apps have better
capability, while Mobile
Web has better reach.

14. #WCMUMBAI2019
HOW CAN WE GET BOTH?

15. #WCMUMBAI2019
Capability
Reach
PWA
Combine the best of both world:
Mobile App + Mobile Web = PWA

16. #WCMUMBAI2019
● Progressively enhance Web Applications look
and feel like native apps
● PWAs are web applications, looks and behaves
as if it is a mobile app.
WHAT ARE
PROGRESSIVE WEB APPS?

17. #WCMUMBAI2019
Flipkart Lite

18. #WCMUMBAI2019
EngagingReliable
Fast

19. #WCMUMBAI2019
● We use app by clicking on
the App icon on home
screen.
● If our web can earn a
place in user’s home
screen, we can increase
the users engagement.
How do you use your App?

20. Need for PWA?
#WCMUMBAI2019

21. NATIVE APPS VS.
PWA
#WCMUMBAI2019

22. #WCMUMBAI2019
Native Apps PWA
● Develop and maintain
3 separate codebase
● High friction of
distribution
● Less discoverable
● Only the app download
link can be shared
● Only one codebase
● Accessible on android,
IOS and web. Variety of
browsers.
● Content is discoverable
and indexed by search
engines.
● Direct link of any
page/screen can be
shared.

23. #WCMUMBAI2019
Native Apps PWA
● Not bookmarkable
● Update the app
through playstore
● High data usage.
● Many features require
user’s permission.
E.g. contacts, calendar,
alarms etc.
● Bookmarkable
● Always fresh
● Large data savings.

24. #WCMUMBAI2019
Progressive Responsive Works
Offline
Works
Offline
Fresh
Safe Discoverable Re-
engageable
Durable Linkable
FEATURES OF PWA

25. BUILDING A PWA
#WCMUMBAI2019

26. STEP 1:
Create a
Web App Manifest
#WCMUMBAI2019

27. #WCMUMBAI2019
● A JSON file that contains metadata.
● Tells the browser about your web application and
how it should behave when 'installed' on the user's
mobile device or desktop.
WHAT IS A
WEB APP MANIFEST?

28. #WCMUMBAI2019
Valid Manifest
● Chrome - manifest.json
● Opera - manifest.json
● Mozilla - manifest.webmanifest
● Microsoft - manifest.webmanifest
WHAT IS A
WEB APP MANIFEST?

29. #WCMUMBAI2019 {
"short_name": "Codeytek", Home screen, launcher etc
"name": "Codeytek Academy", App install prompt
"icons": [
{
"src": "/android-chrome-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
Icons used for:
Home screen,
App launcher,
Task Switcher,
Splash Screen

30. #WCMUMBAI2019
….
"start_url": "/index.html",
"theme_color": "#ffc40d",
"background_color": "#3367d6",
"display": "standalone",
"scope": "/maps/",
}

31. #WCMUMBAI2019
Tell the browser about your manifest
<link rel="manifest" href="/manifest.json">

32. Browser Support

33. Service Workers
#WCMUMBAI2019

34. #WCMUMBAI2019
A service worker is a script
that your browser runs in
the background, separate
from a web page.
WHAT ARE SERVICE
WORKERS?

35. #WCMUMBAI2019
SERVICE WORKERS
Web Browser Service Workers Remote Server
Middleware
Intercepts http request

36. Service Worker
Lifecycle
#WCMUMBAI2019

37. #WCMUMBAI2019
1. register 2. install 3. activate
Register a
Service Worker
Add files
to Cache
Cache
Delete
Previous Cache
3 phases of Service Worker Lifecycle

38. STEP 2:
REGISTER A SERVICE
WORKER( register )
#WCMUMBAI2019

39. Step 1: Registering Service Worker

40. STEP 3:
ADD FILES TO CACHE
( install )
#WCMUMBAI2019

41. Create cache version and path for files to be cached ( sw.js )

43. STEP 4:
Delete previous
cache ( activate )
#WCMUMBAI2019

45. Service Worker Lifecycle

46. Service Worker, Manifest and Cache

47. Once the SW is active, it
Has full control over pages.
#WCMUMBAI2019

48. It can now handle events
such as:
1. Fetch
2. Push
3. Sync
#WCMUMBAI2019

49. Web
Browser
Service Workers
Intercepts http request
Server
/
Makes
http request
Is Request URL
In Cache?

50. STEP 5:
FETCH DATA FROM
CACHE ( fetch )
#WCMUMBAI2019

52. Fetch event

53. Fetch event

54. STEP 6:
ADD A CUSTOM ADD
TO HOME SCREEN
#WCMUMBAI2019

57. Lighthouse Score - Performance

58. Lighthouse Score - Performance

59. PWA Plugins for
WordPress
#WCMUMBAI2019

60. #WCMUMBAI2019
1. Super PWA
2. WordPress Mobile Pack
3. PWA
4. PWA for WP & AMP
5. Progressive WordPress

61. Super PWA

62. Browser
Compatibility
#WCMUMBAI2019

63. #WCMUMBAI2019
1. Google Chrome for Android
2. Mozilla Firefox for Android
3. Edge for Android
4. Brave for Android
5. Samsung Internet
Browser Compatibility

64. #WCMUMBAI2019
1. iOS just started supporting PWA
from version 11.3
2. Only some features supported
upon iOS
3. Background Sync and Web Push
Notifications are not supported
4. Manually press the Share icon and
then “Add to Home Screen.”
Browser Compatibility

65. Popular PWAs
#WCMUMBAI2019

66. #WCMUMBAI2019
1. Flipkart Lite
2. Twitter Lite
3. Pinterest
4. Tinder
5. OLX
6. Trivago
Popular PWAs

67. wp-decoupled

68. #WCMUMBAI2019
https://developers.google.com/web/funda
mentals
https://github.com/imranhsayed/pwa-
concepts
https://github.com/rtcamp/wp-decoupled
References

69. WordCamp Mumbai
Organizers & volunteers
#WCMUMBAI2019
Mahvash Fatima - Ppt
Design
Credits

70. #WCMUMBAI2019
learn.rtcamp.com

71. #WCMUMBAI2019

72. #WCMUMBAI2019
Imran Sayed
@imranhsayed