Progressive Web Application For Magento 2

• More user-friendly than a web application.
• Works lightning fast if compared to the website.
• Supports push notifications for Android devices.
• Completely responsive on all the platforms.
• Launches without the internet or low-quality internet.
• Looks and feels like a native application.
• Users do not need to update the progressive web application.
• No app store requires managing the application.
• Increases user engagement in the store.
• Increases store revenue due to user engagement.
• The application name can be entered by the admin.
• The admin can upload and change the application icon.
• The splash background color of the Progressive Web Application can also be changed by the admin.
• The theme color of the PWA can be selected by the admin.
• Select the orientation of PWA as Any, Natural, Landscape, and Portrait.
• Select the display type for PWA Fullscreen, Standalone, Minimal UI, and Browser.
• The admin can upload the splash screen image for iOS.
• The admin can change the version number when want to refresh the service worker cache.

New Features

• Workbox Cache Strategies integrated with this module to make quick execution for better performance.
• Also improves website performance by caching assets in the first-page load. Workbox Background Sync Plugin is an absolute solution for resuming the interrupted network.
• Workbox Run-Time Caching to collects all the assets during page load and adds to browser cache.
• Cache Expiration Plugin to put restrictions on a cache and define how long it should allow details to be stored in a cache or how many items should be stored in a cache.
• A graphical representation of the total number of PWA downloads can be viewed by the admin.
• Users will be notified of every update on offers, deals, and order status.

To use Progressive Web App for Magento 2, you need to have Firebase Project Credentials. Meanwhile, it is required during module configuration. Please click here and create a new project with your Google account.

1.  After opening the Firebase page. Please create a project by clicking Add project button.

2. Then, create a new project, enter the name of the project, and click continue.

The next step will ask you to set up Google Analytics. Let’s go ahead and set it up.

(Optional) Enable Google Analytics for your project, then follow the prompts to select or create a Google Analytics account, if you don’t want to set google analytics, disable the toggle button or you can click “Continue” and you will be taken to the project home page.

Choose or create new Google Analytics, and click “Create a new Account”.

Finally, select your Google Analytics location (the United States by default) and read and configure the sharing settings. Finally, accept the Google Analytics Terms of Use and create a project. The process only takes a few seconds. When finished, click “Continue” and you will be taken to the project home page.

3. After creating your new project, click the Settings menu icon. And then select the Project Settings option. Please view the below screenshot. A new Project Settings page will open.

4. After entering the Project Settings page, go to the Cloud Messaging tab. Further, from here you will find your Project Credentials. Copy and save your Server Key and Sender ID as shown in the snapshot below.

5. Moreover, navigate through Project Settings > General will find the other Firebase Project Credentials under web apps. You need to enter these credentials into the admin configuration.

After the installation of the module, the admin can configure the module settings. For this, the admin will navigate to Stores > Configuration > Progressive Web Application as per the below image.

Settings

• Status – Enable or disable the module.
• Application Name – define the application name.
• Application Short Name – Set the application short name.
• Web API Key – The admin can get the Web API key from the Firebase in the general tab under the project settings.

• Auth Domain FCM – firstly insert the auth domain name here from the firebase web app.
• FCM Database URL – then enter the FCM database URL here
• Project Id FCM – after that enter the generated FCM Project ID here.
• Storage Bucket FCM – now put the FACM storage bucket here.
• Messaging Sender Id – so the next is place the sender ID here.
• FCM App Id – thereafter enter the FCM App ID here.
• Server Key – Server key which is generated using the firebase web app and it can be found in cloud messaging under the project setting.

• Public Key – thereafter enter the public key here and it can be found in cloud messaging under the project setting as web push certificates as shown in the image below-

• Measurement Id – Now enter the measurement Id.
• Application Icon – now upload the application icon. Allowed file types: png
• Splash Background Color – then set the splash background color.
• Theme Color – after that select the theme background color.
• Select Orientation – Select orientation of PWA as Any, Natural, Landscape, and Portrait.
• Select Display – Select the display type for PWA Fullscreen, Standalone, Minimal UI, and Browser.
• IOS Splash Screen Image – Upload the Splash Screen Image for iOS. Allowed file types: png and size must be 2048×2732
• Service Worker Version – Change the version number when want to refresh the service worker cache.

Admin can manage the Push Notifications by going to PWA > Manage PWA Notifications. From here admin can add/edit or delete any push notification. Admin can also enable or disable any push notification and can ‘Push’ the notification message by clicking on Send.

For adding or editing a Push Notification Message, the admin has to provide the Title, Message Body, Target URL, and the message icon image.

Now, with this new feature, the store owner can track the downloads and rejections for the PWA for any date. These analytics are shown in the form of a graph to the store owner that makes it very easy to understand.

By using the date filters the admin can view the download analytics for any previous date also. The Blue line on the graph shows the download results whereas the Red dotted line shows the rejected results for the PWA.