Houston, we have a problem—the mobile web is too damn slow! Users have moved from powerful, always-connected desktop machines to mobile devices with slow, unreliable connections. At the same time, the World Wide Web has evolved to become a capable, but demanding, application platform. We demand our users' time and our users in turn demand reliable, fast and engaging experiences. Many of the patterns employed to deliver these modern feature rich web applications have remained, for the most part, desktop-centric.
Enter progressive web apps (PWA): the new hotness for the mobile web. Progressive web apps take advantage of the latest technologies, combining the best of web and mobile apps to deliver amazing, native-like user experiences.
What Are Progressive Web Applications?
Originally proposed by Google in 2015, progressive web apps are mobile friendly web applications designed to produce an app-like experience on the web. You can think of a progressive web app as a website built with web technologies that can act and feel like a native application. Winning! Progressive web apps are available to users from the first visit to your site: no pesky installation required, no need to leave and search for an app in an app store. As a user continues to visit and build a relationship with your web app, it becomes more powerful. Leveraging the functionality of service workers, it loads more quickly (even when no connection is available), sends user permissible engaging push notifications, has a home screen icon, and delivers an immersive full-screen experience. Progressive web applications are:
- Reliable - Load instantly from a user's home screen regardless of network conditions.
- Fast - Rapid, performant, and smooth responses to user interactions.
- Engaging - Deliver native-like immersive user experiences without the need for an app store.
Why PWA: the PWA vs Native Debate
The real question here is: why not? If you already have a web application or are developing one, then you already have a potential progressive web app. "But, it's not in the app store," I hear you cry—fear not! If a user has found your website then they have also found your web app. Their first visit to your site gets them everything they need to experience the benefits of a PWA. Acquiring users is much easier on the web vs native applications, so why wouldn't you engage that user base with rich, amazing, native-like user experiences? Most web traffic now comes from mobile devices and recent studies have shown that most mobile users install 0 new apps per month. 0! Users aren't spending a lot of time looking for new apps in the app store but they are spending a lot of time on the web, where they may just find your shiny new progressive web application. With PWAs, your users don't have to put in any additional effort to receive an app-like experience so it's a no-brainer—make your web app a PWA and give your users the best experience.
Case Study: AliExpress
AliExpress developed a progressive web application to combine native app-like performance with the broad reach of the web and deliver rich, re-engaging and fast experiences.
They saw conversion rates for new users increase by 104%! And even though Safari doesn't support PWAs, the improved page speed and smart design decisions they made still gave them an 82% increase in conversion for Safari users.
One of the reasons we built a Progressive Web App was to be able to invest in the web experience across all browsers. Not only did we see huge benefits on browsers that support the latest features, but we also got to see a bump across the board. That is the sign of a great investment, and one that will keep paying for itself as browsers evolve.
Case Study: The Weather Channel
If you're about to get hit with pouring rain on your way to work, you'd want to know before you leave, wouldn't you? The Weather Channel needed a way to provide instant updates of time-sensitive information like this to its users. The answer? A PWA.They started off by rolling out push notifications on Android mobile devices and Chrome desktop users, then later progressed to a full PWA experience on their international sites. Within the first three months of adding push notification, they saw 1 million people opting in for the notifications and with their new PWA site, they've seen a massive 80% improvement in load time, all while supporting 178 countries in 62 languages. They plan on expanding their PWA to their US site, the most complex of all their sites, this year.
We provide a helpful service with accurate science and crucial information. And we use the most innovative technology to help people know what kind of weather is heading their way, no matter what platform they're on.
What Makes a PWA
A progressive web app should have the following characteristics and criteria:
- Progressive - Work for each user, despite browser choice as they're built with progressive enhancement as a core tenet.
- Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to come.
- Connectivity independent - Service workers allow functionality offline, or on low quality networks.
- App-like - Feel like a native app to the user with app-style interactions and behaviour.
- Fresh - Always up-to-date due to the service worker update capabilities.
- Safe - Served over HTTPS to ensure content is secure.
- Discoverable - Identifiable as applications thanks to manifest files and service worker registration, allowing search engine discovery.
- Engageable - Make re-engagement easy via features like push notifications.
- Installable - Allowing users to keep apps they find useful on their home screen without the need for an app store or complex installation.
- Linkable - Easily shared via a URL.
The progressive web app checklist further breaks down the essential characteristics and Google's Lighthouse tool takes it a step further by providing an automated application testing tool.
Working with PWAs
At Switch, we're really excited about this new web technology and are eager to take it for a spin. Our service workers are already waiting in the wings of our front-end codebase, ready to provide offline content, add to homescreen functionality, and push notifications for our upcoming clients' sites.
"That's awesome," you say, "but what are service workers?" Service workers are scripts that the browser runs in the background, separate from the rest of the website, and they provide the caching capabilities for PWAs. Together with HTML and CSS, they provide the app shell that is cached on users' phones. This shell is loaded quickly from the cache, with content populated either from the server, if available, or from previously cached content. This means super fast loading speeds for the shell of the website, aka no white screens of nothingness while the user waits for the site to load. With 40% of users leaving a site if it takes more than 3 seconds to load, this has major implications for bounce rate and user retention.
Even though PWAs are not fully supported on all browsers just yet (we're looking at you, Safari, IE, and Edge), the other gains from adding web app functionality to a site, like the website speed improvements seen on sites like the Weather Channel, show that PWAs provide benefits to all users, regardless of browser. As an agency dedicated to providing the best experience for our clients' users, we're ready to start implementing PWAs now.
Wrapping Up
The future of the mobile web is here and the future is progressive web applications. Now is the time to develop a quality progressive web app to grow engagement and increase conversions through reliable, fast and engaging user experiences, so what are you waiting for? If you're technically minded, try making one of your own. More of a business type? Read up on the various PWA case studies put together by Google or experience a PWA for yourself. This is the future of the web, and it's time to dive in.
Subscribe for the latest news and events from our talented team and community network.