Building a Progressive Web App

I think the web platform is awesome.
Moreover, it got some impressive APIs that make it even more powerful. The web platform is easy to access (very low friction), no installs, easy distribution (without walled gardens), immediate redeployments and no single organization own it. Let’s see what do we mean when we are talking on progressive web apps.

Progressive Web Apps

• Fast loading – Because we know users love speed and for every delay we are lossing a smile (and a user).

• One click away from accessing content – You should have an icon on the screen and with one click you could get to your content (or task) and smile.

• Smooth animations and navigations – Good UX comes with these aspects.

• Re-engages with push notifications – In many cases, we wish to be able to notify users even when the browser is not open in-front of them. We can!

• Good experience on flaky network connections – Our web app is offline first, so we can deliver our content (just the deltas) on flaky networks much better/faster.

• Consistent experience across browsers – After all, we are talking on the web here. You can’t control from which device users will come to your work. So make sure, you serve them all.

PWAs are about the experience, no the tech: these apps _feel_ better and more app-like. The technology behind Progressive Web Apps is called “Service Worker”; it’s available only since mid 2015 and is seeing large, growing adoption. PWA is expected to be for mobile what AJAX meant for the desktop web.

Enabling app-like capabilities

At the foundational level, there are two core pieces of technology that enable PWAs:

Service Worker – lets your web app go beyond the browser

• This was shipped in Chrome in Jan. 2015 and been evolving ever since. You can find it on Firefox and Opera browsers as well.
• The general process is simple and transparent.
  • When the page is loaded, the site registers a service worker, which is a client side proxy written in javascript. No user prompt is shown here but the site can now work offline.
  • Once the SW is registered, you can do lots of different things with it. For example you could cache assets needed for offline support. You also define the events that will wake up the service worker such as Push Notifications and soon, background sync.
• Think of Service Worker as a client-side proxy – it sits between the browser and the OS. This is very powerful aspect and this is way it will work only above https (=secure connections).
• It can intercept network requests from the browser and respond with cached data, or wake up when the system tells it to, for example via a push notification.
• What’s amazing about SW is that it doesn’t rely on tab or browser being open on mobile! See the image below:

After you implemented your service worker, you want to declare a manifest file. Why? because, Web App Manifest file gives you the ability to control how your app can be launched. You can control:

• Specify splash screen launch experience
• Choose colors, theme, design for your app launch screen and icon
• Allow for web-app icon to be added to home screen
• Control screen orientation for optimal viewing

Here is an example of such a manifest file:

Add to Home screen

After we have service workers and manifest file, chrome will help us offer the user to add the web app to their home screen so they could launch it in the future in full-screen mode:

Why it’s important for the user experience? Three main reasons:

• When the user opens it up from the home screen, it can open full-screen – no browser UI at all. Yes!
• Top-level in the task switcher, even in older versions of Android.
• So it truly is a seamless app use-and-install experience.

PWAs can work across browsers

• Service workers today are available in Chrome and Opera, and expected to be in Firefox soon.
• For the browsers that haven’t yet shipped Service Worker, elements of your PWA that don’t require service worker will still function (e.g. smooth navigation).

Send Web push notifications

One of the cool features of service worker (e.g the background script that give us a lot of power) is to send system level notifications. We can send notifications even when page closed. It’s an important feature to many sites experience to re-engage with those ‘one time’ users.
See an example below for a popular web app notification:

 

Baseline implementation for PWA engagement

I’m interested in working with partners who have PWAs on their roadmap – So please ping me if you do.
The basic set of requirements:

• HTTPS
• Service Worker
• Web App Manifest
• App shell caching
• Splash screen
•  Smooth navigation
• “Progressive enhancement” with cross browser support

Optional Features: Push notifications, Advanced Offline Support – sync.
Wanna try a few? Try Voice Memos, Air Horner or SVG OMG.

Remember, good UX is more money (in most cases).

Good luck!