A Beginners Guide to Progressive Web Applications
What is a Progressive Web Application?
A Progressive Web Application (otherwise known as a PWA) is a website that looks and feels like an application. The great thing about PWAs are that they are device agnostic, so you can use them on both desktop and mobile devices without switching up the code base.
What are the benefits of using a Progressive Web Application?
There are several benefits that come with choosing a PWA for the users, the business and the developers. PWAs provide users shorter loading time and good app performance even on poor networks. Theses benefits users see translate to positives for the business. Companies find that they have higher user engagement, higher conversion rates, and there’s a decrease in development costs. Finally, for the developer the largest win is that they are able use one code base for all devices. Which means no need for separate app development or development teams for iOS, Android and the web.
What Companies use Progressive Web Application?
Below is a small list of companies that have switched with some of the benefits that they have seen.
Pinterest — Once Pinterest converted to using a PWA they found that time spent on their application jumped up by 40%, user-generated ad revenue up by 44% and core engagement went up by 60%
Twitter Lite -Twitter saw a 65% increase in pages per session, 75% more Tweets, and a 20% decrease in bounce rate, all while reducing the size of their app by over 97%.
Forbes — Saw a 65% increase in pages per session, 20% bounce rate and had 3% of the required storage of their old react native application.
Other companies include Hulu, Starbucks and Uber. You can read more about their results here.
What do I need to make a Progressive Web Application?
There are a two fundamental components that you need outside of your application shell to build a PWA. You will need a manifest file and service workers.
Manifest file: The manifest is a JSON file that contains information about your application like the looks, icons, background color name and more. This file helps to present your PWA in a mobile format. Here’s a helpful article to quickly add a manifest to your app.
Service Worker: Service workers are proxies that live between web apps, browser and the network. It downloads every time you visit a new page, when you make a new request, or if you have not been to that page in 24 hours. The service worker takes appropriate action based on if the network is available. If a network is not available, the user is still able to use the application offline because the application does not constantly need to be connected to the internet to be on the user’s screen. A service worker’s will go through the life-cycle of downloading, installing and then finally activating. You can listen for each of these life-cycle events. To use service workers, you make sure you have a secure HTTPs connection on your deployed application. Here’s a quick guide to help you get service workers added to your site.
Now what?
Once you are deployed, Users can navigate to your PWA and add the application to their home-screens. Once they add it to their home-screen they can click on the newly saved application and view your PWA like you would view a mobile application. You can also take some additional steps to publish your app to Apple App Store or Google Play for that real app feel.
That’s a brief overview of what a PWA is, but if you would like to learn more you can check out the links below!
