Stfalcon Answers to the Most Burning Questions About Progressive Web App Development

End of June Stfalcon arranged a number of Meet Ups in Kiev and one of them was devoted to progressive web apps development.

Progressive Web Apps is the technology and the term, which came to exist in 2015, however, lots of people, even experts still have rather a vague notion of it. That’s why we thought it would be interesting to the professionals of the sphere as well as to our clients and audience. We have rather an interesting discussion and event on the whole, with lots of findings, insights and inspiration in the end.

So, now let’s see what the PWA is and whether Progressive Web Apps development is worth the cost.

What is a PWA?

Firstly, let’s turn to the official definition provided by Google, the internet giant calls PWAs a user experience that has the reach out of the web. According to developers.google, such solutions are reliable, fast and engaging. It seems to describe only the qualities, which the apps have, yet, the definition fails to reveal the actual essence of the progressive web applications.

Are PWAs some abstract patterns, or do they include lots of technical approaches at a time, that they are so vague?

In fact, they do comprise a stack of such technologies as JavaScript, HTML, and CSS. They lingered and grew at the periphery for some time, remaining invisible to ordinary users and even some IT professionals.

Do you wonder why progressive app development was unnoticed?

The PWAs are just like ordinary sites, at least they start their life as regular tabs. Yet, they are created using features as TLS, Service Workers, Manifests, and their design is responsive. They then keep to the permission model ask-when-you-need-it. At the moment when a browser is sure, you use the website in the form of Progressive App often enough the query is shown to add it to the home screen or app launcher.

Thus, though not packaged and offered in stores for download, the web applications of such kind can be stored on the home screens and added in the notification trays.

This is the new qualitative level which allows PWAs to win a place on the home screen. Then they blend into the environment and can operate full-screen online or offline when launched from it.

So the modern sites progressively become «apps» though deliver much better UX than ordinary web applications.

How they manage to provide an exceptional UX?

One of the major peculiarities of PWAs is their reliability. They continue working even under weak network conditions. The users never see the dinosaur, because the key resources are pre-cashed by service workers and this eliminates the dependency on the network. PWAs load instantly in any case.

Speed is another key benefit of the web apps, they always provide fast responses to the users’ actions through smooth animation, besides no scrolling is required. It’s crucial because more than 50% of the users abandon the sites which load longer than three seconds.

Engagement is the feature to be mentioned as well. Each PWA looks like a natural application, it offers a full-screen interface and the possibility to re-engage individuals by means of push notifications.

Besides the users can regulate how the app appears and starts, specifying the icon they wish to see, the page to load on app opening, the orientation of a screen, and certain other options.

What are the Challenges?

Having a number of advantages (offline mode, being app-like yet working like a site, quick page load on mobiles, better performance, push notifications, etc), the PWA’s, however, have certain difficulties, you should be aware of.

1. Limited functionality. Though a PWA replicates a native application, it often lacks certain essential features. Their access to GPS, NFC, fingerprint scanner, camera controls, and some other technologies are limited.

2. Quick battery running down. The use of Progressive Apps drains the gadget’s battery faster than native applications.

3. Loss of traffic. The PWAs are not distributed through the stores, so they lose the traffic, which can be received from the App Store or Google Play. It may be quite significant.

4. iOS limitations. There are certain difficulties with PWAs usage on Apple devices nowadays, the features available on Android are often missing on iOS, for instance, push notifications and home screen shortcuts.

5. New tools and paradigms required. The precedents of progressive web app development are still not widespread, that’s why when considering the creation of such an application you should keep in mind that it requires application architecture, event management, state, and cashing included. All the work necessary for building an app should be done for the web, so the new tools and approaches should be mastered.

6. No Open Source solutions. The progressive generators deal just with the simplest aspects of PWA creation, Manifest creation or ServiceWorkers basic functions, however, the integration with major e-commerce and marketing platforms or other components optimized for speed and conversion will require some effort.

7. Speed does not come automatically. Booting rapidly requires a sophisticated comprehension of mobile web performance and proper implementation of the necessary features.

8. Updates maintenance. Web features are launched and updated at an unprecedented rate: Accelerated Mobile Pages, native payments, credential management API, etc. That may cause certain challenges at times and the developers should anticipate and try to eliminate difficulties in advance.

9. Analytics is not simple. The existing third-party integrations, like analytics, are not supposed for running in the PWA context, so you need a platform to solve such problems for you.

Why building progressive web apps is worth it?

To create a progressive app of high-quality can have incredible benefits, through increasing user engagement and consequently conversions.

First of all, they are always at the user’s hand. Besides, engagement increases almost 4 times with push notifications.

Since less data is required for transaction completeness, conversions also grow in number. To be substantive, let’s check the key facts and numbers form the PWAs’ effectiveness study.

  • The increase in traffic from mobiles exceeded 68%.
  • A PWA loads and installs up to 15 times faster than the ordinary app.
  • A PWA requires 25 times less storage space.
  • The conversions increase exceeded 52%.
  • The time spent on site grew by almost 80%.
  • Engagement grows by 137% on average.
  • Page load time is about 2.75 seconds.
  • Bounce rate is decreased by over 40%.

Mobile users mostly prefer applications due to the fast interface and simplicity of usage on small screens. By 2022 the app downloads are predicted to rise up to 45%, but progressive web development allows mimicking the smartness of a mobile app without staying restricted by a device system.

Low development cost is one more factor speaking in favor of progressive web app development. When you build a progressive web app no multiple versions are required for different platforms. PWA can work on any endpoint, thus the cost of development is significantly reduced if compared to native apps creation.

What are the well-known Progressive Web Apps?

AliExpress.

A perfect progressive web app sample is the website of Alibaba Group, which was converted into a PWA several years ago. There were 2 reasons for it: the website failed to engage mobile users while the mobile version did not convert visitors into application users.

The result was a significant enhancement of the UX and overall site performance. AliExpress observed:

  • almost 75% increase in time spent per session,
  • twice more page visits per session,
  • 104% conversions growth.

Forbes.

The top American business magazine developed a Progressive Web App not long ago. However, it has already resulted in:

  • 100% increase in the rates of engagement,
  • 43% growth of sessions per one user,
  • 20% more impressions per page,
  • 6 times more users completing articles.

Screenshots of Lancôme, Forbes, Ali

Lancôme.

The luxury cosmetics brand from France present worldwide noticed little conversions through the mobile site compared to the desktop version.

Wishing to be in trend, they invested in a PWA to create a better and faster mobile experience for the visitors and to reduce the bounce rates. Additionally, push notifications and some other features were implemented.

The outcome is:

  • more than 50% increase in mobile sessions,
  • almost 85% less time needed for making a page interactive 15% lower bounce rate,
  • 17% more conversions,
  • 8% growth of conversions on carts recovered via push notifications.

Final Thoughts

At present, the PWAs stand at the forefront of online technology and unite various platforms, tools, and practices, besides they court the users. Certain brands have already utilized the opportunity and provided their audience with the cutting-edge experience of Progressive Applications at use. Being open to the innovation, they got fantastic results and we think it’s high time to join the pioneers and use the technology progress to your own benefit.

In addition to better conversion rate and user engagement the innovative PWAs offer you shorten release schedules and minimized overall costs. Though they are not yet supported on all browsers or software, the progress goes at a tremendously rapid pace nowadays, so Stfalcon team is sure these barriers will soon be broken.

If you still have questions on how to build progressive web apps — let’s find it out in practice together.