A High Level View of Progressive Web App
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!
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
!originalworks
The @OriginalWorks bot has determined this post by @superoo7 to be original material and upvoted(1.5%) it!
To call @OriginalWorks, simply reply to any post with @originalworks or !originalworks in your message!