Image Source

Demo Website

Progressive Web App (PWA) in my definition is that a practise that a web developer take either on new or existing website, adding those modern features into it to further enhance User Experience. There are a lot of cool features that are available to web which used to be a luxury. For example, some of the cool features are app-like icon on homescreen, offline-ready, light-weight compared to native app, push notification to draw user back.

The demo website I built was to get people familiar and visualize what is the power of Progressive Web App. The project is on GitHub and it is open source, feel free to file issues or pull request.

What are PWA's feature?

(from Google Developer Website)

• Progressive
• Responsive
• Work Offline
• App-Like
• Fresh
• Safe
• Discoverable
• Re-Engageable
• Durable
• Linkable

Use in production

Currently, PWA rely a lot on service worker, which is mainly supported on Android, Chrome and Firefox. Good things is that even thought the browser do not understand service worker, they still surf like normal.

Just in case you want to use it in production, please always check Browser Compatibility before making it to production.

Image Source

Add to Homescreen

Add to Homescreen is something a bit abstract without visualizing it. Here is a diagram...

iOS Requirement

In our html files, we need to add these meta tags to work.

On iOS, user need to manually add to homescreen, and then it will take the image given.

Android/Chrome/Firefox Requirement

• Service Worker Registered (I will talk about this later)
• Serve over HTTPS
• manifest.json
• Minimum benchmark by the browser

On Android, manifest.json is required to setup in order to use it.

manifest.json is just like app icon when you develop iOS or Android native app, you need to state for which resolution use which image.

Service Worker

Service Worker are just a little guy sits on the other thread of your typical js file. Service Worker is like a proxy between our browser and the server, where they have the ability to manipulate our network request. Since they runs on different thread, a lot of powerful ability that they are capable on doing, and even the browser is closed. Such as, background sync, push notification, caching for offline support and more!

Service Worker LifeCycle

In order for service worker to work, they need to go through a lifecycle, from install to activate and then it goes idle. When an event occur, it will be triggered and make something happen!

Install
Install event, normally I will cache all those static files (file that does not change content too much) such as HTML, CSS, Font, Images, Videos.

Activate
On activate, I will normally remove my old caches. This is the process where the service worker starts running

Fetch
Fetch is a replacement for old AJAX. In Fetch event, we can do dynamic caching.

You can read more about Caching Strategy in THE OFFLINE COOKBOOK

Background Sync

Background Sync is also a service worker event. What it does mainly is that it makes your app able to be used to sent data even though the internet speed is fluctuating. For example, in our Whatsapp, even thought we have no internet available right now, we still can send messages; When the internet connection established, the app automatically send the message to the server.

Push Notification

In this video, I explained high level view of how Push notification works.

You can read more about push notification at here

Other Cool stuff!

• Vibrate, Orientation Demo
• Payment Request API Demo

I will make a case study on success on company that use PWA. Follow and stay tune for more!

About Me

I am Lai Weng Han (Johnson), you can find me on Twitter.

For those who are interested in PWA, you can read my blog at pwa.wenghan.me or at steemit