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

The users 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.

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

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 –

  • Offline support
  • Less data usage
  • Faster loading times
  • Improved performance
  • Engaging user experiences
  • Always updated app

PWA – Example:

Check how AliExpress witnessed incredible results after changing to a Progressive Web App:

  • 104% increase in conversions for new users
  • 2x more pages visited per session
  • 74% increase in time spent per session 

pwa for woocommerce working example by webkul

Features

    • Light Weight App.
    • Easy to customize and make changes.
    • More user-friendly than a web application.
    • Offline support for the PWA.
    • Shimmer effect 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.
    • Customize the color for the Splash Screen background and theme.
    • Set the Text within the Splash Screen.
    • Add the App Icon Text visible on the mobile device.

Installation

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

webkul_wc_pwa_installation_add_plugin

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

webkul_wc_pwa_installation_upload_plugin

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

webkul_wc_pwa_installation_browse_plugin

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

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

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

firebase get started to create the keys

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

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

webkul-woocommerce-pwa

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

webkul-woocommerce-pwa -google-analytics

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. 

webkul-woocommerce-pwa create project

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

webkul-woocommerce-pwa -add-bucket

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

WooCommerce PWA Webkul Add Firebase to your App

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.

webkul-woocommerce-pwa -general-setting

To know further steps, visit the link --> Webkul.com