PROGRESSIVE WEB APPS

USER GUIDE
FOR MAGENTO 2
Version: 1.0.0
Release Date: 02.10.2017
Free Download: PWAs for Magento 2
 TABLE OF CONTENTS

INSTALLATION .......1

MODULE CONFIGURATION.....2

PUSH NOTIFICATION SETTINGS..16

TEST PWA PERFORMANCE...19

CUSTOMIZATION...22

CUSTOMER SUPPORT........23
 Page 1
1. Installation
Download Extension Unpack Zip File
Download the extension on the website: After downloading, unpack the extension zip
https://www.tigren.com/product/progressive- file
web-apps-magento-2

Run Following Commands Upload Files

php bin/magento module:enable Tigren_Core Upload all the files from the extension package
to the root folder of your Magento installation
php bin/magento module:enable
Tigren_ProgressiveWebApp
composer require sngrl/php-firebase-cloud-
messaging dev-master
 Page 2

2. Module Configuration
Admin Panel => PROGRESSIVE WEB APP => Settings
Or: Admin Panel => STORES => Configuration => TIGREN => Progressive Web App
 Page 3

2. Module Configuration
Manifest Settings: Set Short Name, Name, Description, URL & Background Color
 Page 4

2. Module Configuration
Manifest Settings: Set Theme Color
 Page 5

2. Module Configuration
Manifest Settings (cont.): Choose Display Type
 Page 6

2. Module Configuration
Manifest Settings (cont.)
Choose Display Type

Web Page/ Minimal UI Standalone App Fullscreen App

 Page 7

2. Module Configuration
Manifest Settings (cont.) Select Screen Orientation & Upload App Icon
 Page 8

2. Module Configuration
Manifest Settings (cont.):
App Icon

On Home Screen On Splash Page

 Page 9

2. Module Configuration
Push Notification Settings
 Page 10

2. Module Configuration
Push Notification Settings: Add Firebase to Your Web App
Step 1: Go to the page firebase.google.com and Sign In (You must have a Gmail account)
 Page 11

2. Module Configuration
Push Notification Settings: Add Firebase to Your Web App
Step 2: Add New Project (Click on GET STARTED => Add project)
 Page 12

2. Module Configuration
Push Notification Settings: Add Firebase to Your Web App
Step 3: Create a Project & Add Firebase to your web app
 Page 13

2. Module Configuration
Push Notification Settings: Add Firebase to Your Web App & Messaging Sender Id
Step 4: Copy the snippet in Firebase & paste it to Add Firebase to Your Web App (green)
Copy messagingSenderId number & paste it to Your Messaging Sender Id (red)
 Page 14

2. Module Configuration
Push Notification Settings: Firebase Cloud Message Server Key
Step 5: Copy the Server Key in Firebase & paste it to the field in the configuration.

Project settings

Cloud Messaging
=> Copy Server key

Paste to Firebase Cloud Message Server Key field

 Page 15

2. Module Configuration
Push Notification Settings: Topic name
Add Topic Name & Save Config
 Page 16

3. Push Notification Settings

Admin Panel => PROGRESSIVE WEB APP => Manage Notifications
 Page 17

3. Push Notification Settings

Create New Notification

Add New Notification

Add Title, Body, URL &

Upload Icon
 Page 18

3. Push Notification Settings

Send Notification

Click on the Send Notification button to send the notification instantly to the customer list.
 Page 19

4. Test PWA Performance

Download Lighthouse Extension & Add it to your Chrome
 Page 20

4. Test PWA Performance

Go to your PWA page => Lighthouse => Generate Report
 Page 21

4. Test PWA Performance

Check the results
 Page 22

5. Customization

FREE PROGRESSIVE WEB APP for Magento 2 is 100% open source and

provided under General Public License (http://www.gnu.org/licenses/gpl.html).

You are allowed to customize the module to meet your requirements.

 Page 23

6. Customer Support

Should you have any questions or feature suggestions, please submit a support

ticket at: https://www.tigren.com/contact/

Were glad to here your feedback!