How To Create A PWA

  • Created : Sep, 20, 2021
  • Last Updated : Aug, 14, 2022

PROGRESSIVE WEB APPS

The latest technology advancements have made it easier to give the users a splendid benefit of both web and mobile apps. A Progressive Web application is the replication of the mobile site. Due to the recent developments in the browsers and the availability of the service workers & push APIs, all have together prompted developers to allow users to install the web apps to their home screen.

Read more about Progressive Web apps and their benefits. At NotifyVisitors, you can create and configure PWA in some simple steps.

Read this article to know how to create PWA in the NotifyVisitors dashboard.

HOW TO CREATE PWA :

In order to create PWA and make it more installable, you are required to follow certain steps.

NotifyVisitors enables you to create and configure the PWA by fulfilling some necessary requirements. 

Steps to configure or create PWA :

1. Navigate to the NotifyVisitors dashboard > Configure PWA/TWA > Create New app.

configure PWA

2. Once you click on Create New App, you need to choose the PWA in the app type in order to configure PWA. Further, add the app name, theme color, background color for your app.

Create PWA

 

Note: Your PWA app must contain your domain name and ?webapp=1

3. Web app install banner: You can choose the following conditions for banners to let users install your app.

a. On page load:  Choose this option if you want your users to install your app on the page load. With this option, the users can view the install option or button for your PWA app in the form of a sticky bar, as soon as they arrive on your site. Once the users install the app, they can view the POP-UP button to add the app to their home screen as given in the below image.

b. On button click: You can select the following option of allowing the users to install your app on a button click.                                      

 

Note: A button id is required to configure this option to enable the users to add the app to their home screen.

                                                                  Button id

  add to screen

c. Custom banner: With this option, you can create a customized banner in order to obtain maximum installations from the users.

Customize banner

  • Choose the height and width for the banner
  • Select the position of the banner where you want to set the banner on the screen.
  • Set the content of the banner.

Refer to the below image for more reference.

custom banner

4. Image hosted link: Configure here the image links to host the image for your PWA app.

image link

Note: Images should be in .png format.

5. RICH PWA:  NotifyVisitors has now introduced a new feature to enable rich PWA. It is an expansion of PWA where you can add enriched features to your PWA app to make it handy for the users to click on it. 

HOW TO INTEGRATE PWA :

PWA integration can be done with one simple step, you simply require the javascript codes and the service worker file as given below.

 1. You need to integrate NotifyVisitors Code to run PWA. 

Note:  You can take the Bid and bid_e values from the dashboard.                     

2. The Service worker file- Goes to the root folder of the website. Refer to the PWA Integration code for service worker file placements.

https://www.example.com/service-worker.js?nvhash=2.1                                                   

Note: You can download the root file from the NV dashboard.

Follow the above steps to create PWA.

  1. This is extremely epic I would love to see more of these types of information being displayed I got this from book publishing services.