{"id":805464,"date":"2020-06-10T10:48:07","date_gmt":"2020-06-10T10:48:07","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=805464\/"},"modified":"2022-08-13T12:01:14","modified_gmt":"2021-02-22T14:36:44","slug":"magento-2-pwa-user-manual","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/user-manual\/magento-2-pwa-user-manual\/","title":{"rendered":"Magento 2 PWA Mobile App – User Manual"},"content":{"rendered":"

1.0 Introduction<\/h2>\n

Being in the retail eCommerce industry, you must have come across the word PWA (Progressive Web App). If yes, you must be also aware of the capability they carry as a shopping application. In case not, you’ve landed in the right place. With the constant growth in the usage of shopping apps (both native & PWA), online stores are shifting to PWA Mobile App development for their businesses. Launching a Progressive Web App is quite a simpler and affordable task these days.<\/p>\n

KnowBand has launched Magento 2 PWA Mobile App, a complete no-code and automated tool to launch a Progressive Web App. In simple words, whenever any user opens your store URL on the mobile browser, he will get a prompted message of “Add To Home Screen”. The Magento 2 Progressive Web App will be added in the user’s device like any other app and online purchasing can be done on the go.<\/p>\n

1.1 View Demo App:<\/h3>\n

Explore Progressive Web App demo for Magento 2 and take a glance at how your final apps will look and work:<\/p>\n

Demo Store URL:\u00a0<\/strong>https:\/\/ma2demo.knowband.com\/pwa\/manager\/<\/a>
\nPWA App URL:\u00a0<\/strong>https:\/\/ma2demo.knowband.com\/pwa\/pwa-app\/<\/a><\/p>\n

 <\/p>\n

[IMP] Notes For Magento 2 iOS PWA:<\/h4>\n

\u2013> iOS devices do not offer any inbuilt \u201cAdd To Home Screen\u201d prompt. Users need to manually add the Magento 2 PWA Mobile App to the home screen of iPhone or iPad.<\/p>\n

\u2013> iOS does not support web push notifications. The push notifications can only be sent to the Android device from the admin panel of\u00a0Magento 2 PWA Mobile App Builder.<\/p>\n

[NEW UPDATE] Magento 2\u00a0PWA supports RTL Languages:<\/h4>\n

The\u00a0Magento 2 PWA Mobile App Creator now supports all worldwide languages including RTL (Right To Left). The PWA Mobile App for Magento 2 can have languages like Arabic, Hebrew, Persian, etc. The store owner can offer all website languages on the Progressive Web App and can even add new ones.<\/p>\n

2.0 Admin Panel Screens:<\/h2>\n

With the friendly admin panel backend, the store admin can configure and customize the look, feel, and working of the PWA Mobile Application. It’s just a matter of a few clicks and mouse toggles to make changes in the Magento 2 Progressive Web Apps. Let’s take a detailed overview of the Admin panel screens:<\/p>\n

2.1 General Settings:<\/h3>\n

\"general-settings\"<\/p>\n

a) Enable the Extension:<\/strong>\u00a0Enable\u00a0Magento 2\u00a0PWA module to make web app work on the users’ smartphones.<\/p>\n

b) Redirect on Cart Page when Add To Cart:<\/strong>\u00a0Enable to re-direct users to shopping cart or disable to keep them on the product screen.<\/p>\n

c) Display Short Description:<\/strong>\u00a0Enable to add & display a short description on the product screen of Progressive Web App.<\/p>\n

d) Enable Request Log Reporting:<\/strong> Enable this tab to activate the log file on the PWA Mobile App. This log file can be used to rectify any abnormal behavior of Progressive Web Application.<\/p>\n

e) Show App Preview:<\/strong> Enable to add a preview phone in the admin panel. All color, font, home screen changes will be displayed in real-time preview phone.<\/p>\n

f) Enable Tab Bar:<\/strong> Add a bottom tab bar on the Magento 2 PWA Mobile App.<\/p>\n

g) Select Layout for Home Page:<\/strong>\u00a0Choose desired layouts from the added ones and improve look and feel of app.<\/p>\n

\"General-settings-2\"<\/p>\n

h) Image for App Icon:<\/strong>\u00a0Upload Magento 2 PWA app icon on your own and change the same as well if required.<\/p>\n

i) Name For PWA App:<\/strong>\u00a0Enter the name of the Magento 2 Progressive Web App.<\/p>\n

j) Select Font For PWA App:<\/strong>\u00a0Choose the font of your PWA app for Magento 2.<\/p>\n

k) App Button Color:<\/strong> Choose button color for your PWA Mobile App.<\/p>\n

l) App Button Text Color:<\/strong> Choose the button text color for your Magento 2\u00a0Progressive Web App.<\/p>\n

m) App Theme Color:<\/strong> Choose the theme color (header) of your web application.<\/p>\n

n) App\u00a0 Background Color:\u00a0<\/strong>Choose the background color of the Progressive Web Application.<\/p>\n

o) Splash Screen Background Color:<\/strong> Choose the right color option for the background of the PWA app splash screen.<\/p>\n

\"General-settings-3\"<\/p>\n

p) Disabled Shipping Methods<\/strong>: Choose shipping methods to be restricted from working in Magento 2 PWA mobile app.<\/p>\n

q) Enable & Upload Logo:<\/strong> Add the logo image of your store to be displayed on the header of the PWA Mobile app.<\/p>\n

2.2 Push Notifications Settings:<\/h3>\n

The Magento 2 Progressive Web App offers unlimited push notifications to market and promotes store deals and products. The store admin will get push notifications for a lifetime with no additional charges.<\/p>\n

\"push-notifications\"<\/p>\n

The various fields under this setting tab require a Firebase Account set up. Here’s how you may set one:<\/p>\n

How to set up a Firebase Account?<\/strong><\/p>\n

Step 1:<\/strong> Login Google Firebase<\/p>\n

\"firebase\"<\/p>\n

Step 2:<\/strong> Create a New Project
\nAs you click on Add Project, the following dialog box will pop up:<\/p>\n

\"create-project\"
\nIt will take a few seconds to create the project. Once the project is ready, click continue.<\/p>\n

\"continue-project\"<\/p>\n

Step 3:<\/strong> Manage Project Settings
\nOnce the project is created, click on Project Settings.<\/p>\n

\"project-settings\"<\/p>\n

Step 4:<\/strong> Go to Authentication options:<\/p>\n

\"authentication-options\"
\nStep 5:<\/strong> Find Firebase Keys
\nIn the project settings, click on Cloud messaging settings. From here, you can directly get the server key.<\/p>\n

\"firebase-key\"
\nStep 6:<\/strong> Add your Web-App to Firebase<\/p>\n

\"web-app-to-firebase\"<\/p>\n

\"web-app-to-firebase\"<\/p>\n

Step 7:<\/strong> Get other firebase related details and paste the same in PWA module admin panel.<\/p>\n

\"firebase-details\"<\/p>\n

Step 8:<\/strong> Get firebase server key from cloud messaging tab in Settings:<\/p>\n

\"firebase-key\"<\/p>\n

Step 9:<\/strong> Add your domain in authentication>>sign-in.<\/p>\n

\"firebase-server-key\"<\/p>\n

\"firebase-server-key\"<\/p>\n

2.21 Automated Push Notifications:<\/h4>\n

The store admin gets to schedule automated notification sending for the following cases:<\/p>\n

\"push-notifications-2\"<\/p>\n

a) New Order Settings:<\/strong>\u00a0Whenever any new order is placed from the Magento 2 PWA Mobile App.<\/p>\n

b) Order Status Change Settings:<\/strong> Whenever the delivery status of any order gets changed\/updated.<\/p>\n

c) Abandoned Cart Settings:<\/strong> Whenever any user leaves product in cart and abandon Progressive Web App.<\/p>\n

2.22 Manual Push Notification:<\/h4>\n

\"send-notification\"<\/p>\n

As shown in the above snapshot, the store admin can personalize and send manual push notifications to PWA Mobile App users. The message, image, discount offered, redirection link can be added\/edited to improve the efficiency of notification and bring more sales.<\/p>\n

2.3 Home Page Layout:<\/h3>\n

The Magento 2 PWA Mobile App Builder offers a fully customizable DIY editor panel to customize and configure the look and feel of Progressive Web Application. Various new layouts can be added to the admin panel based on upcoming festivals and occasions.<\/p>\n

\"home-page-layout\"<\/p>\n

\"home-screen-layout-3\"<\/p>\n

2.31 Top Categories:<\/h4>\n

\"top-categories\"<\/p>\n

2.32 Square Banner:<\/h4>\n

\"square-banner\"<\/p>\n

2.33 Sliding Banner:<\/h4>\n

\"sliding-banner\"<\/p>\n

2.34 Grid Banner:<\/h4>\n

\"grid-banners\"<\/h4>\n

2.35 Countdown Timer Banner<\/h4>\n

\"countdown-timer-banner\"<\/p>\n

2.36 Square Products:<\/h4>\n

\"square-products\"<\/p>\n

2.37 Sliding Products:<\/h4>\n

\"sliding-products\"<\/p>\n

2.38 Grid Products:<\/h4>\n

\"grid-products\"<\/p>\n

How to get Facebook App details?<\/h3>\n

Facebook App can be created by following below-mentioned steps:-<\/p>\n

Step 1:<\/strong>\u00a0Go to given\u00a0URL: https:\/\/developers.facebook.com\/apps\/<\/p>\n

Step 2:<\/strong>\u00a0Click on the \u201cAdd a New App\u201d button.<\/p>\n

\"add-new-app\"<\/a><\/p>\n

Step 3&4:<\/strong>\u00a0Enter your App name and email id, then click on \u201cCreate App ID\u201d button.<\/p>\n

\"create-app-id\"<\/a><\/p>\n

Step 5&6:<\/strong>\u00a0After clicking on Create App ID you will have to\u00a0go through a security check as shown:<\/p>\n

\"create-app-id\"<\/a><\/p>\n

Step 7:<\/strong>\u00a0Click on \u201cSetting\u201d tab.<\/p>\n

\"fb-app-setting\"<\/a><\/p>\n

Step 8-13:<\/strong>\u00a0Two option will be available in the\u00a0dropdown, Basic and Advanced, click on \u201cBasic\u201d. And then enter your \u201cApp Domain\u201d,\u00a0\u201cContact Email\u201d, \u201dPrivacy\u00a0URL\u201d, \u201dTerms and Conditions\u00a0URL\u201d, \u201dAdd Logo\u201d, \u201dSelect Category\u201d and click on \u201cSave Changes\u201d button.
\nApp Domains:
\nyourdomain.com is\u00a0correct
\nyourdomain.com\/store is\u00a0incorrect
\nwww.domain.com is\u00a0incorrect<\/p>\n

\"fb-app-id\"<\/a><\/p>\n

Step 14:<\/strong>\u00a0Now click on \u201c+Add Platform\u201d.<\/p>\n

\"add-platform\"<\/a>
\nStep 15:\u00a0<\/strong>And select Website as Platform.<\/p>\n

\"choose-platform\"<\/a><\/p>\n

Step 16:<\/strong>\u00a0Now Enter your site URL.<\/p>\n

\"enter-website-url\"<\/a>
\nStep 17&18:<\/strong>\u00a0Click on \u201cProducts+\u201d and select Facebook login.<\/p>\n

\"facebook-login\"<\/a>
\nStep 19:<\/strong>\u00a0Select web as the platform for the app.<\/p>\n

\"choose-platform\"<\/a><\/p>\n

Step 20:<\/strong>\u00a0Now click on save.<\/p>\n

\"facebook-app-id\"<\/a>
\nStep 21&22:\u00a0<\/strong>Click on Settings and add a Valid OAuth Redirect URIs.
\nValid OAuth Redirect URIs:
\nhttps:\/\/example.com\/pwa-app\/login<\/p>\n

\"redirect-URL\"<\/a><\/p>\n

Step 23&24:<\/strong>\u00a0Click on \u201cApp review\u201d. And\u00a0mark \u201cMake \u2018your app name\u2019 Public\u201d to Yes.<\/p>\n

\"app-review\"<\/a>
\nFinal Step:<\/strong>\u00a0Copy the App ID and App Secret and paste it into the fields provided in the module.<\/p>\n

\"final-step\"<\/a><\/p>\n

How to get Google App details?<\/h3>\n