Progressive web apps (PWAs) combine the best of the web and the best of mobile apps. PWAs use newer web capabilities like service workers and app manifests to deliver app-style experiences to users. There are six main steps to building a PWA: 1) creating a web app manifest, 2) registering a service worker, 3) adding files to cache, 4) deleting previous caches, 5) fetching data from the cache, and 6) adding a custom "Add to Home Screen" option. PWAs offer benefits like being installable, working offline, being discoverable, and loading instantly like regular web pages. WordPress plugins exist to help websites build PWAs and add features like

1. WHY PROGRESSIVE APPS FOR
WORDPRESS?
Imran Sayed @imranhsayed
WordCamp Finland
2020

2. DINOSAUR GAME

6. #WCAHEMDABAD2019

7. Software

8. Hardest problem
with the software is
the distribution.

9. History of Software
distribution

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

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

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

14. Web application
model has
completely
revolutionized
software
distribution.

16. USAGE TREND ON
MOBILE WEB VS.
MOBILE APP

17. ● 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?

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

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

20. HOW CAN WE GET BOTH?

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

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

24. EngagingReliable
Fast

25. ● 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 native apps?

26. Need for PWA?

27. NATIVE APPS VS.
PWA

28. 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.

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

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

31. BUILDING A PWA

32. STEP 1:
Create a
Web App Manifest

33. ● 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?

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

35. {
"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

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

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

38. Browser Support

39. Service Workers

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

41. Web Browser Service Workers Remote Server
Middleware
Intercepts http request
SERVICE WORKERS

42. Service Worker
Lifecycle

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

44. STEP 2:
REGISTER A SERVICE
WORKER( register )

45. Step 1: Registering Service Worker

46. STEP 3:
ADD FILES TO CACHE
( install )

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

49. STEP 4:
Delete previous
cache ( activate )

51. Service Worker Lifecycle

52. Service Worker, Manifest and Cache

53. Once the SW is active, it
Has full control over pages.

54. It can now handle events
such as:
1. Fetch
2. Push
3. Sync

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

56. STEP 5:
FETCH DATA FROM
CACHE ( fetch )

58. Fetch event

59. Fetch event

60. STEP 6:
ADD A CUSTOM ADD
TO HOME SCREEN

63. Lighthouse Score - Performance

64. PWA Plugins for
WordPress

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

66. Super PWA

67. Push Notification

68. One Signal

69. One Signal

70. Accept Push Notification

71. Publish post

72. Browser
Compatibility

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

74. 1. iOS just started supporting PWA
from version 11.3
2. Only some features supported on
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

75. PWA Examples

76. WordSesh2020
Flipkart lite
Twitter lite m.uber
Codeytek

77. wp-decoupled

78. https://developers.google.com/web/fundament
als
https://github.com/imranhsayed/pwa-concepts
https://github.com/rtcamp/wp-decoupled
https://github.com/imranhsayed/gatsby-
woocommerce-themes
References

79. learn.rtcamp.com

80. codeytek.com

81. Imran Sayed
@imranhsayed