I’m a fan of the UX of Google’s products and regularly use apps such as the Google Calendar on my phone. Chances are, you have at least one Google app on your phone, most likely, Chrome. (56.94% of mobile users uses Chrome as their mobile web browser.) It’s the most used app on my phone, discounting my e-reader, and yet the UX of web browsing on mobile can be frustrating, and there’s not much Google can do about outdated websites, except promote better UX design to web developers.
That’s where Progressive Web Apps comes in. It’s basically web apps that can go toe to toe with modern mobile apps.
Here are some key features of PWAs:
-
Reliable
– Load instantly and never show the downasaur, even in bad network conditions.
HOW:
The client-side proxy, called a service worker, puts developers in control of the cache and how to respond to resource requests. You can pre-cache key resources and put less strain on the network. You can also use it to push notification, sync app in the background, and in the future, sync periodically and do geofencing.
-
Fast
– Respond quickly to user interactions with silky smooth animations and no janky scrolling.
HOW:This entails eliminating unnecessary downloads to users, which can be managed by Chrome’s DevTools > Network panel. It also means asking if conveniences like Bootstrap, or JavaScript libraries, or making websites single page applications are worthwhile. They add more resources for the users to download and. Some alternatives are Flexbox/ Grid instead of Bootstrap, leaner libraries such as Zepto (even smaller than jQuery) or Preact (lean version of React). Some other suggestions are migrating to HTTP/2, downloading resources earlier with resource hints, and code splitting in webpack.
Some interesting stuff if your site is image-heavy:
– Video is 80% or so smaller than animated gifs of similar quality.
– There are alternative image formats such as WebP and JPEG XR.
– You can deliver images responsively.
-
Engaging
– Feel like a natural app on the device, with an immersive user experience.
HOW:You can create a web app manifest relatively quickly to tell the browser how your app should behave when ‘installed’ on the user’s mobile device or desktop. It is a simple JSON file and you can test it via Chrome DevTools > Application > Manifest. You will need the service workers to create offline experiences, background sync and have push notifications. Service workers are currently supported by Chrome, Firefox, and Opera.
Here’s a checklist for PWAs if you want to create a web app which feels like a native app on the mobile.
Stuff I Have Learnt 