Progressive web apps
Mobile reality
We live in the smartphone era They do not merely facilitate, but also determine everyday life, both private and professional. They are the means of internet use for as much as 71% of users. A definite majority of them relies on mobile devices not less than on desktop or tablet devices. Along with the growth of the prominence of and trust in mobile technologies, the requirements in terms of speed, safety and general quality of services increase as well. The question about the mobile in IT solutions is no longer IF, but HOW to optimise the operation of the websites and mobile apps?
The new usability standard
A flexible solution for companies that want to undertake this challenge and succeed online are the progressive web apps or PWA. This state-of-the-art method of building apps includes a set of practices and technologies aimed at increased usability. In practice, it means that PWA combines what is best in the user experience of internet use: it works in the default web browser, like a native app on all mobile devices, and all that in the offline mode as well.
At x-one we adopted PWA as the new standard that would soon become as obvious and inherent to the design, as the current notion of responsiveness. We have been successful in implementing it
in diverse projects for our Clients in many industries.
There is a reason why PWA technology gained this usable acronym. In fact it says a lot about it effectiveness. According to Google, the acronym FIRE stands for:
FAST
INTEGRATE
RELIABLE
ENGAGING
PWA must have.
What makes the PWA standard stand out?
Operation in the offline mode – a key feature and differentiator of PWA, because in case of no internet access, it ensures operating continuity by synchronisation in the background. To this end, it uses a piece of code referred to as the Service Worker.
Connection safety and privacy – the HTTPS certificate authenticates the visited websites and ensures the integrity of the data transferred, which is in addition required by the service workers.
The Web App Manifest file, it uses a JSON text file to define the application information (such as: the name, the language, the default orientation or the app icon that the user can save to the home screen) required to download it and present it like a native app.
Fast – PWA apps are perfectly aligned with the Mobile First standard, in which the fast loading of mobile websites (in this case PWA-based) is the key factor that determines the quality of user experience. Fast operation also contributes to Google indexation, which increases the visibility in search results.
Automatic updates – changes are published immediately by placing files on the server, as in the case of websites. Therefore, the latest version is always available for users without them having to download updates from stores and what is more the publisher gains strict and immediate control over the functioning of the application.
User experience – full responsiveness and UX that matches native apps.
Innovative mobile solutions for business
By delivering innovative technologies, we help companies to transition to the mobile reality: to adjust to the current requirements and meet the current trends. The practical knowledge of PWA enables us to develop dedicated solutions for precise and comprehensive fulfilment of the business objectives of our Clients.
Omnichannel
The PWA implementation is the best use of the omnichannel potential. By delivering new, integrated sales channels and effective communication utilities, it offers a unified purchasing experience.
Engagement
More options for increasing customer engagement and loyalty compared to the requirement to install more native apps. Communication even in the offline mode with push messages.
Trust
The consistency of solutions and communication in different utilities contributes to building brand credibility.
Cost
Operation in the browser and on many platforms eliminates the need to separately implement solutions for different devices and reduces the cost of project.
Optimisation
To reduce the time and increase the efficiency of internal processes, such as customer service, logistics, production, payrolls and many other.
Conversion
The combination of fast operation and increased user engagement has a direct impact on increased conversions in e-commerce.
App operation quickness vs user behaviour
70
of the buyers on mobile devices will abandon the purchasing process within a few seconds if they consider the process not easy enough
8
100 ms could improve the conversions by 8%
5
100 ms could improve user engagement by 5%
Source: 55 the data company and Deloitte Digital: Milliseconds make Millions
Who is PWA for?
e-commerce
This technology will bring measurable benefits to the organisations that plan to extend or concentrate communication with mobile users and the companies that already record high traffic from mobile devices. It is an answer to the needs to develop a multi-platform app with native app functionalities that the users will use wherever they are and whatever the device they are using at the given moment.
Industries and examples of functional areas to which we dedicate innovative mobile solutions include:
Insurance companies – quote presentation and insurance terms comparison
Investment funds – effective portfolio management
Banks – mobile banking services, product and quote presentation, communication with customers
Logistics companies – apps for the couriers that complete the complex deliveries.
News websites – extensive portals with user accounts that deliver customised content based on preferences
E-commerce platforms – online stores that record even several hundred sessions per month, use smart search, push notifications, geolocation, offline access
E-commerce tailored tools
In e-commerce, the implementation of the PWA standard provides useful utilities and key solutions to increase conversions. From the start-up to the greatest brands — the usefulness and potential of PWA cannot be overestimated due to the measurable results of implemented functionalities.
Availability
for users on many devices, including legacy devices, enables reaching the target groups quickly and directly increases the numbers of unique users and views.
Push notifications
and application of the OneSignal technology enables sending notifications to the users. The news, promotions, alerts and reminders are sent even after they exit the website. For mobile users, the notifications are the first message they see on the phone screen. This technology provides a wide range of forms of communication: from banners to customised e-mails, pop-ups and SMS. The customisation and automation options are complemented by real-time reporting.
Geolocation
or user location based on GPS parameters (latitude, longitude and altitude), which is particularly precise. The use of GPS access enables precise location-based targeting. Geotargeting for a specific target group can include ads, messages and quotes. In addition, based on the geolocation analysis, you can define location-based access restrictions, which is essential for safety.
Smart Search
based on auto-correct and auto-completion of phrases, as well as filtering and sorting of the results, is essential for search engine optimisation for mobile, in particular for industries and shops with many proper, difficult or foreign names. Quickness and performance are the key parameters, even more for shops with large bases. In addition, smart search is supported by the engine that suggests an extended product range connected with user preferences. The lower the probability of display of “not found” result, the higher the change for sale, as well as efficient implementation of the business strategy and building customer loyalty.
Why it is worth it?
200
Mobile users spend 200 more time shopping online, compared to desktop users.
53
53% of the users exit the website that loads longer than 3 seconds.
43
43% of the customers of online shops use the search engine first.
50
Customised push notifications have a 50% higher click-through rate than messages sent without user segmentation.
Source: https://www.algolia.com/blog/ecommerce/e-commerce-search-and-kpis-statistics, https://onesignal.com/blog/insights-from-118-billion-push-notifications-sent-through-onesignal/
PWA and Headless architecture for Mobile First Design
PWA, as a natural consequence of the increased number of internet users on mobile devices, is successful in the implementation of the mobile first approach. Mobile first is successful in reaching the mobile user and all activities subordinated to this objective. According to this principle, Google’s method of indexing websites was modified in recent months. A website is positioned primarily based on information availability for the mobile user. This approach is also expressed in the design, in which the priority is optimisation for the lower resolutions, suitable for the mobile version, to provide the best possible UX considering their specifics and capabilities.
The implementation of the flexible and modular Headless architecture favours this method. It enables developing specialised website versions on the so-called progressive design improvement basis, in which the process starts from the lowest resolution device screens and then existing functionalities are extended and new functionalities are added according to the resolution increase.
According to the Gemius/PBI surveys of August 2020, the number of internet users on mobile devices in Poland reached 24.2 M.
Why headless? Because it separates the front-end from the back-end in the API, as a bridge between them. Headless PWA is a model that opens new opportunities, unrestricted by pre-determined technologies used to prepare the presentation layer, which is the case with classical monolithic models. This strong and innovative technological connection enables developing effective and available apps for the users. With the utilities, such as Vue Storefront — the open-source front-end platform for headless commerce, we make full and economic use of the flexibility and dynamics it offers to growing businesses.
Native app
Fully developed for one platform – one app is based on a separate code for Android, iOS and other platforms.
The requirement to download from App Store/Google Play, which results in fees for the publishers. The app installed on the device requires updates that may be time-consuming.
The functionalities of some apps depend on internet access. Increased data use
Custom platform-specific UI components and hardware access contribute to the ease of use and error-prevention.
PWA app
Available and optimised for operation on different platforms and desktop.
No installation required. Automatic updates, almost in real time. You can download the shortcut to your screen and start using immediately.
It works independent of the internet connection and maintains interface functions by using cache.
Perfectly responsive and intuitive to use — similar to native app interactions.
TWA for the enthusiasts of mobile apps
The technology that helps to fully utilise the mobile channel, that is to meet both the users that prefer using the app and the users working in the browser, is developed by Google TWA (Trusted Web Activities). Essentially, TWA is the name of the component aiming at containerisation, that is packaging websites in the PWA standards to add as apps to Google Play.
- Range — the opportunity to reach mobile app users. Also with regards to promotional activities.
- Lightness — not irrelevant to the download speed and resource use. So, the app is less frequently removed from user phones.
- Time and cost optimisation — even a wide area implementation of the service takes only a dozen days, costs less than for a native app and requires no maintenance or development on platforms.
(Almost) perfect solution
- the limitations of PWA
In addition to the PWA apps and native apps, which are often considered as contrasting in terms of operation, other categories include hybrid and cross-platform apps. They result from other methods of completion of the front-end part. The multitude of technologies used by developers results from obvious specific functionalities, as well as limitations, which must be weighted relative to the project.
Inferior operation under iOS and restricted support of Apple devices
Restrictions in the use of hardware and system options (these restrictions are effectively compensated by responsiveness)
Higher device battery use and lower performance (important mainly for games)