Designing for Progressive Web Apps
Here at Thin Martian we are discussing the latest trend of progressive web apps.
You may have heard the term “progressive web apps” mentioned more and more recently, so what are they, how do they work and how are they used? We take a look at the key features of this web/app hybrid.
A website that acts and performs like an app
A progressive web app uses the latest technologies to combine the best features of an app and a website. It eliminates the issue of actually having to go through the process of downloading an app, whilst still retaining the app-like interface and performance. Because a progressive web app is the website, it’s approaching both desktop and mobile.
Today, users are driven to install native apps because of the lack of a strong and engaging experience on mobile websites. Most of us already have too many apps installed, leaving little space for more. As well as this, users simply find the whole process of installing and downloading an app unnecessary, when they just want to access the page on the website quickly and easily.
App-like interface
The interface, interactions and navigations of a progressive web app are very similar to a native app as it’s built on the app shell model. It allows you to have smooth animations, scrolling and navigations for a fast app-like experience.
Offline-first
Progressive web apps have an offline-first approach using caching. This opens up a lot of possibilities for what the user can do when they have limited or no internet connection.
To keep an offline-first approach in mind, we need to map out what would be useful for users to access whilst offline. You can also go pretty wild when it comes to creating solutions to enhance user interactions in offline-mode.
Following are some examples of progressive web apps where offline support has proved to be very useful:
Rio Run was an interactive podcast that The Guardian created for the 2016 Olympic marathon. It tracked the distance as you ran and translated it into progress along the marathon route through Rio de Janeiro. As you ran, you were able to learn the history, politics and culture in the area you were running through. The runners were able to access the map at any time offline, because of geolocation.
To avoid forcing the users to download 100MB of audio files up front, it cached the files progressively. There was a preload button which allowed the runners to fetch the next distance of audio. Once an audio file was no longer needed, it could be discarded from the cache.
AirBerlin uses progressive web app technology to enable passengers to access their personal boarding pass and travel information at any time, after a one-time web check-in.
The Guardian ran a test with a progressive web app where they made it possible for readers to solve a crossword puzzle whilst waiting for better internet connection.
Error states
When designing for progressive web apps, we need to think of the whole offline siteflow to encounter for every error and eventuality. It’s best to prevent users making mistakes by offering suggestions and being flexible. When the user gets an error it should display what went wrong and why, and the next step the user should take to fix the error.
So, why PWA:
- Allow caching
- Push notifications are possible
- Fast loading
- Offline support
- Launching in full-screen
- Smooth interactions and animations
- Linkability — It’s easy to share any page with a direct link
There’s only one real drawback (which isn’t inherit from the implementation):- Total lack of support from the Apple ecosystem. Progressive web apps are still unsupported by Apple. Their reluctance to adapt to it might have something to do with that they wouldn’t get the same App Store revenue.
When should you build progressive web apps?
Similarly to native apps, progressive web apps are recommended if you expect your users to return frequently. This means you won’t lose potential users who don’t want to use data or space to download an app. Progressive web apps are cool, there’s still a lot to explore on how this new technology can be implemented. It will allow you to translate interesting and engaging ideas into this web/app hybrid and change the way we work around website limitations.
