Progressive Web Apps are designed to make the web better. They’re websites, but with all the best features of smartphone apps: fast, efficient, with notifications and the ability to work offline. Combine that with the power of the URL – the ultimate tool for sharing links across devices and operating systems – and the fact that you don’t need to install anything, and we have a worthy addition to the future of the web.
To build a Progressive Web App, we take a collection of web technologies and apply them to a new or existing website. We look at performance, offline capability, and best practices, and optimise the website along these lines.
What the user experiences
The first time a user visits a Progressive Web App in their phone’s browser, they won’t see much of a difference between it and a normal website. They might notice that it’s very fast to load and that their browser now has a colour theme to match the site. Behind the scenes, however, the page’s resources are being quietly cached; saved for the next time. On that second visit, it should load almost instantly – and if enough time has passed, the user will be asked if they’d like to add it to their phone’s Home Screen. If they agree, the site’s icon will appear there instantly, as if they had installed a full app, but without going through the app store to download it.
When the user launches the Progressive Web App from their Home Screen, it looks and feels like a smartphone app. First, they see a splash screen, then the interface loads near-instantly. There’s no browser toolbar and it blends seamlessly into the phone’s UI. If the phone’s data connection is spotty or fails entirely, the page will still load. We can also offer the user notifications, just like a smartphone app, if it’s appropriate for the content of the site.
This user experience is the key to the Progressive Web App. With so much of our lives increasingly spent on mobile devices, it’s important to understand that we can never predict the circumstances of our users and customers. They might be commuting to work and have just entered a train tunnel, they might be trying to work with poor hotel Wi-Fi, or they might be in a country where 2G connections are the norm. When we build a Progressive Web App, we’re building an inclusive experience that doesn’t punish our users for having a less powerful connection or phone.
Building a web for everyone
By not making assumptions about our users, we’re acknowledging that the Western web is not the only web. Over the past few years, there has been huge growth in smartphone use in emerging markets across the globe, even as the Western smartphone market begins to slow. The number of users is increasing dramatically, especially in South-East Asia, but this isn’t always matched by the same level of network infrastructure or wages that we’re lucky enough to have in this country.
In regions with many users on 2G or low 3G connections and less powerful phones, priorities are different. 28% of ads are blocked by users on mobile devices in India, and 58% in Indonesia, compared with just 1% in the UK and USA. If you have an affordable data plan, ad-blocking is about annoyance; when your data is limited and expensive, it’s about cost, and being able to afford to browse the internet.
This ties into app size. If a smartphone app is just 20MB in size, it can take more than 30 minutes to download on a 2G connection, and the download often fails. Apps tend to be larger than websites: for example, the BBC’s iOS app is 47.3MB, whereas its website is under 1MB, and the average size of a news app on iOS is 22.5MB. Compare that to an average website, which is only 2.5MB in size – and a Progressive Web App is optimised to be as quick to load as possible so it could be even smaller. It’s cheaper for a user on a limited, expensive data plan to use a Progressive Web App.
A Progressive Web App ensures that everyone gets access to your content quickly, no matter the processing power of their device. In fact, in many countries, including Indonesia and Nigeria, feature phones (as opposed to smartphones) still, have a strong presence in the market. If we want to make the web open to everyone, building products and experiences that work on all devices is a key part of the process.
It will come as no surprise that the largest internet properties have noticed these trends, and have adapted accordingly:
- Twitter has built a Progressive Web App called Twitter Lite, which is 1-3% of the size of their smartphone app and aims to work well with any level of connectivity. They say that “to reach every person on the planet, we need to reach people on slow and unreliable networks”.
- YouTube has developed an app with an offline mode, so users can download videos when they have a connection, then watch them at their convenience. This app is only available in selected countries, including India, Indonesia and several countries in Africa.
- Similarly, Facebook has built Facebook Lite, a smartphone app that’s under 1MB in size, designed to work on a phone from 2009, and they say their goal is “to provide the best possible Facebook experience to everyone, no matter their device or connection”. They also have “2G Tuesdays” where employees can simulate a slow connection and better understand how users in emerging markets are using their products.
- Many companies, including Lancôme, Forbes and Twitter, have seen increases in conversions, mobile sessions and page speed since implementing a Progressive Web App. For a selection of statistics and case studies, have a look at PWA Stats.
Improvements benefit everyone
Even if your customers enjoy fast network connections and modern phones, they can still benefit from Progressive Web Apps. The average load time for a site on a 3G connection is 19 seconds – but over half of mobile site visits are abandoned if the page takes longer than 3 seconds to load. It’s in everyone’s best interest to have sites that load quickly, and in return, there’s a much higher engagement with users.
Building a traditional smartphone app means competing with over 2 million other apps in the Android or Apple app store – and competing with apps already on the user’s phone. These days it can be hard to gain traction with a smartphone app. Because a Progressive Web App is a website, it has a URL which can easily be shared across all devices, and users can find you through your existing website, or by searching the web.
Progressive Web Apps do have a few limitations: they don’t have access to all the hardware features of a smartphone, and on iOS devices, there’s currently no support for home screen integration, notifications or offline functionality. However, they will still work as websites on mobile and desktop, and companies have seen increases in engagement on iOS because the performance improvements benefit everyone.
But, if you’re thinking about having a new website or app built, a Progressive Web App could have many advantages for both your business and your users:
- Low data requirements
- Frictionless sharing and no install required
- Automatically updates when used
- No requirement to submit and adhere to App Store policies
- Works on the desktop as well as mobile
Progressive Web Apps ensure that we’re building for the future. They’re a smart, progressive way to develop and do business on the web, and they put the user at the heart of the experience, no matter their circumstances.
As your brand and technology partner, we’ll help you discover what’s possible.
We’ll make sure that the way we work is the right fit for your business, and we’ll ask the right questions to make sure you’re set up for success.
Together, we’ll create a unique advantage for your brand.
We can help build your brand through technology, email [email protected]