.webp)
Need a web app that also has features creating an impression of mobile experience? And want to deliver it fast? If yes, PWA is what you're looking for!
An introduction to Progressive Web App
Today’s world doesn’t exist without mobile. People are using their mobile devices for loads of activities - looking for a source of entertainment, ordering food, or getting in touch with their loved ones, just to name a few. We could tell presenting your business on mobile is to exist.
But you are probably aware of that. The question is - how to choose the solution best tailored to your business needs?
The number of possibilities might be overwhelming even for the engineers! Many solutions are being developed simultaneously, improved day by day. And rash investment into a randomly chosen solution can turn out to be costly and time-consuming. Unfortunately, there are no silver bullets when it comes to choosing the right technology for your business. One solution might be great for one use case but worse for the other. The best way of making a wise decision here is just to know your options and tell which one is most suited for you.
Let’s start with a brief description of the two most popular solutions for the mobile software: PWA and mobile (aka native) application.
What is PWA development?
PWA is an abbreviation for Progressive Web App. The name is pretty self-explanatory - PWA is a web application that has additional features creating an impression of mobile experience. It’s hosted on the server, like a regular website and can be accessed via browser. The technologies used in PWA aren’t any different from “traditional” web apps - these are HTML, CSS & JS. The trick transforming the web app into PWA is a file called <rte-code>manifest.json<rte-code>. It simply makes the website understandable for the mobile device. It can be pinned to the list of applications like any other one. The user, when opening pinned PWA, sees mobile interface.
How is it different from the native app?
The whole appearance is just a matter of styling and responsive interface. Under the hood, we still have a regular browser with a web application. We need to admit that modern tools let you develop a PWA app on a pretty good usability level. There are some nice features you can (and definitely should!) use.
Offline support
Because PWA is just a website, it doesn’t work out of the box without the internet connection. The default behavior will be provided by the browser (simple “no connection” info, or a bit more funky dinosaur game, which can be found in Google Chrome). But with a little effort, you can save your app to the device’s cache and try to maintain as much functionality in offline mode, as possible. For example, you can provide access to the previously cached emails, but display a warning that the content may not be up to date.
Push notifications
Notifications in some cases are a must-have - it’s hard to imagine e.g., message app without those. Also if you are offering transport services, food delivery, or anything else which we could call a process, it’s great to notify users when something changes. In PWA, push notifications can be implemented using service workers. Those chunks of code will be running in the background, reacting on the defined events. That way user can still be notified even if closes the browser himself or the OS will decide to kill the app.
Splash screen
You can add some screen which will be displayed in the app load time. This way user sees something more entertaining than just a blank page. Also, this feature brings you closer to the mobile experience user is expecting.
Pros and cons of PWA
Thanks to the aforementioned elements:
- offline support
- push notifications
- and splash screen
your app is really mobile friendly! But, unfortunately, this intriguing technology has its limitations. For instance, you don’t have access to the mobile advanced features, like NFC or SMS. Some of the features might be working or not, depending on the browser user opens your app in. And, of course, you need to remember it’s still the website. It’s not made with mobile OS compatibility in mind, which has an impact on the performance. Full list of currently available APIs in PWA
Now, let’s wrap up PWA’s pros and cons:
Pros:
- Works on both mobile platforms and the desktop at the same time
- Can use most of the popular mobile features - camera or push notifications
- No need for the Apple or Google Play developer key - lower costs
Cons:
- Can’t use mobile advanced features like SMS or NFC
- Low performance for media
There’s a high probability, your business doesn’t really need great performance nor advanced mobile features. If those limitations are not a problem for you, it’s definitely a good idea to give PWA a go - especially if you already have your website. Adding basic mobile support requires one new file - manifest.json - and providing an RWD layout. If your website is modern, it may turn out the migration will be really easy! But it’s good to think this decision through. If you expect your business to develop in a direction where you’ll need top-notch mobile experience, PWA might not be enough. Luckily, there are more options!
What is a native mobile app?
Native application is a piece of software developed for a specific mobile platform (OS) - Android or iOS. In the past, there were more mobile operating systems, but now the market is dominated by those two.
Such applications have the form of a bundle and can be downloaded from the stores - Google Play Store or App Store. Although mobile apps can’t be viewed in the browser, you shouldn’t worry about it. It might turn out you don’t need browser positioning to reach your potential users! According to the research, App Store and Play Store are pretty crowded places and this is the preferred way of searching mobile apps for many people:
But what is a mobile app from a technical point of view?
Technologies used for mobile development are Java and Kotlin for Android and Swift and Objective C for iOS. Those languages are the same ones, which mobile operating systems are made in, so there’s full compatibility between your app and the device. What does it mean? First of all, a smooth app performance. There’s no need for any layer of communication between different technologies, so this process is fast. This is especially valuable for all media types - like video streaming or mobile games.
There’s also the visual advantage here - all native components look like the ones which mobile user is used to. You don’t have to put any additional effort into styling here. The other big plus is full access to the device advanced features like calls, SMS, or NFC.
But of course, like every solution, it has good and bad parts. We could tell the pros and cons of the native app are quite the opposite to the list of PWA’s pros and cons list. Great user experience and performance are expensive in this case in terms of resources.
As you might have noticed, to reach most of the market, you need to keep the double codebase. You have to develop all the features for Android and iOS at the same time. Also, you need paid developer account in every store you want to publish your app in.
Pros:
- Good performance
- Great user experience
- Access to all device functions, like NFC payments or SMS
- Can be found in Google Store or App Store (see below) - good range
Cons:
- Double code base - Kotlin code can’t be reused in iOS development
- Need for a paid development key to be able to upload the apps to the stores
- Can’t be viewed on the web
Progressive Web App vs. Native
Now you know a bit about both technologies. None of them is perfect, both of them have their merits. To better compare those two and maybe help you to choose between them, let’s think about a few use cases.
PWA and e-commerce
Let’s think about the e-commerce use case. What type of store is that? Who is our customer? Answering those questions may make clearer which features do you really need. For example, a medical equipment store might be used by many elderly people. In this case, it’s especially important to think about the user’s needs. Accessibility is supported much better by the native apps.
Accessibility on the web is also possible to do, but might be not as consistent with current user’s habits as while using native app. It all depends on the development. Learn more about the accessibility in the native apps.
But I bet you are not planning big multimedia streams in your store, so performance should not be a problem. Most of the APIs you could need are supported in the browser - let’s say push notifications to inform your customer about the order status change or geolocation for your delivery staff. Also big plus for the PWA is having a desktop version at the same time, which may be convenient for some of your customers.
Depending on the target group and your store structure one option might be better than another. For most use cases PWA is enough, but make sure your app is accessible and user-friendly!
Social media app
Social media are the type of apps that truly changed our society. And both number of those apps is growing, as well as the number of social media types. Producers are getting really creative giving us new opportunities to share moments of our life with friends using media, organizing conferences, and so on.
There are some APIs attractive to use in a social app, but unfortunately not available for PWA:
- Contacts access - could allow the user to find all friends using your app without entering contact info manually
- SMS/MMS - could allow using one-time password messages, or sending invitations to your app
Also in the case of media (especially video files and streams), the performance is a pain point. Those tasks are much easier achievable in the native apps.
For a very simple use case, it could be possible to provide an app in PWA. But it would limit future possibilities and be less convenient for the user. Native apps have a big advantage here.
Mobile game
It’s hard to list here all types of mobile games and describe them somehow. This is one of the most popular app categories nowadays!
But long story short: the more interactive your game is, the more likely you need the native app. If the gameplay consists of simple inputs or taps (like sudoku or Flappy Bird), the simpler solution the better.
PWA is more friendly in terms of cost and maintainability, so definitely it’s worth giving it a go. But if your app requires more interaction with the user, things get complicated. Here comes one of the biggest mobile development challenges (in terms of performance): animation based on gestures. Developing naive implementation tends to be laggy and providing a lousy user experience.
Why is that? It’s connected with the number of touch events and operations which need to be done every event. While handling touch events in JS, we need to “translate” all instructions back and forth between JS and the native (Swift or Kotlin), which obviously takes some time. And the number of touch events can be throttled, but nowadays 60 FPS is considered smooth. In general, it varies between several dozen to several hundred per second.
Native implementation also gives you more user-friendly sound management. You can "tell" smartphone which sounds are the main effects, which are background soundtrack, etc. That information helps OS to manage the sound level of those basing on current user’s settings (like Do Not Disturb mode).
Also currently Virtual & Augmented Reality is not possible using web APIs.
For a very basic entertainment app, it might be nice to use PWA, to allow the access also via desktop browser. But for any type of advanced interactions, graphics rendering, or more advanced soundtrack, the native app is a way to go.
Wrap up
Depending on the countless nuances PWA or native app might turn out to be better for you. Those small case studies above are definitely not the comprehensive guideline.
As mobile services are countless nowadays, it’s likely your business falls into a totally different category. Or maybe you just don’t feel neither PWA nor native app is perfect for your business. Maybe you don’t want to maintain double codebase, but you need some advanced features?
Don’t worry, modern front-end world has a lot of alternatives to offer! In such case, the solution might be a cross-platform development.
Other alternatives - cross-platform development
Cross-platform development is a term describing all types of technologies allowing to reuse one code on many platforms. We can split the mobile cross-platform solutions group into 2 subgroups.
First group: Non-native code packed into native wrapper
Such frameworks allow us to run some code in the wrapper which is able to communicate with the native. Usually, the wrapper is a webview native component. But inside this native wrapper, we still have JS, HTML, and CSS (at least for such frameworks as Ionic or Apache Cordova). There are 2 main differences between those solutions and PWA though:
- Publishing channel - cross-platform libraries create the same file type like native apps and can be published in App Store or Play Store;
- Browser independency - cross-platform apps provide a wrapper for themselves so don’t need a browser to run.
But the limitations are similar - low performance and APIs limitations (no possibility to use NFC, SMS, etc.).
Second group: technologies actually compiling to the native
Those technologies go a step further - compile the whole UI to the native. Usually, the coding language used here is JS or Typescript - it is the case for such libraries like React Native or NativeScript. Some frameworks use different technologies, e.g., Flutter uses Dart and Xamarin uses C#.
But the important thing is, the whole app is prepared in one language - including styling! Then, the library compiles all your UI code to the native - Kotlin and Swift. This obviously solves the main issue of the native apps - need for keeping a double code base. You get your iOS and Android bundle at the same time! The file gets the same format as native apps, so it can be published in stores.
It also makes the app much more performant than PWA. Interface “lives” directly in the native OS, which makes it easier for the OS to calculate proper sizes or do any optimizations, without sending data back and forth. Also, we can use some logic pieces prepared in the native language, e.g., attach a fully native player. This means we have access to the whole device functionality - including SMS or NFC.
Cross-platform solutions web support
An important thing to note here is that cross-platform solutions - as opposed to the native apps - can be viewed in a desktop browser. Adding new platform support here is not as straightforward process as in PWA case - adding literally one file and you’re good to go - but it’s possible without rewriting the whole app. As e.g., React Native uses JS for business logic, those app pieces can be used directly. But the interface is built using special JS syntax, not being able to be read by the browser.
Luckily for us, there are tools like React Native Web library, which help you convert your app to the HTML and CSS. It usually still needs some visual fixes as such conversation is non-trivial, but it’s mostly automated.
Cross-platform pros and cons
Cross-platform development sounds like a mobile win-win but, like everything in this world, it is not perfect. Comparing to PWA, it takes more time to develop an app, especially if you already have a web app you could reuse.
Thinking about the performance, it can be somewhere in the middle - better than PWA but worse than the native app. A lot depends on the implementation here. While for casual interaction it will provide good user experience, for extreme use cases we’ll have the same problem as with PWA - too much data flowing in the app and making it slow. We can make a workaround by implementing some of the functionalities in the native language and attach those modules to the JS app. But these modules won’t be cross-platform anymore and will need to be maintained both on iOS and android.
To give you a clear view of how it can be compared to the PWA or native apps, let’s wrap up its pros and cons.
Pros:
- Available both in mobile stores (App Store, Play Store) and in the desktop browser
- Great performance and UX
- Access to all mobile features, including SMS, NFC or Augmented Reality
- Single codebase
- Can use native modules directly
- Easy learning curve for front-end developers - most libraries use JS
Cons:
- Delivering for the desktop require additional work
- Performance might still not be good enough e.g., for advanced rendering
- Access to the newest mobile APIs can be delayed until library maintainers will add the support
Summary
Modern technologies hand you a lot of tools to choose from for creating your perfect mobile application. Mobile development can be faster and bringing more outcomes than ever before. You don’t really need to get ready for any sacrifices - under the condition you prepare yourself well and do the research!
Taking some time to specify your current and future needs can save you a lot of time and resources later. It’s much easier to add new functionalities to the app which was prepared for that than creating a new app from scratch because the previous solution wasn’t elastic enough.
If you need basic mobile features and want to deliver the app as soon as possible, PWA is the perfect solution for your business. If you think you have bigger needs, you have a lot of possibilities to choose from – and we can help you implement them with our diverse React Native development services.
Remember that this decision is not binary - it’s possible your business is specific and your needs are different. Maybe your mobile app is just a small piece of your marketing plan or you just prefer to contact your customers some other way? If you’re still not certain what to choose, you can always talk to someone experienced who can talk with you in detail.
Last, but not least - modern technologies world is changing rapidly. Be sure to always keep up to date - maybe something you worry about today will be fixed very soon!
