Progressive Web Apps for Magento 2 - Free Download | Tigren

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

1. Installation

Page 1

Download Extension

Unpack Zip File

• Download the extension on the website: https://www.tigren.com/product/progressiveweb-apps-magento-2

• After downloading, unpack the extension zip file

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-cloudmessaging dev-master

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

Page 2

2. Module Configuration Manifest Settings:

Set Short Name, Name, Description, URL & Background Color

Page 3

2. Module Configuration Manifest Settings:

Set Theme Color

Page 4

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

Page 5

2. Module Configuration Manifest Settings (cont.)

Choose Display Type

Web Page/ Minimal UI

Standalone App

Fullscreen App

Page 6

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

Page 7

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

On Home Screen

On Splash Page

Page 8

2. Module Configuration Push Notification Settings

Page 9

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 10

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

Page 11

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

Page 12

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 13

2. Module Configuration

Page 14

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

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

Page 15

3. Push Notification Settings Admin Panel => PROGRESSIVE WEB APP => Manage Notifications

Page 16

3. Push Notification Settings Create New Notification Add New Notification

Add Title, Body, URL & Upload Icon

Page 17

3. Push Notification Settings Send Notification Click on the Send Notification button to send the notification instantly to the customer list.

Page 18

4. Test PWA Performance Download Lighthouse Extension & Add it to your Chrome

Page 19

4. Test PWA Performance Go to your PWA page => Lighthouse => Generate Report

Page 20

4. Test PWA Performance Check the results

Page 21

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/ We’re glad to here your feedback!