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?
Google often refers to the acronym “FIRE” to describe PWAs. Google says that Progressive Web Apps are:
- Fast
- Integrated
- Reliable
- Engaging
That sounds nice, but what exactly is the architecture behind progressive web apps?
The most popular architecture for Progressive Web Apps is the “app shell” concept which combines server-side rendering and client-side rendering to get the best of both worlds. This app shell involves loading a minimum UI to the user the initial time they visit your web app. After that, the visitor can view a cached version of the app until new content is available.
With the “app shell” architecture, your PWA is composed of a shell and new content is put into that shell once your app has a network connection. Fetching new content to put in the shell is done by web workers working in the background. The great thing about this is that with PWAs, you don’t have to worry about complete page reloads each time a user wants to get new information — only the newer information is transferred and replaced.
One important thing to know is that a Progressive Web App is still a website and contains HTML, CSS, and JavaScript files. The difference is that Progressive Web Apps feel more like native apps, including having the ability to be functional with an unstable network connection. This means that you can develop native-like mobile apps without having to know Java or Swift, keeping development costs down.
Why Progressive Web Apps are the Future of Web Applications?
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 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.
Best Progressive Web App Frameworks
React Progressive Web Apps
Many developers like using React to build sleek, modern apps. And React makes it easy to combine the React library you love while still getting the benefits of PWAs.
If you have worked with React before, then you should be familiar with the “create-react-app” command that is used to start building React projects. Starting out building a Progressive Web App with React is pretty much the same, except for registering a service worker. After registering a service worker, you need to create a manifest file. PWAs built with or without React need this manifest file to tell the web browser the information about the application. This includes giving information about the app name, what icons it should use on the user’s home screen, and the “start_url” — the URL that the app goes to when the app is launched.
Now that you’ve gotten a service worker registered and created your manifest file, you can continue developing the app like you would any other React app. Just make sure you are meeting Google’s guidelines for Progressive Web Apps.
Progressive Web App Angular
Developing a Progressive Web App with Angular is similar to how you build a PWA with React and other JavaScript frameworks. We recommend using Angular CLI version 6 to create PWAs with Angular as that’s the most effective way to do so. The Angular CLI requires Node 8.9 or higher, so make sure you have the correct Node version before trying to use the Angular CLI.
Developing a PWA with Angular requires the developer to create a manifest file and register a service worker. After that, the PWA checklist should be consulted while building out features. We recommend using the Lighthouse Chrome plugin to help guide you while developing your PWA. Lighthouse will give you a score telling you how well your app meets PWAs standards and show you where to improve.
Progressive Web App Features
The main features of Progressive Web Apps are:
- they mimic the feel of native applications
- they can be used offline
- they can be shared just like regular websites
Progressive Web App Mimic Native Apps
The killer feature of Progressive Web Apps is their native-like feeling. Users can feel like they are using a native app instead of a clunky mobile browser. Progressive Web Apps even go as far as being able to be saved on the home screen of a user’s mobile device or tablet and can even send push notifications. Developers can get all these advantages without having to develop an entirely different IOS or Android version of their web app.
Progressive Web Apps can be used Offline or with Unstable Networks
By taking advantage of service workers, users can use the Progressive Web App while offline. Once the device regains a network connection, the service workers can continue fetching information from the server. This is especially important in areas where there isn’t a stable network connection.
Making your web app into a PWA and allowing users to access it without a stable network connection puts you way ahead of your competitors. After all, when users aren’t able to access your competitors’ apps, they’ll still be able to access yours.
By taking advantage of the history API, users are able to share any “page” of a Progressive Web App just like they would share a normal URL. That means users don’t have to go to the Google Play Store or the App Store to use your app. Instead, users share a URL and the history API takes care of everything else. PWAs can also be saved to a smartphone or tablet’s home screen. The manifest file even allows the developer to make sure the PWA’s branding is consistent across the web and mobile devices.
What can Progressive Web App do?
The biggest appeal of Progressive Web Apps is that Progressive Web Apps can be used without a stable network connection. Service workers are utilized in order to run tasks in the background and make sure that content is fetched when there is network activity. This means that users can spend more time on your app, even if they don’t have a stable network connection.
When To Build A Progressive Web App?
We’ve already covered that mobile users spend most of their time using apps instead of mobile browsers. And the fact is that on average, users download zero mobile apps each month. That means even if you’ve spent time, money, and resources on building a mobile version of your web app, you are still going to have to get a user to:
- Open up the App Store or Google Play Store
- Search for your app
- Find the correct app
- Download your app
- Install your app
- Accept any app permissions
On the other hand, with a Progressive Web App, a user can just navigate to your webpage and then chose to add your PWA to their mobile home screen — a much more painless process. If you expect users to use your web app with a mobile device, and they will, you should consider turning your web app into a Progressive Web App.
How Does Progressive Web App Works?
Because Progressive Web Apps rely heavily on service workers, some considerations should be made when deciding how to handle storage. LocalStorage and SessionStorage do not support service workers, so you should look into using other options like the Cache API and IndexedDB API. The MDN has some great guides on using these APIs with your progressive web app.
Does Your Business Need A Progressive Web App?
Here at BitCot, we have an expert team of engineers and developers that can turn ideas into Progressive Web Apps. No matter your business’s size or business model, we can develop a custom PWA that fits your needs, improves your customers’ experiences, and contributes to the bottom line. If you are looking to get a Progressive Web App built, contact us to see how we can help.
