Progressive Web Apps for Magento 2 - User Guide

1
PROGRESSIVE WEB APPsUSER GUIDE

• FOR MAGENTO 2

Version 1.0.0 Release Date 02.10.2017 Free
Download PWAs for Magento 2
2
Table of contents
TIGREN

• Installation .......1
• Module Configuration.....2
• Push notification settings..16
• Test PWA Performance...19
• Customization...22
• Customer Support........23

3
1. Installation
Page 1
TIGREN
4
2. Module Configuration
Page 2
Admin Panel gt PROGRESSIVE WEB APP gt
Settings Or Admin Panel gt STORES gt
Configuration gt TIGREN gt Progressive Web App
TIGREN
5
Page 3
2. Module Configuration
Set Short Name, Name, Description, URL
Background Color
Manifest Settings
TIGREN
6
Page 4
2. Module Configuration
Set Theme Color
Manifest Settings
TIGREN
7
Page 5
2. Module Configuration
Manifest Settings (cont.)
Choose Display Type
TIGREN
8
Page 6
2. Module Configuration
Manifest Settings (cont.)
Choose Display Type
TIGREN
Fullscreen App
Web Page/ Minimal UI
Standalone App
9
Page 7
2. Module Configuration
Manifest Settings (cont.)
Select Screen Orientation Upload App Icon
TIGREN
10
Page 8
2. Module Configuration
Manifest Settings (cont.)
App Icon
TIGREN
On Home Screen
On Splash Page
11
Page 9
2. Module Configuration
Push Notification Settings
TIGREN
12
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)
TIGREN
13
Page 11
2. Module Configuration
Push Notification Settings Add Firebase to Your
Web App
Step 2 Add New Project (Click on GET STARTED gt
Add project)
TIGREN
14
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
TIGREN
15
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)
TIGREN
16
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
TIGREN
Cloud Messaging gt Copy Server key
Paste to Firebase Cloud Message Server Key field
17
Page 15
2. Module Configuration
Push Notification Settings Topic name
Add Topic Name Save Config
TIGREN
18
Page 16
3. Push Notification Settings
Admin Panel gt PROGRESSIVE WEB APP gt Manage
Notifications
TIGREN
19
Page 17
3. Push Notification Settings
Create New Notification
Add New Notification
TIGREN
Add Title, Body, URL Upload Icon
20
Page 18
3. Push Notification Settings
Send Notification
Click on the Send Notification button to send the
notification instantly to the customer list.
TIGREN
21
Page 19
4. Test PWA Performance
Download Lighthouse Extension Add it to your
Chrome
TIGREN
22
Page 20
4. Test PWA Performance
Go to your PWA page gt Lighthouse gt Generate
Report
TIGREN
23
Page 21
4. Test PWA Performance
Check the results
TIGREN
24
5. Customization
Page 22
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.
TIGREN
25
6. Customer Support
Page 23
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!
TIGREN