Menu Close
    Searching for an experienced Magento 2 Development Company ?

    Headless PWA For Magento 2

    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 –

    _3CRlq_P6cA
     

    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. 

    download-3

    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.

    Features

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

    Installation Steps

    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.PWA for Magento2

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

    For setting up Magento 2.3 PWA Studio, check the link below:

    https://webkul.com/blog/magento2-3-pwa-studio-setup/

    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:

    vEVxz8zgTP68z_REc6B0iQ-png-1221×710-

     In the lerna.json file of pwa-studio directory enter the following command:
                 under “packages” key enter “packages/mobikul”

    gI2mO82SSp_x1MOwcReMkg-png-1098×485-

    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.

    mobikul_options

    Tapping the Mobikul Configuration sub-menu option, will bring up the Mobikul Basic Configuration as shown below in the snapshot.

    webkul-magento2-Headless PWA-configuration-1

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

    demo_order_popup

    FCM Push Notification Parameters – Here, enter the API Key for using the push notification feature along with the push notification Androi and iOS topics.

    push_notifications

    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.

    catalog_search

    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.

    app_download

    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.

    api_settings

    Manage Banner Images

    To manage the banner images, the admin will navigate Mobikul->Manage Banner Images as per the below snapshot below.

    mobikul_options

    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.

    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:

    webkul-magento2-Headless PWA-confi-5

    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. 

    Manage Notifications

    To manage the notifications, navigate through Mobikul->Manage Notification. Here, you can manage all the notifications as required. 

    manage_notification

    To add a new notification, tap the Add Notification button then the following section appears – 

    notification

    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.

    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.

    featured_category

    To add a featured category, tap on the Add Featured Category button and then fill in the required information as required.

    featured_category-1

    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.

    webkul-magento2-Headless-PWA-confi-12

    After adding the featured categories, check the below image for the reference how the categries get visible.

    pwa-1

     

    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.

    webkul-magento2-Headless PWA-confi-13

    The manage section looks like the image added below and from here the admin can manage the category’s banners and icons as required.

    webkul-magento2-Headless PWA-confi-14

    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 – 

    webkul-magento2-Headless PWA-confi-15

    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.

    webkul-magento2-Headless PWA-confi-16Banners – Here, the admin has to enter multiple banners from the Banner tab.

    webkul-magento2-Headless PWA-confi-17

    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. 

    webkul-magento2-Headless PWA-confi-18

    The admin can add/edit carousel images by navigating through Mobikul->Mobikul Carousel Image sub-menu option as shown below in the snapshot.

    carousel_images

    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.

    carousel_images-1

    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

    Splash Screen:

    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.

    Splash-Screen

    Landing Page

    splash-next

    Search

    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.

    search

    Navigation Drawer

    The navigation drawer has multiple options for the app user to use.

    • Sign In
    • Categories
    drawer

    Sign In

    The customer can Sign In via Username or Email through the Progressive Web Application.

    sign-in

    Create An Account

    The customer can also create their account by filling up some basic details through Progressive Web Application (PWA).

    create-an-account

    Categories

    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.

    Categories view

    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.

    category

    Product View

    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.
    reviw
    • 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.
    product-detial-1

    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.

    checkout

    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.

    scan-go

    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.

    Screenshot-6

    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.

    shopping-cart

    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:

    playstore

    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:

    • String
    • 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

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Table of Content

    Hide Index