What is Progressive web App (and Why Should You Care)?
Before we start on Progressive web apps, let’s first have a look at the current state of World wide web.
As of January 2017, 8.05 billion devices are connected worldwide (More than the current world’s population which is at 7.5 billion). Out of which 55% (4.42 billion) connections are used on smart phone devices. Chrome on mobile is having 1 billion monthly users which is whopping 150% increase from last year.
As per estimates by 2020 40–50 billion devices will be connected worldwide. Most of the users will be coming from rural areas and other developing countries where the data is either expensive or having high latency or both.
User behavior:
Now the question is why a user prefers using Apps instead of a website.
It is because, Native apps are
- Reliable
- Startup fast
- Can work offline
- Push notification brings the user back to the app
- Home screen icon maintains visibility
But, mobile web reach is almost 3 times that of Apps
When it comes to user engagement mobile web lack by a huge margin to Native apps (Mainly due to the advantage and user experience which Native apps provide)
Advantages of Mobile web
- Immediacy- Mobile websites are instantly available
- Find ability- Mobile websites can be found easily
- Reach- Average user visit 100 sites per month*
- Compatibility- Mobile Websites are Compatible Across Devices
- Linkable- Easily share the application via URL, does not require complex installation.
- SEO- Mobile website contents can be indexed by search engines
- Low friction- To use a mobile website you need just a browser unlike the apps which has very high initial friction
So what’s the reason that Native apps beat Mobile web when it comes to user engagement even though it has a lesser reach?
As per google research, the average load time of a mobile website is 19 second. But a user expects to load the site within 3 seconds. So you will lose around 40% of the user if the website is taking more than 3 seconds to load. And 100% of the user if it takes more than 10 seconds.
Also, it is easy to tap on a home screen icon rather than typing the URL.
Mobile website doesn’t have an option of push notification
Solution?
Progressive web Apps (PWA)
What is PWA?
PWA is User experiences which combine the best of the web and the best of the apps
They are
- Progressive — Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
- Responsive — Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
- Connectivity independent — Service workers allow work offline, or on low quality networks.
- App-like — Feel like an app to the user with app-style interactions and navigation.
- Fresh — Always up-to-date thanks to the service worker update process.
- Safe — Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with
- Discoverable — Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
- Re-engageable — Make re-engagement easy through features like push notifications.
- Installable — Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
- Linkable — Easily shared via a URL and do not require complex installation.
Basic Architecture
Service Worker
Proxy which sits between the client (Browser) and the server.
- Registering a Service worker
- If the browser supports SW and it is registered, SW file will run in ServiceWorkerGlobalScope which is a separate execution thread with no DOM access and it also don’t interfere with the JS main thread. Service worker lifecycle events includes.
1. Installing - Mainly use to cache static resource (js, css, images, etc)
2. Activated - Maily use for cache management
3. Idle
4. Fetch or message - Handle all the network request on subsequent page load
5. Terminate - When not in use, to save memory
Service worker script
Next:
PWA with React.js
