Shopify Progressive Application

Go to Landing Page, enter the shop URL where you want this app to be installed and click on ‘install’ menu.

This is the Home Page:

Under this, we have four sections: Home (the one we are currently at), Configuration, Push Notification, and Configure Frontend. Below that we have some of the PWA features displayed.

On the Home page, we have a menu of FAQ which will redirect you to a page where you will get all FAQs related to this application.

Moving ahead, you will see an option of feature configuration. Clicking on the ‘Configure App’ menu will redirect you to the Configuration section (will be discussed ahead in this manual). Next, you have a brief definition of PWA with ‘View App Feature’ and ‘Take a tour’ menu. Go ahead and explore these options.

Lastly, on the Home page we have these two menus:

Click on ‘Schedule Booking’ menu if you want to get one to one live support from our best executives and if you have any query, you can create a ticket by clicking on ‘Create Ticket’ menu and your request will be resolved as soon as possible.

This is all for the Home page, moving ahead to the Configuration section.

Configuration section will be displayed like this:

Firstly, you will have to manage General Configuration settings where you basically need to enter a name for your app (which will be displayed below the web app launcher icon when your users will install it in their devices), the Tagline (this will be the welcome line which will be displayed on the screen for once when you are done installing the web app on your device) and you also need to upload the Launcher icon (which will represent your web app).

Next, in general configuration, you need to check the box which says ‘Show App Features to customers while App Installation’ if you want your customers to see your apps feature while installing it with a brief description. Upload a ‘splash screen’, which could be any image that you want to display on the background of your app while installation (refer the image below). ‘Save & Publish’ to save all the changes made.

Under ‘General configuration’ setting, you have ‘Push Notification Configuration’.

Here you need to enter your Firebase Sender ID, Server Key, Application Public Server Key, Application Private Server Key (below in this manual you will find instructions for how to get these keys). Then you need to upload a ‘Push Notification Icon’, which will be shown on the very first welcome notification just after you install the web app.

Lastly under ‘Push Notification Configuration’, you need to enter ‘Push Notification Title’ and ‘Push Notification Description’ which will be displayed on the welcome notification sent to your customers once they install your web app. After this click on ‘Save’.

How to get your Firebase ID and keys?

Firstly login to your Firebase account using your credentials. This will be the page where you will land on:

Here, click on ‘Add Project’, this action will give you this pop up:

Enter the project name, check the ‘I accept’ message and then click on ‘Create Project’. After a few blinks, your project will be created and then after clicking ‘continue’, you will land on this Home page:

Click on ‘setting’ menu below Home icon (as shown in the image above) and then go to ‘Project Settings’.

This is what you will get:

From ‘settings’, go to ‘Cloud Messaging’, here you will get your Sender ID as well as Server Key. Now, scroll down to the bottom of this page, you will get this ‘Web Push certificates’ section:

Click on ‘Generate Key Pair’, this will give you this page:

Here, you will have your ‘Application public server key’. For ‘Application private server key’, click on the three dots as shown in the image above. This will give you an option to ‘Show Private Key’ (refer image below).

Clicking on the ‘Show private key’ and this will give you a pop up with ‘Application private server key’.

Copy all these keys and paste it in the ‘Push Notification Configuration’.

This will be the page which you will get once you click on the ‘Push Notification’ section.

On the top right of the page, you have the ‘Add Push Notification’ menu.

Below that, you have a table with Title, Description, Push Notification Icon, Schedule Date, Push Notification, Status, and Action.

• Title: This is the heading of the notification that will be sent to your customers like if you are having a sale on your store, you can put up a title like ‘sale’.
• Description: This is the details about your notification like what is the sale about or offers your giving.
• Push Notification Icon: This icon will be shown with the notification depicting the reason for the notification or maybe your store logo.
• Schedule Date: This is the duration for which you want your customers to be notified about this particular notification.
• Push Notification: This is a button for manual notifications. You can press it any time you want to send your customers that particular notification.
• Status: If the status is active, notifications will be sent to your customers as per the duration defined. If it is inactive, notifications will not be sent to your customers. Though, you may send manual notifications even if the status is inactive.
• Action: This allows us to perform three actions on the notification i.e., Delete, Edit and Inactive.

How to add Push Notification?

Click on the ‘Add Push Notification’ menu on the top right and this action will display a pop up on your screen like this:

Enter FROM and TO date, Title, Description, Push Notification icon and click on ‘add notification’.

When you click on the ‘edit’ menu in the ‘more actions’ option, a similar pop up will appear, make the desired changes and click on ‘add notification’ to save the changes made.

This is all about ‘Push Notification’. Let’s move on to last section ‘Configue Frontend’.

When your customers will visit your store using your store URL on their Android/iOS device, they will get such a display on their screen:

Here, they will see the features of your store which you added on ‘configuration page’ with a message saying ‘Add *your app name* to Home screen’.

Clicking on this message will display a pop up on their screen as shown in the image below:

Clicking on ‘ADD’ will display your web app on their home page.

Once you open the app, you will see this display having shop logo and tagline:

And this is how customers will receive the notifications: