Back to Top

Odoo Website PWA (Progressive Web Application)

Updated 3 October 2023

INTRODUCTION

The PWA (progressive web application) for Odoo website is designed to work as a normal app on the mobile device. However, unlike any native software application, the client doesn’t need to download it to its device’s memory.

The customer just needs to use the customized Odoo website PWA URL and load the site on its browser.

The Odoo PWA is browser-independent which means it can be loaded on any browser.

It also supports cache loading like any other PWA, which means the webpage the customer visits are stored in the cache so if the internet connection is lost, he/she can still browse the Odoo website content without interruption.

To make sure that the module works properly, your website should be SSL certified and run on an https connection.

Searching for an experienced
Odoo Company ?
Find out More

ODOO WEBSITE PWA FEATURES

Below is a concise list of Odoo Website PWA Features. To know more in detail Please Visit Our Store Page.

  • Build To Acts As a Native App
  • Connectivity Independent – It shows the status of the internet connection.
  • Supports page preloading to help the person to browse without connectivity.
  • Allows customers to add the Website PWA to the screen. The Odoo PWA website can then be launched from the home screen.
  • The customers can access the PWA website directly through any browser.
  • Send push notifications to PWA website users.
  • Schedule the notifications in Odoo for a later date.
  • Create and store push notifications templates in Odoo.
  • Choose the target customers for the push notification.
  • Change the appearance of the Odoo Website PWA icon.
  • Set the long and short name of your PWA icon from Odoo.
  • No need to install or download in the device memory.
  • View the number of users using your Odoo PWA website from Odoo.
  • Supports Multiple Website Compatibility. Configure separate PWA website for each website on the same

INSTALLATION

1.) Once you purchase the App from the Webkul store, you will receive the link to download the zip file of the module.

2.) Extract the file on your system after the download finishes. You will be able to see a folder named- ‘odoo_ecommerce_pwa.

3.) Copy and paste this folder inside your Odoo Add-Ons path.

4.) Now, open the Odoo App and click on the Settings menu. Here, click on Activate the Developer Mode.

5.) Then, open on the Apps menu and click on ‘Update Modules List’.

6.) In the search bar, remove all the filters and search ‘odoo_ecommerce_pwa.

7.) You will be able to see the module in the search result. Click on ‘Install’ to install it.

Before moving ahead, Check our extensive range of Odoo Apps.

WORKFLOW

Configuring the PWA from the backend

1.) Go to Website Settings >> Website PWA.

2.) Set the Name of your Odoo Website PWA.

3.) You can also choose the short Name; it is visible when the user adds it to the Home Screen.

4.) Set the Splash Screen color, PWA background theme color, and application icons.

PWA Configuration Settings 1

5.) The start URL determines the page on which the users land when they launch the Odoo website PWA on their devices. Such as shop page, website home page, etc.

PWA Configuration Settings 2

Configuring the Push Notifications

6.) You would need a Google Firebase account to enable push notifications for your Odoo website PWA.

7.) Click on the following link to know more about how to create an account on Google Firebase >> https://firebase.google.com/

8.) Now, login into your Firebase account, Then click on ‘Create Project’ and choose the apt project name.

Friebase Push Notifications 1
Friebase Push Notifications 2

9.) Now, go to Project Settings >> Cloud Messaging.

Friebase Push Notifications 3

10.) Here, you can see the Project credentials i.e. API Key and Sender ID.

Friebase Push Notifications 4

11.) Enter the credentials under Odoo Website Settings >> Website PWA. And Save.

Friebase Push Notifications 5

Types Of PWA Users

12.) The module automatically stores three types of Odoo Website PWA users in Odoo.

  • Portal Users >> who are using PWA while being logged into the Odoo website.
  • Public Users >> Who are browsing PWA but do not have a website account.
  • Internal Users >> those who have access to Odoo backend.

13.) You can see the list of Users and their type from Odoo Website >> Registered Browsers.

Odoo PWA Users List

Sending SMS Push Notification

14.) To create SMS notification templates, go to Website >> Notification Templates >> Create.

Friebase Push Notifications 6

15.) Enter the title for the notification. 

16.) Choose the Logo: Either from a URL or add from local storage.

Odoo Website PWa Notification template 1

17.) Then, add the target link to which you want to redirect users. And also the body of the push notification.

18.) Choose the User type.

Odoo Website PWa Notification template 2

19.) You can choose to set the scheduler to the push notification.

Odoo Website PWa Notification template 3

20.) Click on validate to set the push notification.

21.) You can either send the push notification or set it back to draft for further editing.

Odoo Website PWa Notification template 4

22.) Once sent, the customers receive the push notifications on their mobile devices or laptops/desktops.

Odoo Website PWa Notification template 5
Odoo Website PWa Notification template 6

Using Odoo PWA Website

22.) You do not need to do any manual efforts. Once you install and configure the module, your Odoo website domain will automatically turn into a PWA.

23.) Launch your Odoo website on your device. Just enter the normal URL of your website such as www.webkul.com.

Launching PWA

23.) The customer is prompted to add the PWA to his/her Mobile Device Home Screen while launching the website PWA.

Launching PWA2

24.) During browsing If your internet connection is interrupted, the customer will see the red indicator.

Launching PWA 3

25.) You can still browse the cached website pages while disconnected from the internet.

26.) Once you come back online, the blue popup indicator notifies you.

Launching PWA 4

NEED HELP?

Was this guide helpful? Please share your feedback in the comments below.

If you have any issues/queries regarding the module please raise a ticket at
https://webkul.uvdesk.com/en/customer/create-ticket/

For any doubt contact us at [email protected].

Thanks for reading!!

Current Product Version - 1.0.0

Supported Framework Version - Odoo V11, V12, V13

. . .

Leave a Comment

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


4 comments

  • Samuel
    • Anisha Bahukhandi (Moderator)
  • chadi elmoussa
    • Vikram Saini (Moderator)
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content