Laravel eCommerce 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

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

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

composer require bagisto/pwa:dev-master

php artisan migrate

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

php artisan route:cache
php artisan vendor:publish
-> Press 0 and then press enter to publish all assets and configurations.
That's it, now go to https://yourdomain/mobile

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.

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 Laravel native mobile app.

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