Back to all blogpostsContents
If you are about to build a web application that is stable, high-performant, and works also for mobile users, Progressive Web Application may be a technology to consider. PWA can help you improve your existing website or create a brand new one by making the best of the two worlds – web development and mobile applications.
Perhaps the biggest advantage of Progressive Web Application is its profitability. PWA will make your product available for mobile users, which is crucial for online businesses nowadays and can lead to increased traffic and a higher conversion rate of your web app. And since you don’t need two separate source codes and dedicated teams of devs to write them, you can save valuable time and money. Yet, you don’t lose out on appropriate security and stability, which makes PWA a highly productive solution.
What’s more Progressive Web Applications provide a native-app-like User Experience because their UX design is developed with the use of native mobile components. This makes it familiar to mobile application users, encouraging them to interact with your new web app and return more often.
Therefore, if you need to act quickly and build a stable and effective product with limited resources, read this article and decide whether PWA is the right choice for your business.
The most important PWA features
As you can see, Progressive Web Application can solve some of your problems, so it is a good idea to become acquainted with its functionality. Here are the most prominent Progressive Web App features that can be valuable in the development of your product.
Offline-first app
A PWA works as an offline-first application which makes it even more accessible to users. It gives them the ability to save the application directly on the smartphone’s desktop and work offline or with a poor internet connection. It is possible due to the operations made by service workers that behave like a proxy between the Internet and the user’s tab. The worker is a small script that can handle offline mode to previously visited web apps. Actually, the browser runs it separately from the main thread, intercepting network requests, caching, and retrieving resources from the cache.
Additionally, SW is responsible for delivering push notifications. When users add the app icon to their home screen they can open it anytime and the app doesn’t even require updating. Such a model of operation significantly increases the availability of the application and makes it easier for users to use it, which can result in increased traffic and, thus, higher profits.
Native UX components
PWA is a well-developed technology that uses components similar to those incorporated into native technologies. It means that particular buttons, animations, and other elements used in your Progressive Web Application resemble their native counterparts. That is why an average user does not see any difference between PWA and a dedicated one. Moreover, PWA allows the user to have almost like a native app experience by incorporating hardware tools, such as Bluetooth, accelerometer, gyroscope, or others into the web app. It all creates a great User Experience and will make people love your application.
Mobile-first approach
There is a strict connection between Progressive Web Apps and a mobile-first approach. The latter is Google’s policy that was prompted by the rapid switch in the devices used by Internet users. According to the data from 2022, around 59% of traffic across the Internet was performed on mobile devices. Hence, from 2021 onward, Google has been indexing pages that have dedicated mobile versions or using technologies such as RWD or PWA prior to those that don’t.
Since this is a requirement made by a major search engine on the market, conforming to this regulation is the best option for your business. Otherwise, you may lose visibility and, consequently, your customers. Smaller traffic would have resulted in a drop in your company’s profit. With PWA, you can provide the users with the mobile version of your web app and avoid this undesirable scenario.
Optimized loading time
As I have already mentioned, Progressive Web Apps are based on service workers that allow for retrieving resources concerning the previously visited site from the cache. This function reduces the amount of time required for the rendering of the content.
What is particularly important regarding the loading time is that users are usually impatient and frequently drop the idea of revisiting a site if it opens slowly. Thanks to the optimization, you can meet their expectations and will not lose prospective customers.
Security standards
HTTPS is another of Google’s requirements and a must for every website nowadays. This protocol secures the confidentiality of personal data integrated between the user and the site. Thanks to this, the customer’s demands concerning privacy are met. The security of your web app may naturally improve your trustworthiness and, consequently, increase interest in your product.
Service for the selected native features in PWA
As you can see, Progressive Web Application brings a lot of functionalities to the table. However, based on the chart below, it is clear that a number of things still need to be added to ensure that PWA is a fully cross-platform solution.
Benefits of PWA implementation
By building web apps with the use of PWA, you may seriously hit the jackpot. An improvement in User Experience resulting from such aspects as a possibility of app customization, bookmarkability, or linkability can bring new customers to a site and increase conversion, which will yield a lot of profit in the long run. Bearing that in mind, I provide you with a list of PWA advantages that make it worth considering this solution.
Up-to-date
PWAs stay updated all the time, which is a huge asset in comparison to native apps that require a Wi-Fi connection to be uploaded. Also, in the case of mobile apps, you have to go through the store and start the update manually. There’s no need to do that in PWA, it happens automatically.
Customized
You can customize your web app the same way you would adjust its native version. In other words, particular elements of the app are adapted according to your own standards and needs. For instance, you can personalize the UI design by changing the color palette or adjusting the style of particular clickable elements.
Linkable
In PWA, every page has an assigned link that allows the user to open it directly. So they have quick and easy access to the content they are interested in. But an application structure where each subpage has a separate URL is an asset from the marketing point of view as well. Linkable sites can be shared and promoted smoothly, which makes them discoverable and is particularly convenient in the case of paid campaigns. It also allows for user segmentation which is necessary for those types of marketing activities.
Bookmarkable
What is more, the user can bookmark the page. It means that they have it saved in the storage and may access it anytime. As a result, they are more prone to visit a certain page of your app again and buy your products.
Cost-effective
By developing Progressive Web Application you can have the same technology on the backend, web, and mobile. Such a solution streamlines the app development process and can decrease the number of experts needed to implement the app. In addition, the sole maintenance of a PWA app is less expensive. That means you can have a solid and stable solution even with a limited budget for its development.
PWA vs native app
What should I choose? – It’s one of the most frequently asked questions, and I agree that it’s always a tough decision, but it’s crucial from your product’s perspective. Before starting the implementation phase of your project, you must first compare both technologies. That’s why I provide you with a list of factors that you should consider before making a decision.
Hardware features
I always recommend preparing a list of mobile features that are required to launch your product. The more hardware you want to use, the more you should go towards the native mobile application. It may not necessarily sound like a PWA recommendation, but there actually might be cases when the features available in PWA will be sufficient. Thus, it all depends on a particular project and the functionality that it demands.
Cross-platform support
PWA is undeniably a cross-platform solution, but, contrary to popular opinion, not the only one. When it comes to PWA, you can create a single codebase and use it across different devices. However, it is one of few solutions which make it possible to develop a native app that would work on Android and iOS devices as well. If you want to know about other of them just take a look at Flutter or React Native which are both quite successful in this regard.
Performance
When it comes to performance, PWA has the advantage in the vast majority of cases. Some of the statistics on the speed of operation collected on the website pwastats.com:
- pages load even 85% faster (Butcher of Blue),
- buffering time reduced by 50% (ZEE5),
- load time cut from 11.91 to 4.69 seconds (Tinder).
Improving performance also translates into an increase in indicators such as engagement, traffic, or sales:
- 60% increase in engagement (Pinterest),
- over 50% lower bounce rate in applications (Thomas Kent),
- 3x increased returning users rate (ZEE5),
- 25% increased average time on page (OpenSooq),
- 2.8x increase in time spent on site (Petlove),
- 192% growth in daily visitors (Kubota),
- 10% increase in overall traffic (Commonfloor),
- 2x increased the number of desktop orders (Starbucks),
- 20% increase in conversion (Debenhams),
- 31% increase in conversion (George).
Actually, there are two situations in which the native app will be more suitable than PWA:
- you need hardware features,
- you want to create a complicated UI/UX Design.
Updates policy
In the case of a Progressive Web App, most logic is on the server side, so you don’t need to engage additional layers, like the marketplace. Updating a native app, on the other hand, is much more complicated and time-consuming because you not only have to update an app in the store but also force users to download a new version.
Tech Stack
PWA uses well-known technologies in the web world. There are no limits. You can use React, Vue, Svelte, Angular, or any other library supported by browsers. Another benefit of applying a progressive approach is writing your code in pure JS or any other superset of JavaScript – TypeScript, ReasonML, or Elm. JS is currently the only language that allows you to use the same technology on the back-end, web, and mobile (one language to rule them all!). At the same time, there is a native Android app, which can be developed in either Java or Kotlin and iOS, which supports only Swift.
The total cost of the product
Last but not least. People love cross-platform solutions because they are more affordable – simple as that. What they think is I can pay only once and have support for Android and iOS. But it’s not always true. Did you know that an app’s maintenance is, in many cases, much more expensive than the creation phase? Maintaining a single application for multiple platforms can cost you more in the long-term perspective.
Once a native application and PWA pros and cons have been widely discussed, the decision regarding the solution you should choose for developing your product will hopefully be much easier.
Is it possible to publish PWAs in official marketplaces?
Although Progressive Web Applications are installable, most customers don’t have a clue that such a feature is available in the first place. From a marketing point of view, it is a serious drawback. Fortunately, there is a way to publish the app in the official marketplaces.
Google Play
In 2019 Google announced a new concept – Trusted Web Activity. TWA gives developers the possibility to publish web content in the Google Play store. TWA wraps the PWA application into an Android container (activity) and displays a full-screen Chrome browser inside of an Android app without browser UI elements, like a well-known URL bar. TWA gives you one more feature – transitions between the web and native content are between activities, so it lets you create an app that uses PWA features only for selected views. The whole process of creating a TWA application is clearly described in the official Google docs.
What needs to be clarified here is what ‘trusted’ means in the context of TWA. Google decided to introduce a restriction under which you must confirm that you are an owner of the website you want to pack into TWA. You can prove this by setting up Digital Asset Links. Luckily enough, it’s nothing hard – you just need to upload to your server a file that points to your app as well as some data from your app that points to your website.
App Store
In the case of Apple devices, it’s not so straightforward. In general, Apple’s review process is much more strict. But still, app store optimization is possible. All you have to do is wrap your PWA app into WebView using Cordova, PWA Builder, or other similar solutions. It’s important to note here that officially there is a rule in the Apple Store Review Guidelines (4.2) that gives them the right to reject your submission.
“Your app should include features, content, and UI that elevate it beyond a repackaged website. If your app is not particularly useful, unique, or “app-like,” it doesn’t belong on the App Store.”
Nevertheless, there is a lot of stuff in the Apple Store that could be affected by this clause, but they are still there. I assume that Apple will be a bit more restrictive when reviewing apps’ potential updates.
Microsoft Store
Microsoft informs about this new feature in their docs. The company also prepared an official tool to transform your PWA app into a native counterpart – PWA Builder. Surprisingly, they even listed the advantages of such a move in the files section.
- discoverability,
- trustworthiness,
- easy install,
- business insights
In the case of the Microsoft Store, the PWA application runs in a lightweight native app wrapper independent of the Microsoft Edge browser window.
Huawei AppGallery
As for Huawei’s official store, there is an opportunity to turn a PWA application into a so-called Quick App and upload it to the Quick Apps section of AppGallery. You can find step-by-step instructions on their official website. Once you have submitted the request to upload your PWA app to Quick Apps, you have to wait for the review.
Just like Microsoft, Huawei notices the benefits of PWA and enumerates them. At the same time, Huawei mentions the possibility of adding a Quick Apps Center as well as the icons of particular Quick Apps to the home screen.
Does PWA support desktop users as well?
Although one may think that PWA is a technology dedicated only to mobile use, such a conclusion is false. The most popular browsers/OSs support PWA features. Since the release of Chrome 73, desktop versions of PWAs are available on Windows, ChromeOS, macOS as well as Linux. As a result of this update, consumers that rely mainly on computers have the same User Experience as those using mobile devices.
Progressive Web Application – things you should know
Progressive Web Application technology doesn’t seem too complicated at first but in fact, there is more to this than meets the eye. In this section, I provide you with a bunch of significant information you should bear in mind while creating a PWA application. This includes the types of architecture used in developing PWA, tips on transforming a regular website into a progressive one, instructions on how to install it on a phone, and a checklist for a successful PWA app.
PWA architecture
If you go further into details concerning PWA, you will discover that these apps are developed according to two different architectural styles. They differ in terms of the page loading process and the extent of interaction between a user and the server.
Server-side rendering (SSR)
SSR is a rendering method in which the user’s request is sent to the server and prompts it to render the dynamic content, prepare an HTML page, and deliver it to the user.
SSR supports all browsers but the rendering is rather slow, so it would be more appropriate for sites that include mainly static elements, such as news based mainly on written content.
Client-side rendering (CSR)
In CSR, the user that requests the web page gets a default page, in which the dynamic content is rendered by means of JavaScript. The server is not included in the procedure, which speeds up rendering. However, without the presence of JavaScript, the whole process will be distorted.
CSR would be a good choice for sites that interact with the users, displaying dynamic content.
How can I transform my web app into PWA?
As always, it depends on how complicated your app is and what progressive features you are looking for. Anyway, adding a web app manifest file should be the first step in the process. It’s the core technical requirement. This file provides information about your web application in JSON format. PWA manifest can contain details about the web app name, description, background color, icon, or display mode (fullscreen/standalone/minimal-ui/browser).
How can I install a PWA app on my phone?
Unfortunately, there is no one answer to this question, and the way you can do it strictly depends on your operating system and browser. Yet, the whole process is quite simple and very similar between OSs/browsers.
In the case of iOS/Safari, follow these steps:
- Open an application that supports PWA, for example, Twitter.com, and press the Share button
- Select “Add to Home Screen” from the menu
- Confirm the action by clicking “Add”
- Add an app icon to the home screen.
PWA development – best practices
Here’s the list of points you should bear in mind throughout the Progressive Web App development process. Sticking to these rules may significantly improve the final product.
Make it accessible
You need to make sure that your app renders fast and that all elements function the way they should. Also, take care of the user’s comfort by inserting such features as autofill and automatic sign-in.
Do not overcrowd it
Select the major features you want to include in your PWA app. Too many of them may disrupt the application, which can negatively affect the User’s Experience.
Reduce undesired interactions
Take into account that the majority of people use PWAs on their mobiles. It means that all elements of the site will be squeezed into a small space, which may result in unintended interactions. Diversify the way in which these interactions are registered or apply responsive web design with the use of CSS to avoid such problems.
Keep it readable
If you want your site to be easily readable, drop the idea of customizing the written content with a fancy font. The more basic font you choose, the greater the chance it will be properly displayed on mobile devices.
Check whether it is available offline
Adjust your PWA app to offline usage. It will make it available even for those who struggle with a limited internet connection or encounter problems with the server.
Progressive Web App examples
At the beginning of this article, I have provided you with the key features and benefits of Progressive Web Applications. Yet, to have a better understanding of how PWA improves the overall performance of a platform, you should take a closer look at the specific companies that have already introduced the solution and benefit from this move.
Perhaps one of the most prominent examples of introducing PWA into an already well-run platform is the case of Twitter, and to be even more specific, Twitter Lite. The creators of this popular blogging tool came up with a solution that provided users with the best features of modern web technologies and native apps.
In Twitter Lite, pages are loaded much quicker due to the decreased amount of data required for the process. It is claimed that it takes less than 3 seconds to load an already visited page. Also, the PWA version of the website supports offline usage, as it retrieves the information of the visited web page from the cache.
Launching Twitter Lite on the market resulted in a “65% increase in pages per session, 75% increase in tweets sent, and 20% decrease in bounce rate.” Nicolas Gallagher, an Engineering Lead for Twitter Lite, said that “Twitter Lite is now the fastest, least expensive, and most reliable way to use Twitter. The web app rivals the performance of our native apps but requires less than 3% of the device storage space compared to Twitter for Android.”
AliExpress
AliExpress is an e-commerce platform used to sell products internationally. Due to the variety of goods and their competitive prices, AliExpress has about 150 million active customers worldwide.
Hence, a PWA version of the marketplace was developed to ensure the best mobile experience for all those users.
This step increased the number of new visitors by 104% and the amount of time spent in the online store by 74%. In addition, the number of pages visited by one user during a single session doubled across all browsers. These stats once again show how immense is the impact of PWA technology.
LV BET
One of the fastest-growing brands in the sports betting industry decided to step up its efforts and create a PWA app. The technology allows LV BET customers to bet anywhere and anytime using such features as a match tracker, fast deposits and payouts, cash-out options, prematch and live bets, as well as virtual sports betting.
What is important in a sports betting app development is a high performance determined by the huge amount of data that needs to be processed. This includes live odds, rates and wagers calculations, and statistics in relation to multiple sports simultaneously. The security of sensitive data, such as payment details, credit cards, and personal information is a critical requirement for such a platform as well. LV BET’s PWA app meets both of these criteria.
LV BET encourages its users to add the application to the start screen and highlights that once you have done it, there is no need to make any updates, which is one of the greatest assets of a PWA solution.
CasinoSinners
Although Casino Sinners is quite a novice in the iGaming industry, it has already gained many fans. It is partially due to the launching of a new application based on PWA that increased speed and security – the two vital elements that an online casino app requires.
Casino Sinners boast about using PWA technology, claiming that users can play whenever they want without glitches and delays in loading time, irrespective of device and browser.
Fantom Wallet
An e-wallet for the Fantom public mainnet that enables its users to store and transfer FTM cryptocurrency between accounts also took steps to enhance the comfort of its users by developing a PWA app.
Secure transactions, easy access to the wallet from the home screen, and the storage of relevant data in the case of repeated visits are the factors that positively influence the User’s Experience and make PWA technology a proper solution for FinTech services development as well.
The state of PWA
Despite all the benefits of the PWA technology, it seems to me that it will not replace native solutions in the nearest feature. Native SDKs are optimized not only in performance but also in UX/UI way. Another aspect is that PWA was a buzzword in 2017/2018, but things have changed since then and still, several features are missing. In my opinion, the progress of work is not satisfying. Mainly because we are talking about the biggest and the most powerful IT companies like Apple, Google, and Microsoft. For me, the winner in hiding work on PWA improvements is Apple company. Although they implement missing things, usually the company doesn’t even inform developers about new options. However, it should be clearly stated that PWA remains an excellent choice for many businesses, and frequently it’s the first and the easiest step to the mobile world for your app. If you want to find out if PWA is for you, contact a progressive web app development company like CrustLab and consult your idea.
