PROGRESSIVE WEB APPS

Browsing on smartphones seems to have become pretty common these days and I am pretty sure you must have ever confronted a popup saying “ADD TO HOME SCREEN”? When you click on that button, the application that you were browsing installs itself in the background. And no need to worry because the application won't provide you anything less than an experience of using a native mobile application.

This application was downloaded from the browser itself without seeing the face of the Play Store or the App Store. How great it is!!

PWA stands for Progressive Web Apps and the story started back in 2015 by Google.

A PWA is essentially a web application that uses web browser compatibility to provide seamless app-like experience to the users. PWA is a new frontend technology that combines the advantages of native applications and websites. PWAs are generally built on JavaScript frameworks like React, Angular JS and Vue.js for handling the data and displaying it. It then communicates with a backend via REST API (or with GraphQL). This method is also comprehended as “Headless Magento”.

Why is it named the “Progressive Web App”?

Progressive: because the website lazy-loads itself.

Web: because it is written in languages like- HTML, CSS, and JavaScript.

App: because it is available in the background of a mobile device.

How does Progressive Web Applications work?

1. The user visits a PWA website (e.g. on Chrome under Android or Safari under iOS)
2. Either the visited website automatically notifies the user that he can place the website on the home screen (Android), or manually add it to the home screen (iOS).
3. Hence, the PWA website with icon and the title appears on the home screen. From the visual point of view, one cannot tell the difference between the PWA and the native app. Clicking the icon will open the PWA website.

Features of PWA

PWAs has many features which differentiate them from the native applications:

1. Responsive and Cross-browser compatible: PWA websites are made using responsive design strategies to provide the basic functionality and content to everyone regardless of the browser. Hence, with all available browsers, PWAs are fully responsive and offer the same experience to mobile or tablet users.
2. Fast: Speed is the prominent asset of PWA. PWA takes advantage of using service workers to cache and store data as well as to manage requests. As a result, the loading speed of the application will be quicker even if the user is not connected to the Internet, but notably, new information will only be available once the user is connected to the Internet.
3. Secure: Unlike others, PWA sites are completely secure as the applications are served through secure HTTPS. Which means no unauthorized user can access the site.
4. Can work offline: PWA sites cache content to ensure that some content can be served even if the user is offline.
5. Easy Mobile Installation: Mobile users can add PWA sites to their home screens directly from the browser, without using the Play Store or App Store and can even receive push notifications from the site.
6. Add to Home Screen: The main benefit of PWA is that the user can simply add the website to the home screen of their smartphone. Customers won't like to open browsers each time to find a product that they need on your website, so the customer can click on the icon which they added to their home screen and visit the store directly without going to the browser and then to the website. This will provide the user with a rich experience which will, in turn, increase the number of users and result in a higher conversion rate.

Advantages of using PWA

For Merchants who own website:

1. Cost-efficient: Featuring the web stack, PWAs are mainly used for development which results in less time and effort which in turn results in cost efficiency. In addition to this, applications can work on Android, iOS devices. This surely means that you don’t need to build an app for multiple platforms.
2. Optimized time: As I said, you don’t need to have created a separate app for Android and iOS. One PWA app can be utilized on both platforms.

For End-Users:

1. Less data usage: In many developing countries, the internet is still an expensive commodity. PWA uses only a fraction of data compared to a native mobile application. Thus, it solves the data usage issue as.
2. Up-to-date application: PWA offers up-to-date experience to users. Moreover, you don’t need to maintain an older version of the application, It also addresses the problem of software fragmentation.
3. Loads fast: The loading of a PWA site is 2-3 times faster than a responsive website or m-dot website. It also results in fast and smooth performance on any mobile device.

Magento Contribution in PWA

To bring out the best features of PWA and give users a rich experience, Magento back in 2017 collaborated with Google. Magento 2.3 along with PWA and other updates was released on November 28, 2018. PWA studio also got released with the new updates of Magento 2.3.

Using PWA Studio benefits both customers and developers. Seeing from a developer's perspective, PWA Studio is a tool that allows developers for the developers for development, deployment, and maintenance of a PWA storefront which is on the top of Magento 2. PWA Studio provides tools to carry out app-like PWA websites that hold to the Magento principle.

Tools and Libraries used:

To work with the utilities provided by the Magento PWA Studio project, one should be familiar with the tools and libraries provided by the Magento PWA Studio listed below:

• Webpack: Webpack is a static module bundler for JavaScript applications.

The user can build one or more bundles from the dependencies in the user's project module. The PWA-buildpack includes webpack tools that manage the JavaScript dependencies. All the related configuration that the developers want to make are in the project's webpack.config.js file. For better development and performance, a web pack is a recommended tool.

• React: React provides the following features that make PWA easier:

(i) Simple and stateful component: React builds user interface without making assumptions about the underlying technology stack, hence giving you the flexibility to choose the appropriate solutions for the rest of your project.

• Component-Based: If you want to create any complex user interface, it becomes very difficult with DOM API. This where React comes into the picture. It will allow the developers to describe to allow the UI to look for a specific application state where the React library will take care of rendering the correct UI when the state changes.

(iii) Declarative: When you want to create interactive UI, React makes it less painful. When the data changes, React will render the right components and hence efficiently update, though you just have to design simple views.

• Redux: For developers, if they want the applications that can run in different environments which is basically client, server and native then Redux helps efficiently. Using Redix, it is also very easy to test. Developers usually face the problem of passing data down to multiple component layers using only React. Although if React used along with Redux it lessens this problem.
• GraphQL: It is defined as “a query language for your API” and a server-side runtime for executing queries. The primary idea is, when retrieving data from a typical web service, you will send your requests with parameters and receive the data from the server. The structure of this data is defined by the server when its service was implemented. With GraphQL the query inside the request and the result are returned following this query.
• Workbox: It is a set of Node modules libraries and that makes it visibly easy to cache data runtime and takes full advantage of features used to build PWA. Workbox will not only improve the website's performance but also help make it work in the offline mode.

The current Magento PWA Studio on GitHub consists of packages like:

• PWA-module
• PWA-buildpack
• peregrine
• venia-concept

• PWA-module: Using the Magento PWA Studio, it is a Magento module that provides server-side functionality, module helpers, and acts as a foundation for all themes. In the initial stage, the modules only need to be installed and enabled from the backend.
• PWA-buildpack: For the development of Magento PWA Themes, this js uses the set of webpack tools and plugins. It is also used to set up and configure the local development environment for Magento 2. To set up and configure the development environment, a PWA-buildpack is also used.
• Peregrine: Peregrine is a collection of functions that control the visual components. Peregrine essentially contains the logic for UI components.
• Pvenia-concept: Venia-concept is a demo theme that was created by Magento. This was created using the Magento PWA Studio. This demo shows all the pages, workflows, and functionality.

Miscellaneous

• What is the main advantage of PWAs against native apps or as a responsive design?

For developers and merchants, native apps have been a right and relevant option yet there are many valid reasons that they are underperformed than PWAs. Here are some of the few reasons why developers are opting for PWAs because of their better performance.

Few reasons why PWAs are better than native apps are listed below:

Loading Speed: PWAs uses service workers for caching, to manage requests and storing shell data. This results in fast loading of the app shell. In PWAs, loading speed is faster even if the user is not connected to the internet. Though no new data will be available unless the user is reconnected again to the internet. Because the loading speed of the app has a huge impact on the user experience, this is the major benefit of developing PWA in place of a native app.

User Experience: To eliminate the need to learn more than one user interface for the user, PWA allows you to offer the user to use the same User interface in their application installed in the mobile as well as in the browser.

Plus PWA applications require much less storage and space than the native apps as there is no need to download the application's full functionality.

Development Cost: The effective way of reducing the development cost is to reduce your workload by designing a PWA that can be operated across multiple platforms and OS. The cost and workload will increase if you build native apps separately for both Android and iOS because that will lead you to spend time on regular updates relevant to OS and on new features.

Online Visibility: PWAs have greater visibility than the native apps, though native apps are easier to place in the play store which helps to utilize SEO in a very effective manner.

• What is the advantage of PWA if the merchant has mostly desktop customers?

Desktop PWAs can be installed on the user’s device just like native apps.
Desktop PWAs run in the user’s own window. Having PWA installed, native feel is important to users.
Desktop PWAs run in an app window, without tabs and address bar.
Desktop PWAs are reliable and fast. Using a service worker to cache content, your PWA will start consistently fast because it eliminates any network delays. For apps that require an internet connection, a service worker will give complete control over the offline and online experience. For instance, if the users are offline, you should show cached data, or provide your custom offline page.

• If my website is in Magento 1 and I am still on the edge of migrating to Magento 2. Will, I first have to upgrade to Magento 2 or will I still be able to take advantage of the PWA concept?

Magento 2 is more prepared and ready for Progressive Web Apps than the previous Magento 1. Because M2 has all the modern tools and APIs (as opposed to M1), it makes it very easy to create a PWA solution with much fewer modifications and much faster than M1.

Though PWA solution can be possible for the M1 website, much more additional work would be needed and 3rd party extensions would be required too. But as time goes by, PWA in M1 will be more costly to maintain.

So, as far as considering PWA for any project, Magento 2 should be used.

• Is it possible to have inclinations of PWA, though I already have a functioning native app?

Sometimes choosing between native and PWA is not always the concern. Because if you have both i.e; app and a website then you should consider improving both. If you have resources then you should consider building PWA along with the native app, while keeping both in sync. However, without a native app building, PWA takes little to no mental effort.

• Why is it good for businesses to implement PWA?

Because applications on mobile are preferred more than applications on the browser.

Say, for example, a customer wants to write a document, customers will head straight to the browser and search Google docs from there. Whereas to use Google docs on mobile, customers will go to Google docs and use it instead of going to the browser.

Although users will prefer mobile applications because native apps have a powerful user experience.

When looking at the engagement rate, native apps cross 87% engagement rate whereas mobile web has 13% engagement rate. This difference is because the websites are unable to provide rich user experience and thus leading to a poor engagement rate.