Progressive Web App for WooCommerce

Live Demo Buy Now

Convert your WooCommerce website into a PWA (Progressive Web App) instantly. The store visitors will experience the high-performance benefits of the PWA, which is based on a headless architecture.

The customers will be able to come back to your website by launching the app from their mobile home screen and can interact with your website through an app-like interface.

Progressive Web App for WooCommerce uses modern web technologies to deliver an app-like experience to users right within their web browsers.

This extension is built on top of the React.js library, which makes it even more powerful, flexible, fast, and scalable. Also check out the Shopify Headless React-based e-commerce.

Note:

Your website must be https:// enabled for offline caching to work.
Progressive Web App for WooCommerce is compatible with multisite.
Convert PWA into APK / IPA files (paid feature) and publish on Google Play and App Store.

Check the backend configuration –

Check the mobile end workflow –

What is a Progressive Web App?

A Progressive web app is a website that looks and feels like an app on your mobile device. What this means is that the users can access all information and capabilities without downloading and installing the mobile app.

Why go for Progressive Web Apps?

Progressive web apps are helping businesses to increase their conversions, page visits, and session lengths. PWAs also provide a better web experience to mobile users and are also a good option for businesses that don’t have much investment in developing their mobile apps.

To sum up, here are some of the benefits to reap –

Supports Slow Internet
Less data usage
Faster loading times
Improved performance
Engaging user experiences
Always updated app

Features

- Light Weight App.
- Easy to customize and make changes.
- More user-friendly than a web application.
- Supports slow internet.
- The shimmer effect is used for unobtrusive loading indicators.
- Work with low-quality internet also.
- No need to update the Progressive Web Application.
- It looks & feels like a native application.
- Increases user engagement in the store.
- Add the App Icon Text visible on the mobile device.

If you require expert assistance or want to develop custom unique functionality, hire WooCommerce Developers for your project.

Installation

1st Step: Log in to WordPress Admin Panel and navigate through ‘Plugins->Add New‘.

2nd Step: Click on the ‘Upload Plugin‘ button on the top of your page to upload the zip file.

3rd Step: Now, tap the ‘Choose File‘ button to browse for the zip file.

4th Step: After selecting the zip file, tap the ‘Install Now‘ button to install the plugin.

5th Step: After successful installation, a success message is visible along with an option to ‘activate‘ the plugin. Tap on ‘Activate Plugin‘ to activate the installed plugin.

Module Translation

To know how to translate the module, you can click here.

Creating Firebase Product Credential

In order to use this module, you need to have Firebase Project Credentials, which will be used in the backend configuration for setting up the module. Please visit this link and create a new project with your Gmail account.

1. After opening the Firebase website, please click on the Add Project button.

2. A new page will open the as shown below image, here you have to enter your Project Name. Then click on the “Continue” button.

3. Now enable google analytics for this project and click on the “ Continue” button.

4. Now you need to configure the Google Analytics. Here you need to select your Analytics location/Country. Then click on the “Create project” button.

4. After creating your new project click on the Storage and create a new bucket. You can also find the default bucket here.

After creating bucket now go to, Settings menu icon and select Project Settings option. Please view the below-attached screenshot. A new Settings page will be opened.

5. In the General tab find the project ID, web API key, etc. under the setting page.

Now click on the button as shown in the image below. This will be used to add the firebase to the web app.

Now, after clicking on the button above Register the app by entering the app nickname and click on register app –

1st Step –

2nd Step –

3rd Step –

4th Step –

5th Step –

Now, click the CLOUD MESSAGING tab, here you will find your Project Credentials, copy and save your Server Key (Google Authorization Key) as displayed below.

These credentials will be used in the Magento configuration.

Basic Configuration Settings – PWA

After the successful installation of the extension, the admin will navigate through PWA Application->Configurations. Here, we have five different tabs to configure –

General
Firebase
Sliders
Categories
Pages

Under the General tab, the admin will configure the App Configs and App Icons.

App Configs:

Here, the admin will –

Enter the name of the Progressive Web App.
Set the short name for the PWA app shortcut on the mobile device after installation.
Set the theme color of the PWA.
Choose the background color of the PWA.
Enter the app endpoint for accessing the PWA on mobile devices.

App Icons:

Here, the admin will upload the PWA App Logo and the app icons in various sizes as mentioned below –

48*48
96*96
144*144
192*192
512*512

After making the above settings, tap the Save button at the bottom to save your general settings.

Under the Firebase tab, the admin will configure the Firebase and Google credentials.

Here, the admin will –

Set the Google server key
Enter the Google API key
Set the Google Authentication Domain
Enter the Google database URL
Google measurement id needs to be entered
Google project ID has to be entered
Enter the Google storage bucket
Set the GCM sender ID
Enter the Google app ID
Setup the Web push certificate key

Lastly, tap the save button at the bottom.

Sliders:

Under this section, the admin will be able to see the added sliders and can add sliders for the PWA app as required.

To add a new slider, tap the Add Slider button. Here, the admin can –

Enable or disable the slider
Upload the image for the slider
Add a link for the slider image, tapping on which the customer gets redirected to the added link.

Lastly, tap on the save button to save the sliders.

The slider with the images is visible in the PWA app as per the snapshot below.

Notifications:

Here, under this section, the admin can create and send notifications as required.

To add a notification, tap the Add Notification button at the top and the below-shown section appears.

Here, to add a notification, the admin will –

Enter the title of the notification
Set the status of the notification as enabled
Enter the content of the notification
Upload an image for the notification
Choose the type of notification as Product, Category, or Custom as required
According to the chosen type of notification choose the product, category, or enter the custom link as required.

Lastly, tap the save button to save the notification.

To send the notification tap the Send Notification button.

After sending the notification, the same is visible on the PWA.

How to use – PWA for WooCommerce?

For Android Devices:

1st Step: Navigate to the URL – https://wcpwa.webkul.com/ on your desktop and scan the QR Code available on the page using your Android mobile device.

**Note: You can also directly scan the QR Code from the image displayed below.

2nd Step: After scanning the QR Code, you will be redirected to the Progressive Web App for WooCommerce. Tap the ‘Add PWA to Home Screen‘ notice(from the bottom of the screen) to add a shortcut of the PWA to your mobile home screen.

3rd Step: This brings up a pop-up. Tap the ‘Add‘ button on the right. Now, the PWA shortcut is added to your mobile home/app screen.

For iOS Devices:

1st Step: Navigate to the URL – https://wcpwa.webkul.com/ on your desktop.

2nd Step: Open the camera on your iOS device and scan the QR code. Tap the pop-up to open the website URL.

**Note: You can also directly scan the QR Code from the image displayed in step 1.

3rd Step: Now, you can see the Progressive Web App for WooCommerce. Tap the ‘Share ‘ button to add a shortcut to your mobile home screen.

4th Step: Select ‘Add to Home Screen‘ option to add a PWA shortcut.

5th Step: Now rename the PWA shortcut to something you can recognize and after that tap ‘DONE‘.

6th Step: PWA shortcut is visible on your home screen.

PWA For Users —

On your mobile home screen tap the PWA icon to open the Progressive Web App for WooCommerce.

Tapping the icon brings up a splash screen. After that, the home screen of the PWA is displayed to the users.

The users can see the home screen displaying the –

Slider
Search Icon
Top Categories
New Arrivals
Featured Products
On Sale Products
Home Page Option
Categories Option
SignIn Option
Cart Option

Within the PWA for WooCommerce, the users can navigate to the home page of the PWA by tapping the Home icon in the lower left-hand corner.

Search Products:

The users can search for the products within the store by tapping on the search icon in the top right-hand corner. In the search section just enter the 3 or more search letters to search the product within the store.

Register/Login:

Navigate to the profile section within the PWA and you will find the option to log in to your account if you already have one.

If the user wants to register then he can tap on the Sign Up option in the profile section. After that, the user can enter the details and register himself as a customer within the PWA.

The user who is already registered and forgets his password can make use of the Forget password option to reset his password. The user needs to enter his registered email address or user name and tap on the Reset password button to reset the password thereafter.

Now, the customer can enter his details again and will be logged in.

After Sign In, the customer has the following account options –

Theme Mode
Personal information
My Orders
My Address Book
Custom Pages(Like – Sample Page)

Let’s go through each section’s overview.

Theme Mode:

Here, the users can change the theme to light and dark modes for the PWA as required by tapping on the crest icon, and tapping on the light icon brings back the light theme.

Personal Information:

Under this section, customers can alter their information as required. Apart from that, the customer can add a Gravatar as required for his profile.

My Orders:

Under this section, the customers can see the complete list of orders that they have placed. Apart from that, they can view the details of a particular order as well.

My Address Book:

Under this section, the customers can see their added addresses and can edit the addresses as well as required.

Custom Pages:

Here, the customers can see the custom pages added by the admin from the configuration settings of the PWA. Tapping on the particular custom page displays the content of the page.

Categories:

Here, the customers can see the complete list of store categories and can navigate within them as required. Tapping on a particular category brings up the products within the same.

Apart from that, the customers can sort and filter the products as per the available options.

The admin can change the category banners from the backend. To do so, navigate through Products->Categories and then edit a particular category to add the category banner.

Also, the customer can easily make a checkout. To do so, the customer will navigate to the product and add it to the cart.

After adding to the cart the customer will go to the bag. Here, the customer will be able to apply a coupon as well and can change the delivery address as well as per requirement.

After that, the customer will tap on the place order button and will be taken to the page where the customer needs to select the payment method.

After selecting the payment method, the customer will tap the complete order button.

Completing the order the customer will see the success section for the placed order.

Apart from placing the orders, the customers can also make ratings and reviews on the products. For the same, the customer will navigate to the product page and tap on the ratings and review option.

After that, the customer will see the option to write a review.

Tap the Write Review button and give the rating and enter your review description for the product. Lastly, tap the Submit Review button. After approval from the admin, the review will be visible on the product page.

How to Integrate – WooCommerce Stripe Payment Gateway for PWA

After the successful installation of the PWA for WooCommerce you need to navigate through Plugins and search for Stripe as per the below snapshot.

Now, install and activate the Stripe payment gateway within your WooCommerce store.

After the above step, at the header, you can see a message displaying the details of installing and configuring the Stripe Payment gateway with the PWA application.