What are Progressive Web Apps? Progressive Web Apps are next-generation web applications that allow developers to build applications for web and mobile without needing separate web and mobile development teams. This allows developers to provide web and mobile users with the best experiences possible as PWAs benefit from having a “native-like” feel on mobile and are still accessible on desktops. In this article, we provide a guide about what PWAs are, why you should build PWAs, who is currently building PWAs, and more.
Progressive Web App Architecture If you read the Google Developer Docs about what a Progressive Web App is, you’ll hear phrases like “Progressive Web Apps are fast and reliable — they’re the future of web applications.” But what does that mean?
Why are the Future of Web Applications? Progressive Web Apps If you keep up with internet trends and stats as we do at BitCot, then you’d know that more visitors now access web pages through mobile than desktop. That means when developing websites and web apps, developers need to focus on mobile-first. But the problem is, many mobile users prefer the feel of native apps over using a mobile browser. In fact, users spend over two hours a day using mobile apps, compared to just 26 minutes using their smartphone’s mobile browser. That means by having a traditional web app instead of a mobile app, you are only getting about 25% of the possible traffic you could be getting.
To make matters worse for web developers, users spend most of their mobile time between just three apps. That means if your brand isn’t getting seen in one of those three apps, your company is going to be out of sight, out of mind. But that’s where Progressive Web Apps come into play. By turning your web app into a Progressive Web App, users can enjoy a native-like experience while using your app. Not only that, but you can get the benefits of a native-like app without having separate teams for web, IOS, and Android. Examples of Progressive Web Apps Users like the feel of native apps. Many times, native apps can feel much more responsive than browsing on a mobile browser, but developing a native app in parallel to your web app can be expensive. That’s why many companies are taking advantage of Progressive Web Apps. Here are some companies that are currently supporting Progressive Web Apps. Tinder Tinder, the famous dating app is known for swiping left or right, has also taken advantage of Progressive Web Apps. Tinder has been able to transfer its now-iconic look and feel to a web browser. Previously, if you wanted to use Tinder, you had to download the Tinder mobile app, but by creating a Progressive Web App and allowing users to have a similar experience on desktop, Tinder was able to capture a whole new market they didn’t have access to before. Twitter Twitter has also seen success from using Progressive Web Apps. After launching the PWA version of Twitter, Twitter saw a 65% increase in pages per session, a 75% increase in tweets sent, and a 20% decrease in bounce rate. The improved speed and performance of a PWA compared to a traditional mobile-web version along with the convenience of PWAs surely played a role in these improvements. Alibaba Alibaba is another company that has used a PWA to improve its business. The online giant was able to use the power of PWAs to improve customer experience and lead to more sales on its platform. By developing a PWA version of its ecommerce site, Alibaba was able to increase conversions by 76% , increase monthly users on iOS by 14%, and increase monthly users on Android by 30%. Migrating a Web App into a Progressive Web App Google recommends that when turning your website into a progressive web app, you focus on a single user journey first. That is, the first iteration of a Progressive Web App does not have to be feature complete — it doesn’t have to be an exact replica of the web app or native app. For example, Air Berlin wanted to build a Progressive Web App for the company, but building out a complete Progressive Web App would have taken much longer than the time allowed for development. The company focused on post-purchase features such as helping travelers pull up itinerary information and boarding passes.
That means even if you aren’t ready to migrate your whole web app over to a PWA, you can start building out features one at a time. This gives you a chance to test the waters of a PWA for your business while decreasing risks. But how does turning a web app into a Progressive Web App work at the technical level? Turning a web app into a Progressive Web App first involves creating a manifest file . This manifest file is the key to building Progressive Web Apps. The manifest file sets up options for the PWA such as telling the mobile device what icon to show in the task menu and what color to use for the UI. The manifest file also registers a service worker, one of the key parts of a Progressive Web App. After this initial step, developers should focus on “PWA-ifying” specific user journeys until all are built out. Google also provides a checklist of requirements that a web app needs to have in order to be considered a Progressive Web App. Some of these requirements include serving the site over https, making sure that all pages are responsive for mobile and tablets, and making sure that URLs can be loaded while offline. However, if you have built your application using a front-end framework like React or Angular, there are specific things you need to do to turn your website into a Progressive Web App.