What is a Progressive Web App?
Why PWAs can be faster, cheaper and easier to engage with than traditional mobile apps.
Mobile traffic now accounts for over half of global internet usage, and mobile users around the world total more than 3.7 billion. For reference, that is about 4,250 times the population of San Francisco. And if you still need a sense for how big that number is — 3.7 billion seconds ago, it was 1903.
This means that building a compelling digital presence is no longer an “if” for any brand that wants to remain viable; it’s a question of HOW.
Responsive vs Native vs PWA – Deciphering Mobile Experience Design
When it comes to targeting mobile-based audiences today, businesses have three paths they can take in terms of mobile experience design. They can build a mobile-responsive website, develop a native app, or create what is called a progressive web app (PWA).
A mobile responsive site can work with any device by adjusting the content layout for the screen. While mobile sites accomplish most of the same basic functionality as a PWA or mobile app, they can’t be saved with an app icon on the user’s home screen or used offline.
A native app is an application program developed for use on a particular platform or device. These apps provide a high level user experience, but occasionally see higher barriers to adoption.
That leaves the third option—a PWA. This new technology solution is the best of both worlds, combining the high performing parts of responsive sites and native apps while sidestepping their pitfalls. But what exactly is a PWA? How can it be beneficial when looking to reach customers? And why are more and more businesses moving to them?
What is a Progressive Web App?
Simply put, a PWA is a web application that can be installed to your device for a native-like experience. It begins as a browser tab like any site, giving users the option to download the site on their phone.
If the browser supports it, the application can cache data to a user’s device. This helps to speed up page loading time, and is especially useful when wifi is unavailable or data is slow. If the browser or device doesn't support these things, the site experience isn't negatively affected.
In short, PWAs offer a full screen experience, work offline, and re-engage users with push notifications — all without additional downloading. They function as an app without forcing users to jump through the extra hoop of visiting an app store or downloading updates.
This technology was debuted by Google in 2015 as a way to improve the mobile experience for users. Let’s break it down even further and look at each component of a PWA:
- Progressive: If the browser supports PWA functionality, website data can be downloaded to a user’s device, allowing for an app-like experience even if the user is offline.
- Web: The experience is hosted behind a URL and can be accessed on any browser, just like a typical website.
- App: It functions just like a native app with one key difference—there is no need to download it from an app store as it runs independently within a web browser. Users can even add an PWA’s app icon to their phone’s home screen.
One key factor that makes PWAs so different and valuable is the unique technology that powers these apps. There are three functional components that ensure PWAs provide a reliable, fast, secure and engaging user experience. These include: a ServiceWorker, an application shell architecture (app shell), and transport layer security (TLS).
- The ServiceWorker is the API component that caches data, eliminating the dependence on the network. It supports even offline experiences, giving developers complete control over the user experience.
- The app shell is the frame for the PWA, which allows for reliable and instant loading on users' screens, similar to what they see in native applications because the browser caches it from the first visit. The app shell is also where a "splash screen" is defined (the window which usually appears while a game or program is launching.)
- The TLS ensures that the PWA utilizes a secure connection, providing maximum security for both user and site data.
PWAs and the Future of Mobile and IoT Development
Since their launch in 2015, PWAs have continued to gain traction. According to a recent Forbes article, users of Pinterest's PWA spent 40% more time on the site compared to their previous version; and Makeup giant Lancôme saw a 17% increase in conversions after rebuilding their mobile site as a PWA.
Progressive web apps provide a mobile-first technology that is faster and safer while eliminating the need for downloads and updates that native mobile apps require. They are also less expensive to develop and update.
In addition to working well for industry giants like Pinterest, Twitter and Starbucks, PWAs are an ideal solution for many connected device interfaces.
Currently, the majority of IoT devices have related native apps. These apps introduce a large expense for the product team in terms of development and updates, because native apps must be developed separately for each platform (Android, iOS, Windows phone). Unfortunately, the cost of updates is then multiplied across the number of platforms an company has deployed with. For a PWA, the code is written only once and works in any device with a browser.
Progressive web apps offer a new level of scalability for an expanding variety of IoT devices. This is great news, because the number of internet-connected devices is expected to reach 50 billion by 2020, with a staggering $19 trillion anticipated as cost-savings and profits from this surge. Just as mobile devices opened up meaningful ways for marketers to connect with consumers, the Internet of Things (IoT) opens up a whole new level of connectivity by expanding the definition of device and reimagining how connected devices communicate with each other. In response, businesses are making huge investments in IoT strategies, including IoT research and development into IoT applications.
In a world where connected devices are the future, combining the pros of mobile sites and native apps through PWAs may be the best way to engage users.
Learn how Outside Source helps product teams design the apps, integrations and brands that power their smart devices: www.outsidesource.com.