Redeem Now
Read More
Read now
Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    hyperlocal-marketplace-guide
    Blog Version - 1.2.0
    • Version 1.2.0
    • Version 0.1.6

    Laravel eCommerce Progressive Web Application

    Laravel eCommerce PWA:-Laravel eCommerce Progressive Web Application uses web compatibilities and provides an application experience to the user.  By using this extension you can do the thing like work in low internet connection, load on the home screen, Social Sharing of Product, etc.

    The Progressive Web Application is lightning fast compared to the website. Due to the faster performance as a result user engagement increases on the website.

    **Note:

      • Laravel eCommerce Progressive Web Application module is supported by Bagisto version v1.2.0

    What Is Need for Progressive Web Application

    Nowadays, most people use mobile apps to visit the website. By using PWA, you can generate more traffic on the website.

    With the help of an amazing user experience, you will improve your website conversion rate likewise AliExpress, Flipkart, Amazon, etc.

    Let’s have a look, how Flipkart is using PWA to improve their conversion rate.

    Flipkart Lite:- As we know that Flipkart is the largest eCommerce platform. Firstly they used the only app after that they came up with PWA as Flipkart Lite. With the help of PWA, it converts 70% user to customer.

    widely.io

    Feature of Laravel eCommerce Progressive Web Application

    • More user-friendly than a web application.
    • Dynamic SEO.
    • Push Notification functionality.
    • Admin can add PWA home page layout.
    • Also, work with low-quality internet
    • Do not need to update Progressive web Application.
    • Admin can set the splash background color of the Progressive Web Application.
    • Admin can enter the application name.
    • Looks and feels like a native application.
    • Increases user engagement in the store.
    • Admin can upload and change the application icon.
    • Admin can set the theme color of the Progressive Web Application.
    • Support multiple currencies.
    • Support social sharing feature of the product.

    Installation of Laravel eCommerce Progressive Web Application

    You have to run the below commands from the Bagisto root directory to install the PWA module.



    Run these commands below to complete the setup in the bagisto root directory.

    Creating Firebase Credentials for Push Notification

    In order to use Push Notification feature, you need to have Firebase Project Credentials.

    Step 1: Create your account on Firebase

    Go to https://accounts.google.com/ and Sign In with your Google Account.

    Step 2: Add/Create a Project on Firebase

    Go to https://console.firebase.google.com/ and click on Create a Project.

    Step 3: Get Credentials

    • At the right side of Project Overview, you will see a settings icon.
    • Click on the Settings icon and go to Project settings.
    • Under the general tab, scroll down and get these credentials: ( apiKey, authDomain, databaseURL, projectId, storage bucket, messagingSenderId, appId )

    Now go to the Cloud Messaging tab, under Project credentials – get these credentials: (Server key and Legacy server Key ).

    In the Cloud Messaging tab, under web Configuration – get key pair (also called vapid key ).

    Laravel eCommerce PWA Configuration

    Once you successfully execute the command, after that you will see the PWA in the Configure>PWA

    Name:- Admin has to enter the name of the Application, so It will be displayed on the home screen.

    Short Name:- Admin has to enter the short name of the application, so It will be displayed on the splash screen.

    Theme Color:- Set the theme color.

    Background Color:- Set the background color.

    Enable New Products:-  Enable toggle button for new products, so the new products section will be visible on PWA front end.

    Featured Products Enable:- Enable toggle button for featured products, so the featured products section will be visible on PWA front end.

    Enable Slider:- Enable slider so it will be visible on PWA front end.

    Categories Home Page Listing :- Enable toggle button for categories home page listing.

    Redirect user PWA If using mobile device:- Enable toggle button so it will automatically redirect PWA when customers are using website from mobile device.

    Author:- You can mention your company name.

    Meta Title:- Enter the meta title which will appear in the title bar of your browser and search result listing.

    Add Meta Description:- You can enter a brief overview of your store.

    Meta Keywords:- Enter the meta keywords to improve the searchability of your sites.

    App Icon:-

    Upload icon of the application so It will be displayed on the homepage. you can upload in various sizes.

    Push Notification:-  A notification is a message that pops up on the user’s device. For using push notification features, you have to enter the below details.

    • Server API key:- This is generated using the firebase web app and it can be found in cloud messaging under the project setting.
    • Topic:- With help of Topic, you can send one content(push notification) to multiple users.

    After setting all configuration, click on Save

    Push Notification

    Admin can manage push notifications by navigating Progressive Web App>>Push Notification. From here admin can add/remove push notifications. Click on Create Push Notification.

    Title:- Enter title for notification.

    Description:- Enter description for notification.

    Target URL:- Enter the URL on which user will be redirected when they click on the notification.

    Icon:- Upload the push notification message icon.

    Click on Save.

    Click on the bell icon to send the push notification as given above screenshots.

    PWA Layout:-

    You can add home page content for PWA by navigating Progressive Web APP>PWA Layout. 

    Enable Categories for PWA:-

    Go to Catalog>>Category to enable categories for PWA.

    How A Customer Can Install Progressive Web App on Desktop

    Now you can also Install PWA on your desktop like the below screenshot.

    Once you click on Install, PWA will be installed on your desktop.

    When a Push Notification is sent, it can be seen as the screenshot shown below.

    How A Customer Can Install Progressive Web App on Mobile

    A customer can open a website in the browser of the mobile device, then click on the menu icon of the browser to add the application on the home screen as shown below.

    Or

    You can click on “Add to Home screen” from the bottom popup.

    Now a pop window will appear to add the progressive web application like this.

    Now the user can view the app icon on the home screen of the mobile like this. A user can click on the application to launch it.

    After clicking on the application, the application will launch with the splash screen. PWA will launch as like Native app.

    After the splash screen, the user can search products or browse categories.

    That’s all for the Laravel eCommerce Progressive Web Application module, still, have any issue feel free to add a ticket and let us know your views to make the module better bagisto.uvdesk.com

    Current Product Version - 0.1.0

    Supported Framework Version - 1.2.0

    . . .

    Leave a Comment

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


    15 comments

  • Deepak kumar
    Hi i have issue with bagisto PWA . i install this plugins . in local it working fine but when i push to server it not working http://XXXXXXX/ working fine but for pwa i m runnimg http://XXXXXXX/mobile its giving me blank page
    • Sanjana Singh (Moderator)
      Hi Deepak,

      Can you please let me know which bagisto version you are using and what error you are getting on the console.

  • Helper
    Please, Run – npm run watch

    Inside PWA path

    package/webkul/PWA

    • Sanjana Singh (Moderator)
      Hi there,

      Greetings for the day!!

      Are you facing any issue after running this command?

  • Joe
    Hello Sanjana Singh.
    Thank you very much for your patience. I’m very sorry I didn’t express my question clearly.
    I refreshed my question.

    I successfully build an e-commerce website with Bagisto and successfully add the PWA extension.
    And I have configured the title and color of the PWA program in the Admin Panel.

    Now I try to install the PWA program on my home screen in Chrome (Android) and Safari (iPhone)

    The following operations are all done on the mobile phone.
    Success on your demo website:
    When I open (https://demo.bagisto.com/pwa-111-xxx-xx-xx/) with my phone, it will automatically jump to (https://demo.bagisto.com/pwa-111-xxx-xx-xx/mobile) Then when I tried to install the PWA program to my mobile home screen, I successfully got a PWA program.

    But it fails on my locally built website:
    When I open localhost:8000/

    with my phone, it doesn’t jump to localhost:8000/mobile

    Then I tried to install the PWA program to the home screen of my phone and I got a shortcut to my website. Instead of a PWA program.

    I found that it is only on this page localhost:8000/mobile that the PWA program can be added correctly.
    But I only have localhost:8000/ and no localhost:8000/mobile.
    Do I need to purchase other extensions, or where to configure them to get the page?

    • Sanjana Singh (Moderator)
      Hello Joe,

      First thing, can you please tell me how you accessing localhost:8000 on your phone. If you want to check the mobile view on your system, then inspect the site and select the responsive mobile.

      For further issue, you can raise a ticket here https://bagisto.uvdesk.com/en/customer/create-ticket/

  • Joe
    Thank you so much for developing such a great project.
    I can see the PWA in the Configure>PWA, and the PWA Notification. But when I add it to the desktop on iOS13, it shows the Meta title of the website. not the name of the PWA configuration.The PWA not effective.
    My steps follow the guide, am I missing something? On Bagisto0.1.8

    Then there are some typos in the manual.
    Webkul\\PWA\\Providers\\PWAServiceProvider::class
    Webkul\PWA\Providers\PWAServiceProvider::class

    Webkul\\PWA\\”: “packages/Webkul/PWA
    “Webkul\\PWA\\”: “packages/Webkul/PWA”

    • Sanjana Singh (Moderator)
      Hello Joe,

      Greetings for the day!!!

      Thank you for your feedback, you are using iOS13 so you are checking on the phone, not on the desktop?

      • Joe
        Thank you for your reply.
        Yes, I add the PWA program on the iPhone. Configure icon color title on desktop.

        When i open pwa demo site on my mobile https://demo.bagisto.com/pwa-xxxx/ , it will go to https://demo.bagisto.com/pwa-xxxx/mobile
        But projects deployed locally do not jump.
        Does it mean that you need to buy a mobile page, or develop it myself.

        • Joe
          My problem is that I want to add a PWA program to the desktop,
          But clicking the icon opens a website, not a PWA program.
          I can get the PWA program on your PWA demo.
          Do I need to buy a mobile extension, or develop it my self.
          • Sanjana Singh (Moderator)
            Hi Joe,

            As of now, bagisto PWA is not supported on desktop, when you want to run on your phone “https://demo.bagisto.com/pwa-xxxx/mobile”. You have to do below step

            1)enter the URL in the chrome browser and click on the 3 dot menu of the browser to add the application on the home screen.

  • Mseven
    Do I need to install npm?
    • saurav pathak (Moderator)
      Yes if you do any changes. But if something is not running, do install that and thereafter run the command – npm run watch
      • pankaj
        hello sir,
        I have run this command in PWA npm Install but it does’t work for me can you please explain it properly.
        • Sanjana Singh (Moderator)
          Hi Pankaj,

          Greetings for the day!!

          Can you please describe your issue which you are getting after running the command npm install?

  • Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close

    Table of Content

    Hide Index