Menu Close
    Searching for an experienced eCommerce & Marketplace Development Company ?

    Simple PWA For WordPress

    Introduction

    This WordPress PWA is meant to convert the website into a reliable and faster application. PWA is the best solution to enhance user experience. Henceforth it gives a native app-like feel to the app users.

    The user will be easily converting the app to PWA by Adding it to Homescreen. This option will add the application to the home screen. Thus, allowing the access of the site via an application only.

    However, apart from the e-commerce benefits, the application is valuable for the Blog Website. This is due to its additional support for WordPress. Wherein now the app user can read the blogs of WordPress using the PWA.

    This is a scalable solution for the website owner. Thus, gives higher performance benefits and attracts maximum customers.

    Note:- The plugin is compatible with WooCommerce v4.0.1.

    Checkout the PWA app experience at the mobile end and the configurations as well –

     

    Why Use PWA for eCommerce and Blogging Website?

    The creation of PWA can add great advantages to the eCommerce website and blogging website users. It helps in enhancing user engagement, improvising the conversion rate and make the checkout process more faster.

    • Advantage of Being on Homescreen– The PWA takes in the upper hand of being on the home screen. Thus allowing much easier accessibility.
    • User Engagement- This application is attractive enough for the user as they are a faster and reliable source. However, in addition, they have an extra dynamic feature of web push notification to make it more user-friendly.
    • The network is not an issue– Now, PWA has service workers which allows them to initiate the application in less data also.

    Establishing a Successful PWA like Aliexpress

    With the advent of technology, the PWA application is getting higher recognization. The major example of this advancement is AliExpress.

    So, as per the statistics shared Google Developers

    • 104% for new users across all browsers; 82% increase in iOS conversion rate
    • 2X more pages visited per session per user across all browsers
    • 74% increase in time spent per session across all browsers.

    Thus, the PWA can act as a boon to any business structure with it powerful features.

    Features-PWA For WordPress

    • Much user-friendly solution.
    • Works on low internet connectivity.
    • It just looks like a native app.
    • The theme of the application can be set from the backend by the admin.
    • The application name and icon could even be altered from the admin end.
    • Incrementation of store sales with user engaging features.
    • Supports Multi-store, multi-currency and multi-lingual.
    • Compatible with all the WordPress theme but the theme needs to be responsive.
    • The app is useful for both product sales as well as blogging website.
    • The module provides notification features for admin to share information with the customer.
    • All the WordPress Themes are compatible with the module.

    Note- However, you can even check the headless solution of PWA- Progressive Web App (PWA) for WooCommerce.

    Installation

    Steps

    1: Login to WordPress Admin Panel and navigate through ‘Plugins->AddNew‘.

    webkul_wc_pwa_installation_add_plugin

    2: Now, click on the ‘Upload Plugin‘ button on the top of your page to upload the zip file.

    webkul_wc_pwa_installation_upload_plugin-1

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

    webkul_wc_pwa_installation_browse_plugin-1

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

    webkul_wc_pwa_installation_install_plugin-1

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

    webkul_wc_pwa_installation_success_installed_plugin-1

    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 module configuration. Please visit this link and create a new project with your Gmail account.

    firebase

    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.

    webkul-woocommerce-pwa-1

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

    webkul-woocommerce-pwa-2

    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-3

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

    webkul-woocommerce-pwa-add-bucket

    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.

    webkul-woocommerce-pwa-project-setting-1

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

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

    1st Step – 

    webkul-woocommerce-pwa-nick-name

    2nd Step-

    webkul-woocommerce-pwa -add-sdk

    3rd Step-

    WooCommerce PWA Example Webkul Continue to console

    4th Step-

    webkul woocommerce pwa add firebase to your project

    5th Step-

    Progressive Web Application Webkl Continue to Console

    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.

    webkul-woocommerce-pwa -firebase-server-key

    The credentials retrieved will be used to configure the basic settings at the admin end.

    Admin Basic Configuration

    Post successful installation of the module the admin can easily navigate WP PWA. Here, the admin has two-section- Primary and General.

    Primary

    This section will contain the basic data of the application. It majorly covers the theme, name, and icon details.

    webkul-woocommerce-simple-pwa-admin-configurations
    • Name- Here, the admin will mention the application that is for recognition.
    • Short name- The application name that will be displayed in case the user creates a shortcut.
    • Theme Color- The color of the application as per the requirement.
    • Background Color- Here, the admin can set the app background color.
    • App Icon- The admin can add the icon of the application that is meant for recognization. These icons must be added in different sizes formate.

    General

    This section will allow the admin to set the general configuration of the PWA. Wherein the admin can define the integration of the website with PWA.

    webkul-woocommerce-simple-pwa-general-tab-configurations

    Google-based details-

    • Authorization Key– This key will authenticate the server end for the Push Notification.
    • API Key- This key will integrate the website with the PWA.
    • Auth Domain- The admin authentication domain detail for the push notification.
    • Database Url- The database URL details which will contain web push notifications.
    • Project Id- This will contain the project identification number. This project creates in the firebase for the notification.
    • Storage Bucket- It is the storage bucket for push notification.
    • GCM Sender ID- It is the help authentication, allowing to share web push notification.
    • Google App id- The identification number of Google account.

    Notifications: WordPress PWA

    The introduction of the notification is PWA will make it more powerful. These web push notifications will allow the targeting of the customer.

    Hence, for this, the admin needs to navigate through WP PWA > Notifications.

    Here, the admin will find a list of notifications which the admin can Push to populate. A bulk push could also be done.

    webkul-woocommerce-simple-pwa-notifications

    However, additionally, the admin will add new notification as per requirement or edit the existing one.

    webkul-woocommerce-simple-pwa-add-new-notification

    Thus, the admin will fill-in following field-

    • Image- The need to upload the image of the push notification.
    • Title- The admin will mention the name of the push notification which will refer to it.
    • Content- The addition of the information relating to the notification will be part of this section.
    • Type– Here the admin will specify the relation of the notification.
    • Product/Category/Link- The admin will select the category or product specifically with which the notification is in relation with.

    Additionally, the admin if selects type as custom. This will change the field to Link, now allowing the admin to add in any sort of URL.

    Here the URL could be of a product page, category page or any blogging (static) page.

    webkul-woocommerce-simple-pwa-url-redirection-of-a-page
    • Status- The admin needs to set the status of the notification as enable.

    Customer Front-WordPress PWA

    The customer can operate the application in their mobile apps by adding it to the home screen.

    For Android Devices

    For this, the user can open the website- https://pwa-wc.webkul.com/wp-pwa-for-website/ on a browser. From the web browser, the customer will get the option of Add To Homescreen.

    The customer can click on the option to integrate the app to the home screen.

    webkul-woocommerce-simple-pwa-add-to-homescreen-1

    Thus, this will add the application to the home screen of the device.

    webkul-woocommerce-simple-pwa-added-on-homescreen

    Once the application is added the customer can use it as a regular native application with website structure.

    For IOS Devices

    For customers to be able to operate mobile app for this website they need to open this link- https://pwa-wc.webkul.com/wp-pwa-for-website/ on their browser once it is opened it will be visible like this. 

    PWA-Homepage-IOS

    Now customers will have to navigate to Add to Home Screen on their browser settings. Once they click on this button, it will ask for Name of the app where you will have to provide the name. 

    PWA-add-to-home-screen-IOS

     

    PWA-name-IOS

    After following above instruction it will be added on the home screen and will be visible like this. 

    PWA-installed-IOS

    Finally the app is installed in IOS Devices and customer can use the native application with the website structure. 

    The customer could navigate to the collection page to find the Blog listing as shown in the image below.

    webkul-woocommerce-simple-pwa-blog-listing

    The customer can choose to view any of the blogs from the given list as shown in the image below.

    webkul-woocommerce-simple-pwa-choosin-from-the-list

    So, here the customer can even view the complete product in the application.

    webkul-woocommerce-simple-pwa-url-redirection-1

    Blogging section

    The website owner can add in static blog section which will contain the informative details about store likewise- Success stories, the technology behind the website, history of the business and many more.

    The user can read the information in these sections to remain aware.

    In our PWA the customer can navigate through Menu > Know More About-PWA.

    webkul-woocommerce-simple-pwa-menu-options

    The customer can click on the blog to read the details and acquire the knowledge via PWA.

    Notification

    Whenever the admin pushes the notification from the backend it is visible to the customer on the front end.

    Hence, it will allow the generation of sales from the customers who are not active.

    However, the customer can receive notification for the blogs.

    webkul-woocommerce-simple-pwa-notification-visibility

    On clicking the notification the customer will redirect to the URL linked.

    webkul-woocommerce-simple-pwa-url-redirection

    Support

    That’s all for the module, for any question/query, please raise a Ticket at our HelpDesk system. We are always happy to help you out. You can also get back to us via mail [email protected].

    Current Product Version - 1.0.0

    Supported Framework Version - Current Product Version - 1.0.0 Supported Framework Version - Supported Framework Version - Wordpress 4.6.x, 4.7.x, 4.8.x, 4.9.x, 5.0.x, 5.1.x,5.2.x,5.3.x Woocommerce 3.0.x, 3.1.x, 3.2.x, 3.3.x, 3.4.x, 3.5.x, 3.6.x,3.7.x, 3.8.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