About PWAjet

Buy now

What is PWAjet?

PWAjet is a SPA based PWA, so, generally, PWAjet is a web application.

How does a regular website work?

When a user follows a link to your website and opens it, the client (browser) sends a request to the server. The server responds with a set of static: HTML content, JS code, CSS, images, etc. The process repeats each time when the user follows an internal link on the page, for example, to another catalog section. The browser usually caches JS code and CSS that are the same for different pages. However, the HTML content is regenerated every time on the server side. It is called SSR - Server-Side Rendering.

The generated HTML of a new page can weigh hundreds of kilobytes or even megabytes. As there might be a lot of content on a live, working resource, the problem of heavy pages arises. A single page may contain customer reviews, blocks with popular products, recommendations, special offers, banners, etc. - everything that can convince the customer to take action. Where does this lead? To “heavy” pages take a lot of time to load and are expensive for the visitor using the mobile Internet connection.

How can PWAjet help?

Let a browser render HTML code

PWAjet offers a solution to this problem - using CSR (Client-Side Rendering). What does it mean? The completed HTML code is generated on the client side (on the site of the browser used by the customer). Thus, the browser receives only the necessary data: product name, price, availability, and other data about the product instead of a document describing the structure of the page, all accompanying design solutions, additional blocks, and other less important information. This interaction has a much lower traffic load, higher speed, and much higher stability because the requirements for the Internet connection are lower.

That data is received using a special API (a specific interface that provides interaction between different programs). It can transmit “clean” data, connecting no template engines. It significantly speeds up the site’s work on the server side.

What happens next to this data? It’s about the same as with SSR - a page based on it is built. But now this happens on the client (browser) side and it increases the speed of work and this process does not depend on the peak loads on the store. This is achieved because the store resources are no longer distributed among all site visitors, and the visitors themselves do not compete for them. Building pages in PWAJet does not depend on the time of day, day of the week, and pre-holiday ‘rush hours’. The load on the server remains, but servers are significantly unloaded by transferring some tasks from the server-side to the client-side.

Render only part of the content

Rendering on the server and on the client are similar basically, but there are significant differences, which are dictated by the very origin of the technologies and their tasks. So, for example, the browser runtime environment can take user interaction into account.

In other words, the content of the page can be changed under user actions. This means that when switching to a new page, the browser can leave the previous one, with common menus, header, footer, etc., changing only what is different on these pages.

This is another point that directly affects the speed of website work. It is cheaper and faster to change only the total price and the selected product quantity on the page instead of rendering the entire page completely if the customer decides to buy one more item.

How PWA is related to it?

PWA - progressive web application - promotes ​​moving from the regular site capabilities to the capabilities and benefits of a mobile application. It combines the web site and mobile application both in the name and the spirit. There are several features that a web application should implement:

Visibility - The application can be found through search engines (e.g. Google).

Installability - The application can be installed as a regular mobile or desktop application.

Linkability - Content can be shared with the help of the link to it.

Network independence - The application fully or partially works when there is no/bad Internet connection.

Progressiveness - The web application functionality should not affect the performance of the site in browsers that do not yet have its support. For example, browsers that do not provide the ability to install the application will see the application as a regular website.

Updatability - Web applications can be partially updated (only those resources that have been changed will be updated) unlike mobile applications, where even a small update requires a full download of the new application version.

Responsiveness - No matter where you open the app (a smart TV, smartphone, or laptop), it should function properly.

Security - HTTPS is the basis and a mandatory attribute of any web application. The application functions will not work without the security certificate. This increases trust and protects users.

Which of those features does PWAjet support?

Visibility - Google knows how to index SPA properly for quite a long time. If you need to support other search engines, there is an option to integrate an additional service that will render content for search engines. If you are interested in it, contact us for a quote.

Installability - Safari and all Chromium-based browsers (Edge, Yandex.Browser, Chrome) can already install web applications like regular applications. It works on MacOS, Windows, Linux, iOS, and Android too.

Linkability - PWAjet has the regular semantic links like any site.

Network independence - Service Worker downloads and caches static, while LocalStorage and IndexedDb store most of the data received by the client. This allows using these sources instead of the server when one is not available. Whether there is no Internet connection or a problem on the server - the customer can view the catalog and add products to the cart!

Progressiveness - Here browsers and web standards do all the work themselves. If some specific functions of the application are not available, they will not work, while the site itself will remain available.

Responsiveness - CSR allows making a very important cross-platform advancement. In the SSR approach, the client (browser) receives two versions of content at once, one of which is hidden, for example, on the desktop. In PWAJet, only one version will be rendered. However, it will still be possible to switch to another version without requesting data from the server once again and redrawing the entire page.

Security - The standards decided a significant part here as well: without HTTPS, PWA work is impossible. Also, the user can view all the permissions granted to the application in the usual section of his operating system, where the permissions of all other mobile applications are managed.

Opportunities and challenges for CS-Cart platform

CS-Cart uses SSR technology, but at the core level, it has API support, which was originally developed for the CS-Cart mobile application. Our team has made over 30 PRs in the CMS core to add the essential features and improvements and make PWAjet realizable. This allowed us to solve such problems of mobile applications as, for example, SEO and semantic links.

We continue to take part in the development of this direction in the CS-Cart platform, so we can confidently say that we are not limited to anything within this CMS. This grants us the ability to implement a wide variety of functionality quickly, without waiting for it to appear in CS-Cart, and without running into the perpetual problem “the core doesn’t allow to do this”.

How does PWAjet work in CS-Cart?

PWAjet is a configurable set of HTML file with connected JS and CSS files. If you change the settings, you need not rebuild the application, as with mobile applications. PWA add-on handles such configuration.

The application is quite independent of the PWA add-on, so it can be moved to another server, on a CDN, etc, after the initial configuration. You can read more about configuring the PWA add-on here.

Currently, PWAjet is mostly a mobile theme installed alongside your main theme. The add-on tracks the source of the visit and, if it is a mobile device, the user will be directed to a pre-prepared address (subdomains m.example.com are taken as the standard ones, but the administrator can choose any address he/she prefers).