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 headless pwa is completely built on React-JS, hence this makes it easily customizable and provides a better experience to its users.
Headless PWA’s are designed to offer clients the same experience as a native Android or iOS application. So, it is a regular website instead of a separate application.
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 –
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?
Magento 2 is shifting towards the PWA platform and natively supports the 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 then 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
Initial Basic Configuration
After the successful installation of the Module the admin can configure the module from the backend as required.
For this, the admin will have to navigate through Mobikul->Mobikul Configuration as shown in the snapshot below.
Tapping the Mobikul Configuration sub-menu option, will bring up the Mobikul Basic Configuration as shown below in the snapshot.
- User Name- The Admin needs to provide the username then 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.
- 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.
Demo Order PopUp Confirmation – Here, the admin can set the enable popup confirmation as a Yes or No as required.
FCM Push Notification Parameters – Here, enter the API Key for using the push notification feature along with the push notification Androi and iOS topics.
Mobikul Catalog Search Configuration – Enable or disable the display tags in search feature, enter the number of tags to show in search.
Apart from that, enable the display products in search then set the number of products to display within the search as required.
Application Download from Website – Enable or disable the Android and iOS app download links within your website.
Set to enable the the links as in top or bottom of the the website and choose the applicable download link theme as required.
Mobikul Api Cache Settings –
Enable the cache for the Mobikul API along with the refresh rate. You can clear the cache any time by tapping the clear cache button.
Manage Banner Images
To manage the banner images, the admin will navigate Mobikul->Manage Banner Images as per the below snapshot below.
Tapping the manage banner images brings up the section with a list of already added banner images by the admin then a button to add new 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:
Here, the admin will –
- Upload the banner image
- Set the sort order for the uploaded banner image
- Choose the banner type as Product or Category
- According to chosen banner type enter the product/category id to display
- Choose the store view for dispaying the banner
- Set the banner status to enabled
Lastly, tap the Save Banner button to save the respective banner as required.
To manage the notifications, navigate through Mobikul->Manage Notification. Here, you can manage all the notifications as required.
To add a new notification, tap the Add Notification button then the following section appears –
Here, add the folling details for the new notification –
- Notification Image- 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.
- 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.
To add a featured category, tap on the Add Featured Category button and then fill in the required information as required.
The required information –
- 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.
After that, the admin needs to choose the featured category as per the snapshot below and then save the featured category.
After adding the featured categories, check the below image for the reference how the categries get visible.
Manage Category’s Banners and Icons
The admin can configure the banner image then icon for each category as per the requirement.
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.
The manage section looks like the image added below and from here the admin can manage the category’s banners and icons as required.
In order to add a new category image, the admin needs to tap on the Add Images button that brings up the sections –
Category Image Information –
Here, the admin will –
- Enter the icon here for the category.
- Select the view for which category image will visible.
Catgrories – Here, the admin has to select the categories associated with it.
Banners – Here, the admin has to enter multiple banners from the Banner tab.
Mobikul Order History
The admin can navigate to the Mobikul Order History via Mobikul->Mobikul Order History sub-menu option.
Here, the admin will find all of the orders that have been placed using the PWA app installed on the mobile devices.
Mobikul Carousel Images
The admin can add/edit carousel images by navigating through Mobikul->Mobikul Carousel Image sub-menu option as shown below in the snapshot.
In order to add a carousel image tap on the Add Images button on the to right-hand corner then that brings up the add image section as shown below in the snapshot.
Here, the admin will –
- Choose the carousel image
- Set the title for the carousel image
- Choose the carousel image type as Product or Category as required
- Enter the Product/Category ids as per the selection made under he carousel image type
- Set the carousel image status as enable
Lastly, the admin will have to tap on the Save Image button to save the respective carousel image type.
Working Of Progressive Web App
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 then add the product to the cart.
- Details- However here the product complete details. In this page for the app user to refer to before purchase.
Cart And Checkout
The Product added to the cart will see 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 the product will add to 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 the cart on the PWA app.
Now after scanning the barcode successfully the customer. Herein, customers can see the product will add to the cart & from there they 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 will publish 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.
Furthermore, 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 shown the image for headless PWA that is available in the Play store:
You can install the same for a better experience from Google Play Store.
*Precaching and Runtime Caching in Headless PWA (Coming Soon)
Today, 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 revalidating.
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. Furthermore, if still, you have any issues 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