Why Progressive Web Apps ( PWA ) for WordPress

1- PWA and its features?

● A web application that uses the latest web technologies and also works
offline.
● Offers a native-app-like experience
● Can be added to user's mobile as an app
● Send push notifications.
● Can be added to existing website.
● Reliable, Fast & Engaging.
● Offers background sync for updated data and poor network conditions.

2- Why PWA for WordPress?

● Majority of users leave your site if it takes more than 3 secs to load. PWA
offers fast speed.
● Almost 90% of the time is spent on mobile apps compared to mobile web.
● Increase user engagement for your WordPress site.
● Push Notifications can awaken the apps and engage the user. They can
be used to send updates.
● Increase in browser support for PWA

3- Build PWA for WordPress site as developers?

● We can use service workers to cache the data for offline use as well on
subsequent request.
 ● Service workers are web workers that run in the background separate from
web page.
● Cache API and Indexed DB can be used to store cached data.
● The manifest.json file and the icons are used to determine the feel of your
app on mobile.
● PWA works on HTTPs. So our WordPress site should be hosted securely
on https.
● Optimize and lazy load images.
● Load images responsively for best performance.
● Use Webpack to bundle your files. Web pack also offers code-splitting.
● Use SSR for JS applications.
● Audit performance on lighthouse.

4- Caching Strategies

● Cache first, Network fallback

● Network first, Cache fallback
● Cache/network race
● Network only
● Cache only

5- Workbox

● A set of libraries and node modules that make implementing caching very
easy.
● It removes the boilerplate every developer writes.
● Offers pre-caching, runtime caching, strategies and background sync etc.

6- Code Sample
 ● Github Repo

7- PWA plugins for WordPress

● PWA : provides PWA building block

● Super Progressive Web App: helps you convert your WordPress website
into a PWA instantly!
● PWA for WP & AMP : brings the power of the Progressive Web Apps to
the WP & AMP

Live demo

1. Open a PWA site homepage - show list of recent post

2. Ask people to check homepage
3. Ask them to keep phone aside
4. Add a new post to PWA site
5. Ask people to turn on flight mode
6. Ask people to check homepage again