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.
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.
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.
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.
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.