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. Through this slide 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. According to skilled.co 47% of customers expect a webpage to load in 2 seconds or less before they consider leaving. This means low speed kills and we need an app that is performant. You will learn about my experiences in building a Progressive Web App with WordPress, that earns a place on the user’s home screen, works offline, sync in the background and bring the user back with push notification. A few lessons and tips will be shared for anyone who wants to build a new Progressive Web App with WordPress or convert their existing WordPress site into a PWA and give their users a fast, reliable and engaging experience.

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

2. DINOSAUR GAME
#WCAHEMDABAD2019

3. #WCAHEMDABAD2019

4. #WCAHEMDABAD2019

5. #WCAHEMDABAD2019

6. Hardest problem
with the software is
the distribution.
#WCAHEMDABAD2019

7. History of Software
distribution
#WCAHEMDABAD2019

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

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

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

11. Web application
model has
completely
revolutionized
software
distribution.
#WCAHEMDABAD2019

12. #WCAHEMDABAD2019

13. USAGE TREND ON
MOBILE WEB VS.
MOBILE APP
#WCAHEMDABAD2019

14. ● 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?
#WCAHEMDABAD2019

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

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

17. HOW CAN WE GET BOTH?
#WCAHEMDABAD2019

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

19. ● 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?
#WCAHEMDABAD2019

20. Flipkart Lite
#WCAHEMDABAD2019

21. EngagingReliable
Fast
#WCAHEMDABAD2019

22. ● 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?
#WCAHEMDABAD2019

23. Need for PWA?
#WCAHEMDABAD2019

24. NATIVE APPS VS.
PWA
#WCAHEMDABAD2019

25. 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.
#WCAHEMDABAD2019

26. Native Apps PWA
● Not bookmarkable
● Update the app
through playstore
● High data usage.
● Bookmarkable
● Always fresh
● Large data savings.
#WCAHEMDABAD2019

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

28. BUILDING A PWA
#WCAHEMDABAD2019

29. STEP 1:
Create a
Web App Manifest
#WCAHEMDABAD2019

30. ● 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?
#WCAHEMDABAD2019

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

32. {
"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
#WCAHEMDABAD2019

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

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

35. Browser Support

36. Service Workers
#WCAHEMDABAD2019

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

38. Web Browser Service Workers Remote Server
Middleware
Intercepts http request
SERVICE WORKERS
#WCAHEMDABAD2019

39. Service Worker
Lifecycle
#WCAHEMDABAD2019

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

41. STEP 2:
REGISTER A SERVICE
WORKER( register )
#WCAHEMDABAD2019

42. Step 1: Registering Service Worker

43. STEP 3:
ADD FILES TO CACHE
( install )
#WCAHEMDABAD2019

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

46. STEP 4:
Delete previous
cache ( activate )
#WCAHEMDABAD2019

48. Service Worker Lifecycle

49. Service Worker, Manifest and Cache

50. Once the SW is active, it
Has full control over pages.
#WCAHEMDABAD2019

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

52. Web
Browser
Service Workers
Intercepts http request
Server
/
Makes
http request
Is Request URL
In Cache?
Returns response from cache
Returns response from the network request

53. STEP 5:
FETCH DATA FROM
CACHE ( fetch )
#WCAHEMDABAD2019

55. Fetch event

56. Fetch event

57. STEP 6:
ADD A CUSTOM ADD
TO HOME SCREEN
#WCAHEMDABAD2019

60. Lighthouse Score - Performance

61. PWA Plugins for
WordPress
#WCAHEMDABAD2019

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

63. Super PWA

64. Browser
Compatibility
#WCAHEMDABAD2019

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

66. 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
#WCAHEMDABAD2019

67. Popular PWAs
#WCAHEMDABAD2019

68. Popular PWAs
#WCAHEMDABAD2019

69. wp-decoupled

70. https://developers.google.com/web/funda
mentals
https://github.com/imranhsayed/pwa-conc
epts
https://github.com/rtcamp/wp-decoupled
References
#WCAHEMDABAD2019

71. learn.rtcamp.com
#WCAHEMDABAD2019

72. #WCAHEMDABAD2019

73. Imran Sayed
@imranhsayed
#WCAHEMDABAD2019