Introduction- Headless PWA
The Headless Progressive Web Application(PWA) for Magento 2 uses web compatibilities to provide mobile application experiences to the users.
The headless PWA’s are instantly discoverable and useable via browsers. Thus, eliminating the need to download the application before start using it.
The front-end of this module is completely built on React-JS. Hence this makes it easily customizable and provides a better experience to its users.
However, in other words, headless PWA’s are designed in a way to offer clients the same experience as a native Android or iOS application. Thus, it is in the form of a regular website instead of a separate application.
Magento recently introduced the Magento PWA Studio project in Magento 2.3* version.
This Module is built on headless Magento 2 PWA Studio (A suite of tools by Magento for building a web store to a Progressive Web Application).
Check the headless PWA App flow –
NOTE: You must need to have Magento 2.3.* for using this application.
& their corresponding PWA versions. Please check the image shown below for the compatibility of the Magento version with the PWA studio version.
Why Do we need Magento PWA Studio?
Now, Magento 2 is entirely shifting towards the PWA platform and natively supports headless Magento 2.
PWA’s are the future of web application development. So, PWA is definitely the right step to give the web store app-like experiences.
PWA Studio gives front-end developers an open-ended toolkit for creating PWA themes for Magento 2. Thus, it requires less development effort to build in comparison to a traditional standalone application.
Following are the features of the Magento2 PWA (Pwa-Studio):
- PWA’s provides a great experience to the users as it is lightweight and super fast.
- PWA’s are easily accessible in poor connectivity.
- Easy to customize because the frontend is built on React JS.
- PWA app supports the amazing feature called PWA Scan & Go by which the customer can instantly scan up the barcode associated with the product and add the product to the cart and with ease pay for the product from the application itself.
- The PWA supports Push Notifications.
- The Progressive Web App’s can also be operational during the offline mode (Coming Soon).
- Supports various devices including Android and iOS.
- The App is purely responsive on all the platforms and it provides cross-browser compatibility.
- The Progressive Web Application will give the feel of a native App.
- Since it is not a native application so there will no updating issues.
- The PWA’s are easy to install since the user just has to visit the site and adding it to the home screen.
- No App store is required for managing the application.
- The App provides better User Interface which leads to increases traffic on the store.
- The Admin can set the user name and password from the backend.
- The Splash Background image of the application can also set by the admin.
- The Admin can manage or add the banner images, notifications, featured categories, category’s banner images, and icons.
- The product type supported are Simple and Configurable.
- The carousel and carousel images can also managed and added by the Admin.
- The Magento 2 Headless PWA will support only simple and configurable product types.
- For the payment methods, we only provide the Cash On Delivery method with the module. In case any other payment method is required then we need to check its feasible APIs or package in react and then we can implement the same.
The installation of PWA (PWA Studio) for Magento2 module is very easy.
You need to Unzip the respective extension zip and then move “app” folder (inside “src” folder) into Magento2 root directory as per the screenshot.
After the successful installation, you have to run the following commands in the Magento2 root directory.
First command –
php bin/magento setup:upgrade
Second Command –
php bin/magento setup:di:compile
Third Command –
php bin/magento setup:static-content:deploy
After running these commands, you have to log in to the admin panel and have to clear the Cache.
For the reference check the below screenshot.
For setting up Magento 2.3 PWA Studio, check the link below:
Now move the “packages” folder (inside “pwa-studio” folder) into magento installed pwa-studio directory.
Enter the following command in package.json of pwa-studio folder:
—> under “workspace” key enter “packages/mobikul”
—> under “scripts” key enter the following command
“watch:mobikul”: “yarn workspace @magento/mobikul run watch; cd – >/dev/null”
“stats:mobikul”: “yarn workspace @magento/mobikul run build:analyze && yarn workspace @magento/mobikul run stats”
“stage:mobikul”: “yarn workspace @magento/mobikul run start; cd – >/dev/null”
However, for reference check the below link:
In the lerna.json file of pwa-studio directory enter the following command:
under “packages” key enter “packages/mobikul”
Now install the following packages by running the following command parallel to the pwa-studio folder:
First Command- yarn add @material-ui/core
Second Command- yarn add @material-ui/icons
Third Command- yarn add jquery
Fourth Command- yarn add forever -g -W
Fifth Command- yarn add firebase -W
To run the new Mobikul theme of PWA, run the following command:
i) sudo yarn run build
ii) yarn run watch: mobikul
After the successful installation of the Module admin can configure the module from the backend.
For this admin have to navigate to Stores > Configuration > Mobikul Basic Configuration:
- User Name- The Admin needs to provide the username and it is used for connecting to the respective server.
- Password- Here the admin needs to set the password which will be used with the above username for connecting to the server.
- Collection Page Size- The size of the collection page decides, how many products are going to show on the collection page of PWA at a time.
- Enable random featured product in home page?- Admin can Enable or Disable the featured product from the home page which will taken on a random basis.
Note- If the field is Disabled then, the admin needs to enable “Is featured for Mobikul ?” on the product page.
So, for enabling any product to get in featured product display on the application homepage you need to navigate through the following path at your admin panel.
- Allowed CMS Pages- The admin can choose the CMS page which they want to display at the front-end.
- Splash Screen image- Admin can upload the splash screen image for the app.
- API key- Admin needs to provide the Server API key which they will get after the firebase console registration.
Manage Banner Images:
So, When the Admin hits on the Add Images Button, they can see the various fields to be filled as per below image:
- Image Notification- The Admin can set the image of the notification from here.
- Notification Title- The admin can mention the topic of notification in this section, to symbolize the notification.
- Notification Content- The details of the notification which contains the information about the notification.
- Type of Notification- The admin can select here the notification type with which the notifications are linked. It can either- Product, category, Custom Collection or Other types of pages.
- Product/Category Id- If the notification is of product type the admin needs to enter the Product Id of the product. However, if the notification type is category then provide the Category Id of the product.
- Store View- The admin can select the view for which the notification is enabled.
- Notification Status- The admin can enable or disable the notification as per the requirement.
Manage Featured Categories:
The Progressive Web Application supports displaying and configuring featured categories.
The featured categories can easily be configured from the admin panel. However, for this, the admin needs to navigate through Mobikul > Manage Featured Categories.
So, check the below image for the reference:
So, After clicking on the Add Featured Category admin can see the various option shown in the below image to add a new featured category.
- Image: The Admin can upload the featured category image from this field.
- Sort Order: This is the sort order of the featured category among other featured categories.
- Store View: The featured category can be shown store view wise. “All Store Views” can be selected for displaying the featured category in all the store views.
- Featured Category Status: The featured category can enable or disable as per the requirement.
Thus, the admin can choose the category which will redirect when the featured category image will click.
Manage Category’s Banners and Icons:
The admin can configure the banner image and icon for each category.
So for configuring the category’s banner and icon, the admin needs to navigate through the following path:
Mobikul > Manage Category’s Banners and Icons
If the admin selected the Add images option, they will see the following fields to filled as per below image:
- Icon image- The admin can enter the icon here for the category.
- Store View- The admin can select the view for which category image will visible.
So, after setting the Icon image, the admin has to select the categories associated with it.
Once, the category selection is done the admin can enter multiple banners from the Banner tab.
Mobikul Order History:
Mobikul Carousel Images:
The admin can add/edit carousel images from Mobikul Carousel Images;
by navigating through Mobikul > Mobikul carousel image as per below image:
Front-View of PWA
It is the launching screen of the app when the user opens up the Progressive Web Application.
Thus, this helps the application owner to introduce the app or organization.
On clicking the search icon the app user can save their time from scrolling effort. However, the admin can search for any product via term.
The navigation drawer has multiple options for the app user to use.
- Sign In
The customer can Sign In via Username or Email through the Progressive Web Application.
Create An Account
The customer can also create their account by filling up some basic details through Progressive Web Application (PWA).
Thus, the feature permits to display all the products of the store. Along with their assigned and associated Sub-categories and Parent category in the PWA too.
Henceforth, on clicking on a particular category the PWA user will be redirected. Thus, in this section, there is a list of product collections that will visible.
The Product Page will display the details related to the products, therefore, the PWA user can scan through. The page has the following details-
- Add your Review- Post-purchase the PWA user can review the product by entering the rating.
- Edit quantity- The PWA user can edit the quantity to purchase the product from here.
- Add to Cart- The PWA user can click on the Add To Cart button to add the product to the cart for checkout.
- Buy Now- The customer can click on Buy Now Button in order to directly move to the checkout.
- Choose Options- If the product has multiple options associated with it app user can select them and add the product to the cart.
- Details- However here the product complete details are also mentioned. In this page for the app user to refer to before purchase.
Cart And Checkout
The Product added to the cart is to be seen by clicking on the Cart button present on the homepage.
Moreover, the cart here is just similar to the shopping trolley which is present in the physical store.
PWA Scan & Go
The application also allows the customers to place an order for the products on go. So, the customer needs to scan the barcode of the product and gets the product added to the cart instantly.
For instance, if the customer visits the website brand physical store. However, do not want to stand up in the queue for billing, then this application will be the best choice.
Thus, the customer will open up the PWA App on mobile and click on the “Camera” option available to scan the code.
So, the customer needs to just scan the product barcode completely.
Thus, scan the barcode attached to the product and the product directly goes to cart on the PWA app.
Now after scanning the barcode successfully the customer. Herein, customers can see the product gets added to the cart & from there the can easily place the order and saves time.
Headless PWA Supports Trusted Web Activities
Headless PWA is heading towards fascinating features like push notifications, web Bluetooth, a complete app-like experience, etc that was not possible yet with PWA.
TWA provides a proper process to let the progressive web apps into the android app.
It provides the user with an exact android app like experience while they are actually using a PWA whereas the capabilities and characteristics are provided by the browser.
Trusted Web Applications can be published to the Google Play Store. The publishing method is way different as here the developer creates an Android APK file wrapping up the existing PWA.
Further, there are various tools available to generate the APK.
- Bubblewrap is a NodeJS based tool that generates applications powered by Trusted Web Activities. The Bubblewrap documentation is transparent for the developer and they can get started freely.
- For the web developers having prior knowledge of android development, there is another tool for customizing their existing android app i.e. android-browser-helper. For more check documentation and our demos.
Below is the image shown for headless PWA that is available in the Play store:
You can install the same for better experience from Google Play Store.
*Precaching and Runtime Caching in Headless PWA (Coming Soon)
In this fast forward world, no one wants to get stuck on a specific page for getting some kind of information. For resolving this headless PWA has introduced the precaching and runtime caching feature.
Precaching means storing the files that are not yet accessed but the expectations of searching them in recent times are the most.
Moreover, runtime caching is preferable because it caches the data just after the customer accesses some kind of information. In this, the developer can set the limit till when the caching will be done.
There are multiple strategies available that can be selected among Cache only, Network only, Cache First, Network First, and Stale while revalidate. Web APIs by Background Sync helps to send the right information to customers in any network conditions.
Another way to caching is termed as a Routing request, in which the router matches the route and then the route handles the request.
Three ways are available for matching a request using:
- a regular expression
- a callback function.
So, that’s all for the Headless PWA for Magento 2. still, have any issue feel free to raise a ticket and let us know your views to make the module better https://webkul.uvdesk.com
Current Product Version - 3.0.0
Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x