Pro tips how to overcome common Progressive Web Application challenges

Being a co-founder of Solidstudio, Paweł has got to see all the development phases. He’s a skilled professional with years of experience, both in the software and in the eMobility worlds.

Paweł Głogowski

Common challenges with PWA can be fixed in a variety of ways. In this article, I want to share some practical tips and solutions on how to resolve common issues of Progressive Web Applications. Refreshing, service-worker configuration and updating to save time and achieve smooth flow and be ahead of your users' needs.

This is the second part of our series about PWA. If you’d like to learn how to change your web page into a Progressive Web Application, be sure to check out our previous 

 application that can be served as a Progressive Web Application. We follow a 

 approach to enable quite frequent changes in the product and ensure that our users get the latest content of the application.

 is heavily cached, serving the latest content to users can be challenging. It’s not possible to refresh the application when you’re in standalone mode so we have to do it differently. We spent some time preparing a user-friendly solution that would allow users to get the latest version of the application quickly.

Different ways to refresh your application

Developers can approach the problem of refreshing the application in different ways. 

The easiest way could be adding a fixed refresh button that is available only on the 

 version. It might be the easiest way since it doesn’t require any interaction with service workers. However, it’s not very user-friendly. Users may not be aware that the latest version of the application is already available and ignore that button.

The second approach could be informing users when the application is showing on the screen. So once the new version is available, users will see some indicator bar with a refresh button. That way, they will know that there’s new content to fetch from a server. Let’s take a look at how that’s indicator bar could look like.

We can achieve the above effect by using 

. Take a look at the following code to see how to achieve it. To get the best result, you should show this bar only to users in a standalone mode (PWA) - we discuss this in our previous article (link) so make sure that you generate that bar only in standalone mode. Additionally, you can style your snack bar to suit your application best.

You can see two handlers in above code - let's see how they can looks like:

We don’t want to allow refreshing the application because we notice some unexpected behavior on iOS - it tends to fail randomly or behaves in an unstable way after some refreshing, so we encourage users to kill the app and reopen it. However, refreshing seems to be stable on Android and Chrome, so for Chrome users, you can change the bar and show the refresh icon so users can refresh the app to get new content on their own.

From the programmatic perspective, nothing interesting is done here - we just show a bar and allow the user to close it. The more important thing here is how we indicate that a new version of the application is available to the user. To do that, we need to define a proper callback for updating service workers and force them to be updated. More on that in the next part of the article.

How to update Custom Service worker callback?

Let's take a look at the service-worker configuration generated during the development of a React application.

I have highlighted the most important parts of that code snippet. As you can see, we add a listener on the state change of service worker. It will be executed when changes occur in the service-worker. It might be misleading that we’re watching for the ‘installed’ state. But the existence of the controller property indicates changes in the service worker. What we need to do is to pass the config object with the callback onUpdate function. We usually need to register our service worker in the index.js file. Here we pass the object with the onUpdate property which is a callback function.

Making your application usable in case of the lack of an internet connection isn't going to be a part of this article. Instead, we will focus on enabling users to install your application for both iOS and Android applications.

How to skip waiting for a new service worker?

However, it's not enough for the configuration of service worker. Because we want the new service worker to take over the old one immediately, we need to configure it to skip waiting. If we don’t do this, the new service worker will be available after the user navigates the refresh current page. It's not always an option since we observe some major problems with refreshing the page in the PWA mode. Visit the following 

 to understand the service worker lifecycle better.

To configure the service worker to skip waiting, we need to add some code to the default service worker implementation which is provided when we generate a sample project. To do so, we will use a tool called 

. So we first need to add a proper dependency to the package.json file along with the modification of the build command. It should look like this:

Note: The following example is valid for React application, but it will look quite similar for application build in other technologies.

You need to provide code for your custom service worker. For now, it will be very simple and will only contain the service worker skip waiting logic. This code will be appended for the actual service worker code.

It's not much code, but right now we can be sure that the new service worker will take over the old one.

How to “update” Service worker, i.e. check the availability of the latest version?

So far, it all looks quite straightforward, but we need the most important piece of the whole picture - we need to know when the changes to our web application occur. In order to do this, we need to force our service worker to “update”. The name for that operation may be confusing because it’s not update itself - rather, it’s checking whether the new version of the application is available. Let's take a look at this piece of code:

This will download the newest version of the service worker file from the server and compare it with the current version to detect any differences. It will fire an event that we can handle by 

 which was described previously. You may ask how the application “knows” that there were changes in code. When you take a look at the build directory, you can see a file like this.

If you see the content of this file, you will notice something like this:

When any file changes, then in precache file there will be different revision numbers and name of precaching file hash ( in the name ) changes. This file is included in the service worker file so if the name is changed, then the service worker file changes so the service worker can notice that change.

How to add a Progressive Web Application to the home screen in iOS?

The last thing we need to cover is determining when to check for the update. Of course, using the setTimeout() feature available in React allows to periodically check for updates of the new version. But this approach can cause some unexpected issues and unnecessary performance costs so we believe that it’s not enough.

We decided to take advantage of the PWA lifecycle and web API visibility change feature, so once users display the main screen of the application, we catch that event and force the service worker to update. Let's take a look at the following code:

Note: This approach may not work on Google Chrome. If you’re using Chrome, consider different events like scrolling or clicking a button.

We can catch the visibility change event which is fired when the application is displayed on the user’s screen. However, this event is fired when the app is shown and when it’s hidden so we need to check what the value of the hidden property is to determine if it’s displayed.

So now we have all the pieces fitting together and the final flow looks like this: The user opens PWA --> PWA catches the visibility change event and forces the service worker to update → the service worker checks if a new version of the application is available → we handle the update event by showing the refresh bar to the user → The user restarts the app (iOS) or refreshes it (Android) to get new content.

You can see that there are some differences between iOS and Android. To help you understand that better, let’s take a look at the following table.

As you can see, there are a lot of different pieces involved in the process of refreshing your PWA. But in the end, it will be very beneficial for your users. At Solidstudio Software House, we followed this approach in our product 

 to make sure that users have the latest version of the application. In our experience, Chrome seems to have a more stable and reliable environment when it comes to supporting PWA and we still need to fix some unexpected issues for iOS.

Learn how to overcome common Progressive Web Application challenges

Tips how to prepare a web application for installation on a mobile device

, almost 50 percent of total Internet usage in the UK comes from mobile phones. Similarly the United States and Europe. Various reasons account for that, but essentially it's because accessing the web using a smartphone or tablet is handy and convenient, particularly for specific sorts of applications. Before I reach the clue of this article - how to add a web page to a mobile device as a Progressive Web Application - I want to clarify some related matters regarding Progressive Web Application.

And why should you be one? The term mobile-friendly has begun to appear in the media more and more often with the growing boom of these handy portable devices - smartphones, tablets and their subsequent variations. For many, initially, mobile-digital was considered just another quirk, but over time it has become a permanent fixture in the canon of being customer friendly. Creating and developing mobile versions of websites, e-commerce and marketplaces became a standard. Simply, because this meets online users' expectations. Plus, from April 2015 Google uses mobile-friendliness as a ranking factor. In a nutshell, becoming mobile-friendly, or even mobile-first is beneficial for all parties. For users means better adoption, for business increased visibility & profits and being on the cutting edge of the Internet - mobile-friendly solutions are essential.

Taking a mobile-friendly approach, or becoming mobile-first cannot be achieved without one more factor - Responsive Web Design.

Responsive web design is an approach to web development presented in 2010- five years before PWA was introduced to the world. The general idea is that design responds to the user’s device - size, motion, and orientation. Responsiveness is achieved with the use of fluid grids, flexible images, and media queries. The approach excludes time-consuming development phases which were earlier needed to fit the different screen sizes on the market. Flexibility and the speed of development of responsive websites became a common practice. Now, almost every website you visit is responsive in its nature.


What does PWA have to do with a mobile-friendly approach?

Building a custom application for multiple platforms is usually time- and resource-consuming. In the era where most of the information search and purchases is done online, and the majority of smaller businesses must meet the market demands at the most inexpensive charge. That's where Progressive Web Applications (PWAs)  and responsive design come with help. PWA generally allows you to easily convert your web application into a native application or at least something which is more or less similar to it. PWA, thanks to its fast performance and compatibility with multiple browsers, ranks highly in Google search results. Hence, solves Google's search engine algorithm ranking issue, being mobile-friendly. Websites based on Progressive Web Application appear higher in search results. In this article, I'm going to show you how to add a web page to a mobile device as a Progressive Web Application.

How to build a Progressive Web Application?

Your application needs to meet specific criteria:

It's served over HTTPS for security purposes.

Responsive web design - it needs to look well on various mobile devices.

It should work even when there's no internet connection or at least show an information screen about the lost connection.

It includes "manifest.json," allowing us to add a shortcut to the mobile screen.

It should work well with slower connections.

Let's focus on the manifest.json file, which is required for adding your application to the device's home screen. It basically contains information about the icon's starting address. Let's take a look at the following example of manifest.json file:

yourApplicationName

How to "install" your website on a mobile device?

Before we begin, note the huge difference in the attitudes to Progressive Web Applications. In general, Google supports PWA and wants to increase its popularity, while Apple prefers users to install native apps bought in the Apple App Store. However, due to the popularity of PWA, Apple began to support this from version 11.3 of iOS. Starting from version 12.2, PWA works quite well but is still not as stable and fast as on Google Chrome. Let's take a look at how to install your web application on Android devices.

First of all, you need to use Google Chrome because other browsers don't support PWA yet. Google Chrome fires the "beforeinstallprompt" event, which can be handled in a customized way. To do so, add the code shown below on a high level of the application. For a React application, that can be the App.js file.


Without that, you'll see a Chrome embedded info bar with a message like "Add This App to Home Screen" along with the dismiss button. When dismissing this window, expect it to pop up once again in a couple of weeks. You may ask: why bother with a custom solution? Well, first of all, you can create your own solution - it could be an info bar, a banner, or whatever else you want. It can also be customized in terms of colors and layout. A custom solution will significantly improve the user experience. In the above example we use a snackbar to inform users about the possibility of installing the application.

It's basically will show a banner like this

Keep in mind that you should declare deferredPrompt as a global variable. If you fail to do so, the prompt window won't open once again after clicking the cancel button. I believe that the rest of the code is self-explanatory.

Also, you can easily determine if you're using PWA mode. That can be useful because you don't want to show the info bar to users who are already using the PWA. You can do it using the following code:

How to add a PWA to the home screen in iOS?

Unfortunately, accomplishing the same in iOS is far more complicated. Basically, we need to do it manually. The only thing that can be done from the application perspective is showing some kind of information on how to do it. At Solidstudio Software House, we use a snack bar widget that appears at the bottom of the application with a short instruction about how to add it to the home screen. Also, keep in mind that adding a PWA to the home screen in iOS is available only on Safari, and the event "beforeinstallprompt" isn't fired on iOS.


The only challenge here is determining whether the actual device is controlled by iOS. We can do it by analyzing the user agent string. Unfortunately, starting from iOS 13 we can't identify whether it's an iPhone or iPad - instead, it will always show as "

." This is tricky, because we need to recognize if the device is a phone or a tablet. Also, we need to indicate if the current browser is Safari (it doesn't make sense to show that bar on other browsers than Safari). As it turns out, that's not easy, because all browsers on iOS are wrappers on Safari. Consider the following examples:

We search for an iPad, iPhone string in the user agent string for the older version of the iOS system. Analyzing the user agent string, we notice that Safari agents have no references for 'CriOS' or 'FxiOS'. So in the newest version of iOS, you have to determine if the device is a mobile one. At Solidstudio, we use a simple but effective solution to determine it by the width of the screen. Since iPads has 1024 screen width, we can use the following code:

Despite challenges, PWA can be beneficial

Like many solutions, there are some cons. It requires a lot of research and development for a custom solution, but once an effective mechanism is created, it encourages users to install applications on their mobile devices. We worked with the PWA technology in our project for 

. We blend top technologies to offer users native experience and increase engagement with the app. Since PWA may cause some disruptions, here we wanted to share some insights from our experience. Some more solutions, when we are struggling with the auto-refresh of the application in standalone mode, soon will appear on our blog as a follow-up to this article. To stay updated, make sure to subscribe to our newsletter!

Learn how to make usable Progressive Web Application on mobile device.

How to install a Progressive Web Application on a mobile device?

Find tools and libraries which are pretty popular among Android developers.

Bartłomiej Smuga

Android app development requires choosing appropriate tools and libraries to get a kick and run the application in a reasonable time schedule. As usual, the most time-consuming task is to research possible solutions and select the correct one. In this article, you’ll be able to find tools and libraries which are pretty popular among Android developers and pose as good choices for starting.

Coroutines are one of the best ways for asynchronous programming in 

. The idea behind this is to make functions suspendable. It means that the function's execution can be hung at some point and returned later on. One of the advantages is that writing suspendable code with coroutines is nearly the same as writing synchronous code. Besides that, Kotlin’s coroutines are integrated with Android Jetpack’s View Models. These models provide a dedicated coroutine scope `viewModelScope` which is being canceled when the view model is cleared. Combining these two makes an asynchronous programming a piece of cake for developers.

The usage of Kotlin’s coroutines is as simple as visible in the example below:

Android Jetpack is designed by Google, containing all necessary components, and implements mechanisms that speed up the development process. Being continuously developed, Jetpack gains more and more components, like e.g. hilt - which provides a mechanism for dependency injection, compose - this is an alternative way for building an app’s UI. Examples presented above are being currently under development and released in alpha versions. However, there are some especially useful components already available in stable versions:

The ViewModel is designed for storing and managing data retrieved from HTTP API or database. That is an inherent element of MVVM architecture, remarkably popular among Android apps. The ViewModel class protects data from reloading when UI configuration changes. Hence, our API won’t be called for data when the user rotates the screen. The Android framework may also decide to slay or re-create a UI component in response to some user’s actions. ViewModel in the application prevents data from being loaded once again, thus app performance increases significantly.

The ViewModel is not the only mechanism for preventing the app data from configuration changes, however, it becomes a comfortable alternative for other solutions. Saving a UI state using ViewModel is much easier than e.g. overriding the `onSaveInstanceState()` method. The advantage of ViewModel is that it doesn’t require additional code and handling. The persistence logic is invisible from the developer’s perspective. Using the app state requires handling both saving and restoring that state in each activity and fragment. This means additional code and two more things to remember during development. Also, the instance state is not recommended for saving heavy objects and collections. That is the moment when we should use another persistence method, which means more code and room for potential bugs.

The navigation component helps to handle the user’s journey paths in our apps. The set of introduced principles is especially useful to ensure that user experience is consistent, and predictable when going through the following screens. The Navigation uses an XML graph component that declares allowed paths for users. This component provides by default some features that are time-saving, e.g.: handling up to and back navigation correctly, standardized animations and transitions between screens, passing arguments between fragments in specific paths, scoping ViewModels, and sharing its data between multiple UI components. The Android Studio support here is also another advantage. Provides a Navigation Editor which makes graph creation as easy as just dragging and dropping specific actions.

Data Binding library saves developers from writing a bunch of boilerplate code. This library allows binding UI components in layouts with data sources using a declarative format, instead of programmatically. Data Binding replaces using the well-known method: findViewById() in Fragments and Activities, by just placing the assignment in XML layout file as shown in the example below:

The Data Binding supports also two-way assignments, so we are able to use with all kind of inputs or views. The only difference is that we need to add a “=” sign after the “@”, as below:

Nowadays the HTTP is the way that application networks in order to exchange data and media. Kotlin doesn’t provide a built-in module for networking, so Retrofit in combination with OkHttp becomes the most efficient way for consuming APIs. Retrofit requires declaring HTTP API endpoints as an interface, which is used to generate an API implementation service. The library provides a full range of HTTP methods, which are interface annotations, as shown in the example below:

The builder class provided by Retrofit allows us to configure the service URL, as well as the converter factory for request, and response serialization, plus the HTTP client, which in our case is the OkHttp. OkHttp is the HTTP client that allows us to specify the requests interceptors, as well as connection timeouts like read, write, call, or connect timeouts. Also, OkHttp builder provides methods for setting custom protocols, connection pool, and other options, giving an opportunity to connect almost every service via HTTP.

Unfortunately, Kotlin doesn’t provide a module for automated dependency injection in Android apps. This is the space for Dagger - an easy and flexible, fully static framework, which performs its work at compile time. Dagger creates and manages the graph of dependencies for our apps, saving a lot of boilerplate code and boost development. Proper Dagger configuration may become a challenge for developers doing it for the first time, however, it is still worth the effort. Accurately configured Dagger makes a dependency injection as easy as in Java, which basically means using just @Inject annotation. Of course, there are other tools available for dependency injection which are gaining popularity among developers. While Dagger has been around for a pretty long time already, that is still one of the most popular libraries which can be considered as a standard used for creating complex applications.

The basic example of providing and injecting dependencies:

There is no one perfect existing solution to solve all the obstacles when developing a steady app, but with a bit of help, good network skills, imagination, and a mix of available solutions you can deliver excellent results for your project and its users.

Find tools and libraries which are pretty popular among Android developers

Android development starter pack

The key to success in developing custom software.

Being an eMobility leader in various projects across multiple startups, Piotr was responsible for OCPI and OCPP integration as well as EMP and CPO platforms development. With extensive expertise in the open standards field and eMobility tech solutions, he is leading teams of experienced developers and contributing with invaluable knowledge and experience.

Piotr Majcher

 is one of the most demanded services today. Organisations that want to gain a significant competitive advantage and boost their operational efficiency invest in tailor-made software solutions that meet their needs better than off-the-shelf software.

Developing a bespoke solution takes place during five different stages where development teams first engage in business discover, proceeding to design, development and quality assurance, and launch. The first stage is critical here - that’s where software development companies get to understand the needs of their clients and can propose solutions that address these problems.

But to ensure that your bespoke software development project is successful, there are some things you should know.

At Solidstudio, we have a lot of experience in designing

for our clients. Over the years, we’ve developed a range of processes that help to make development smooth and successful.

What are the key benefits of bespoke software development?

But first, let’s see why so many companies are investing in bespoke software solutions. Here are the benefits custom-made software brings organisations.

Access to cutting-edge technologies - considering the pace of technological development, it’s rare for software vendors to accommodate all changes and trends immediately. Custom software development takes advantage of the most recent innovative technologies to bring you the most up-to-date solution.

Scalability - a custom software solution can grow together with your business because it’s easy to scale it to match new requirements. A software company will not only build your solution but maintain it in the long run, ensuring that it scales to support your growth.

Security - a solution available on the market and used by many businesses is an easier target for hackers. A Tailor-made solution will address all the vulnerabilities specific to your business systematically, protecting your business against cybersecurity threats.

Cost efficiency - a customized software solution is designed to work with the software you have. That means you won’t have to invest much in extra hardware - while that’s often the case in licensed software.

Easy integration - organisations often use multiple off-the-shelf software solutions to match their needs. But using several programs at once in challenging in terms of procurements, licensing, and maintenance. By developing a single tailor-made solution, businesses can integrate various processes into one tool.

Support and maintenance - a custom solution comes with reliable technical support and product maintenance plan. The development team that has developed the product will help you resolve any problems quickly and efficiently.

Bespoke software development - how to do it right?

To maximize the ROI from a bespoke software solution, organisations need to have an in-depth understanding of practical problems they want it to solve. Having a strategic vision of the solution is essential to ensure that it perfectly matches a company’s needs.

To start a software development project, organisations need to team up with a trustworthy and experienced custom software development company. It’s important to choose a reliable tech partner who has experience in managing such projects and excellent track record of implementations.

Successful bespoke software development requires smooth cooperation between the development team and the client. Regular communication is paramount here. That’s why it’s best to choose a company that has communication tools and processes in place to support such collaborations.

Are you looking for an experienced software development company to help you build a bespoke solution? Get in touch with us; we have the skills and know-how you need.

The challenges of Progressive Web Apps

04 JUNE 2021 • 16 MIN READ