Download free PDFINTRANET: Effective internal communication in a distributed organization

PWA for Black Red White eCommerce - Be where your Clients are

Author: Damian Glazer, Fronted Developer, Ideo.

With the company’s development, the needs grow, and it is real in the e-commerce environment. We engage in the hot pursuit of improving product availability. We choose e-ecommerce platforms that can guarantee the same high availability to our buying customers.

In e-commerce, we have no opportunities to interact with customers, as sales go via internet platforms, thus, it is the quality that plays a vital role. It affects the purchase, no matter if it is a specific product or a service. There is also that high availability, we strive for and which requires a multi-channel approach. While gaining new customers we cannot limit ourselves to just one sales channel. We should always go looking for additional ideas for business growth.

The Black Red White e-commerce team knows the ropes. Therefore, they have chosen Ideo to increase the company’s range of services to reach more potential customers. They set the bar very high. It involved the mobile application implementation, both functional and intuitive.

“Almost 70% of website traffic, we got came from mobile devices. Smartphone users generated over 40% transactions while the orders' value was even less. It was a clear signal to us, something was not working. So, we took a thorough look at the mobile web. We took steps to improve its usability, and optimize the purchase process.“- explains Mariusz Nowak, E-commerce and Omnichannel Strategy Director at Black Red White SA. “We wished to offer users a similar experience, they had in a native application yet much improved, without installing it from Google Play or App Store. According to our assumptions, the website was to load fast, work smoothly. Even if, there was a weak connection or temporary lack of Internet access. Also, we did not want to maintain and develop two independent platforms: the old app and the website. PWA in that matter seemed like the most optimal IT solution.“

PWA technology is the latest trend in creating web applications. The Google team set a new direction for the development, while other popular browsers followed. With a small exception of Safari, which supports a large part of PWA-related methods, however, disables the app installation by default. 

Do you want to create an innovative web application?
Check what we can do for you!

PWA offers you several possibilities. Via the BRW e-commerce app, you can access device resources and save them in the browser’s local database (IndexedDB). You can cache entire website views even while working in offline mode. Also, PWA allows for installing the application on both mobile and desktop devices.

The original Black Red White was a classic application that overloaded any time the user took action. It was neither appealing nor convenient. While using it, the mobile device buyers had an impression it was still the old website, yet wrapped in a “nice box”. The BRW team was aware of the issue and knew it affected customers' final purchase decisions gravely. So, they had decided; it was prime time to rebuild the website altogether.

To do so, it was vital to redesign the whole UX along with its graphic elements. In this way, the website would look-alike the mobile application. Apart from introducing the new app concept, the team also had to address a few minor nuances in the mobile application, like adding a “Go back” arrow symbol.

The SPA (Single Page Application) technology combined with the Vue.js framework was the ultimate remedy for the frequent website reloading issue. Now, any website individual elements render upon users’ activity. The browser performs fewer operations, and it optimizes the server load very well. Also, it immensely increases the website performance. It works faster, and the interface is more dynamic, enabling even the most complex graphic layouts can run smoothly. Thus, the new digital experience is unique. Website browsing via any mobile device provides users the same comfort and feeling as the mobile app. The website is equally efficient when used on a desktop PC or a laptop. This approach significantly expanded the BRW’s online store possibilities.

However, we, the Ideo team, went for major technological changes and suggested SSR (Server-Side Rendering) which is far more superior to SPA. For instance, standard SPA-type sites transfer site generation to the clients’ browsers. There are two steps before users see the entire website. First, the browser must retrieve the web data from the server, then based on the same data it renders the final web view. Waiting for the page to load fully takes time, especially with large-sized pages. SSR technology solves the issue but reduces the loading time SPA-type websites usually need. It only has a positive impact on web positioning.

The Server-side rendering (SSR), as its name suggests, takes place on a server from where it sends ready HTML code to the users' browser. It contains merely the data browser that needs to display the view selected by the user. Any website built like that, it takes a shorter time to load compared to classic SPA websites. The users do not notice the data is being loaded.

With the online store, we applied the Nuxt framework with SSR, which we later launched on the Node server. It is essential here to mention one factor. When processing the code on the server, we have no access to all information available in the browsers. Things like global variables; window, document, or navigator.

Instead, there is access to Connection headers' details, which enables them to recognize a specific device and generate adaptable HTML to its capabilities. The final server response is smaller and speeds up the HTML processing structure by any device.

If you ensure a smooth transition between individual store views, you contribute to a positive digital user experience. Also, PWA provides several improvements while the users view the online store. The most important one is a convenient mobile application installation. The moment a potential customer enters the PWA-based website store, the web browser first automatically asks the mobile user for permission to use the mobile application. It does it in a discreet and non-intrusive way, so one has the freedom to accept or deny. Once the user accepted the permission to run the application its icon will appear on a desktop. The saved site access info will enable users to access the PWA conveniently during future visits.

The most vital PWA advantage is browsing the store’s page offline.

Even the user with no internet connection can see the store’s digital catalog and add products to Favorites. As a seller, it is possible to send push notifications to keep in touch with customers and inform them about new products and current deals. The application can process all data offline, thanks to the Service Worker script. The feature is beyond doubt, one of the key PWA elements. Each connection with the server goes through the Service Worker and gathers data from a specific sub-page, which later you can display offline. The strategy falls into the Network First (Network Falling Back to Cache) approach.

Every time the user displays a certain page online, the cache grabs and saves new elements. In technical terms, the data in the cache is being updated. PWA does not collect excessive amounts of information, but only the sub-pages data that you viewed. When you lose the connection temporarily, Service Worker will then automatically redirect its requests to the cache data. It enables you to go back and see the product photographs or descriptions, and even use other features smoothly.

Like, for instance, Favorites lists - a very popular PWA feature powered by the IndexedDB (i.e. Indexed Database API). It is the web browser-based JavaScript interface application for managing a NoSQL database of JSON objects. So, the application can store data on users' activity offline. The moment an internet connection is available, data synchronization takes place. Information processed offline is then sent to the remote database.

“Throughout time, we have observed that many users irretrievably stopped visiting our website. Some customers were dissatisfied with the long page loading times, while others became discouraged by the application’s unresponsiveness. With the new PWA app, our customers can continue the online shopping process - even if their internet connection becomes gravely and temporarily unavailable. With technology, we intend to reduce the abandonment rate” - explains Mariusz Nowak.

PWA solution combined with Google Analytics is very practical. It collects any application's data generated by users in offline mode. Once the application restores its internet connection, it sends that data straight to the analysis tool. By doing this, we gain insight into users’ behavior offline and study it in depth. We can compare then both offline and online customers’ presence.

The IndexedDB has a worth mentioning advantage - versioning. It lets you quickly and automatically update the database structure. No user action is required, and no data lost during the process.

With PWA applications, it is challenging to design proper and adjustable mobile views. Therefore, each time you run the application on the device’s desktop, remember to do via the icon. Because there are no traditional navigation buttons, like in browsers. As a result, graphic designs must always include alternative navigation to enable free movement within the website. While we worked on navigation, the graphic design was delivered by the Client’s team. We suggested solutions that turned out successful. Whereas, the implementation made the mobile store application widely flexible to use. 

PWA applications can vastly expand your business reach. Yet, if combined with the latest technologies can lead to creating increasingly flexible applications that empower the fresh sense of possibility.

Do you need an efficient sales platform? Our experts will be happy to advise you on optimal solutions. Make an appointment for a free consultation.

Once we begin such an implementation, we get one platform in two forms. A mobile application compatible with all mobile devices and a website. In the long run, the maintenance service cost becomes less expensive. You get twice the benefits.

And there is more… The PWA updates become faster, especially for mobile users. It becomes automated, and they need not change phone settings at all. You can release PWA applications on the App Store and Google Play to boost its visibility to potential customers.


Damian Glazer, Fronted Developer, Ideo Agency.

    You may also be interested in:

    We carried out a complete reconstruction of the website

    Ideo Agency designed from scratch one of the most popular websites in Poland. The project is all about efficiency, attractive design, and intuitive navigation.

    The system for APC Postal Logistics serves millions of customers

    1.5 million people checked the status of their parcel in the last month via our Client's Tracking API system.

    Project-based Software Development

    Tell us about your needs


    IT Project Outsourcing

    Services Tailored To Your Needs

    In case of a temporarily increased demand for IT staff, hiring a suitable specialist for a short period would be challenging and not profitable. To help optimize the costs of running a business, we could offer you, among others:

    Get a free quote

    Even though fixed-price projects suit us best, our services can also realized based the following cooperation models:

    • Time and material

      Time and material

    • Dedicated Team

      Dedicated Team

    • Individual model

      Individual model


    Enhance Your Projects

    How can your business maintain a competitive edge in today’s constantly evolving technological environment? One solution is to invest in the IT project outsourcing that we provide. By engaging with our software development company, you can access a wealth of knowledge and expertise that would otherwise be unavailable.

    You will save time and resources, focusing on other core aspects of your business operations while leaving the demanding IT tasks to our world-class professionals. With their assistance, you will, without a doubt, elevate your projects to the next level, easily outperforming your competitors.


    Why Outsource With Us

    Working with us brings your business to entirely new heights. For once, we boast a team of the best experts within the field of IT, which guarantees that you can expect nothing but the highest level of services regardless of the magnitude of each project. All tasks are performed with exceptional precision and attention to detail, 100% tailored to your business’s needs and requirements. Moreover, processes are meticulously automated, resulting in savings in both time and money. If or when any doubts arise, we are open to conversation, always willing to apply any modifications and adapt to the changing needs of our clients, rendering us the perfect partner for all businesses.  


    The Power of Software Development - Our Rewards

    As mentioned above, clients from all over the world rate our comprehensive approach to project implementation and business consulting, which is why Clutch has considered uss a leading eCommerce Software Development Team in Poland. That is, however, not all.


    In our daily work, we help to develop our clients' businesses. Their trust and effective cooperation make us grow as well. In January, 2022, the new edition of the Forbes Diamond Award report was published and we were proud to be listed among the fastest-growing Polish enterprises in this prestigious report. And as we help to develop our clients' businesses by doing our utmost best, their thrust and cooperation mean a lot. Indeed, we will only continue to grow together!