What is PWA?

What is PWA?

For 2 years now, PWA is being a growing trend and as time comes, the more interest it arises around itself. In this article, we’ll take a look at the technology and talk about Amasty PWA solutions in particular.

PWA stands for progressive web applications. This is a modern technology of web development, that uses client-side rendering (CSR) instead of server-side rendering (SSR), or either a mixture of CSR and SSR.

CSR process is similar to a downloadable mobile application: a data package is sent from a server to a client (which is a browser or other tool used as a receiver), the client renders the package and that’s how the content is displayed for the end-user. While the client is working on content rendering, the end-user is displayed some loading screen. With each new transition to a new page, the page is not reloaded with a new server request, but the content is rendered from pre-loaded data. The request to the server is made only once - on the initial application load.

With the SSR method, the page content is being built on the server side. When the client requests the page, the server renders the page and then the rendered page, divided into smaller packages, is sent back to the client. This operation repeats each time the end-user goes to a new page. SSR seems to be slower for the end-user, as they don’t have any content or any process running. If some packages get lost or undelivered, it impacts the experience of visiting the website. Still, SSR is regarded to be more SEO-friendly as the crawlers get the full structure of the page before it’s rendered in the browser. Nowadays, a new approach is gaining popularity - the method of pre-loading. It has the best of two worlds by combining the CSR and SSR methods.

Another feature that makes PWA stand out is a headless approach for development. The frontend and backend development processes are not dependent on each other and can be running in parallel. Storefront receives the necessary backend data through GraphQL requests. In case GraphQL endpoints are not available, REST API could be used for the same purposes.

PWA hallmarks

Capable

By means of available API methods, PWA provides a wide range of realizable features. For example, PWA allows file system access, multimedia control, clipboard support, and others. As the list of supported APIs is growing, the list of available PWA capabilities is growing correspondingly.

Reliable

PWA can work disregarding the quality and availability of the internet connection. Due to the only server request made, PWA works fast and reliable - the end-user is sure to receive a response from any interface element. In case there is something not working or the internet connection is failed, the user will get a timely error message.

Installable

Unlike the usual websites, PWAs can be installed on a device and run in a standalone window instead of a browser tab. Many other native app features are inherited - the PWAs are searchable on a device, you can switch between them with the app switcher, default device shortcuts work within the PWA, they can be used as a default application and etc. Due to all of these, PWAs really feel as a part of the device they are installed to.

Secure

It uses the secured HTTPS protocol, loads fast, and can work in offline mode due to the only server request, adapted to different devices, and has cross-browser compatibility.

      • Related Articles

      • How to install an Amasty PWA add-on?

        At the moment Amasty PWA add-ons are installed via yarn. The add-ons could be downloaded from the Products tab in the customer account after the purchase. Before starting the installation process, make sure that the Magento instance meets the ...

      • What Amasty extensions support PWA?

        For PWA compatibility, Amasty designed a separate PWA add-ons. They go as supplementary solutions to the main extensions. Amasty PWA add-ons provide the same functionality as the original Amasty extensions. The PWA add-ons are created with the ...

      • What Amasty extensions support GraphQL?

        Amasty has introduced additional GraphQL packages for extensions that are GraphQL compatible. These packages are listed in the 'suggest' section of the composer.json file. As a result, they are not automatically installed with the main module. To ...

      • What are the available GraphQL queries for Product Labels?

        The Product Labels extension is read compatible with GraphQL out of the box. To install the corresponding package, please execute the following Composer command: composer require amasty/product-labels-graphql Once the package is installed, the latest ...

      • Multiple Coupons | GraphQL methods

        Kindly note that the GraphQL functionality for Multiple Coupons is available as a part of an active product subscription or support subscription. Query amGetCouponsByCartId description: get coupons by cart id Mutations amApplyCouponsToCart ...