{"id":65301,"date":"2016-11-22T14:47:17","date_gmt":"2016-11-22T14:47:17","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=65301"},"modified":"2025-12-19T04:46:18","modified_gmt":"2025-12-19T04:46:18","slug":"progressive-web-application-magento2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/","title":{"rendered":"Guide of Progressive Web Application For Magento 2"},"content":{"rendered":"<p style=\"text-align: justify;\"><a href=\"https:\/\/store.webkul.com\/magento2-progressive-web-app.html\">Magento 2 PWA extension<\/a> (Progressive Web Application) uses web compatibilities and provides an application experience to the users.<\/p>\n<p style=\"text-align: justify;\">It develops from a browser tab and makes pages more immersive with a low friction user experience.<\/p>\n<p style=\"text-align: justify;\">The Progressive Web Application is lightning fast compared to the website moreover supports push notification.<\/p>\n<p style=\"text-align: justify;\">According to the Google developers &#8220;Flipkart, India\u2019s largest e-commerce site, decided to combine their web presence and native app into a Progressive Web Application.<\/p>\n<p style=\"text-align: justify;\">For more details, you can click <a href=\"https:\/\/developers.google.com\/web\/showcase\/2016\/flipkart\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n<p style=\"text-align: justify;\">Henceforth, with the use of this feature, the website works faster on a slower internet connection.<\/p>\n<p style=\"text-align: justify;\">Due to the faster performance, user engagement increases on the website and results in a very high conversion rate.<\/p>\n<p style=\"text-align: justify;\"><strong>Important Note: <\/strong><\/p>\n<ul>\n<li style=\"text-align: justify;\"><strong>This module supports android chrome, opera browsers, and iOS Safari browser.<\/strong><\/li>\n<li><strong>The web push notification is compatible with both Android and iOS(After installing the PWA) devices.<\/strong><\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Magento 2 PWA extension supports all Magento 2 (Adobe Commerce) responsive templates\/themes as well as Webkul&#8217;s <a href=\"https:\/\/store.webkul.com\/magento2-multi-vendor-marketplace.html\">Magento 2 Multi Vendor Marketplace<\/a> module.<\/p>\n<p>Watch the video tutorials below to understand the Magento 2 PWA extension:<\/p>\n<div class=\"wp-block-wk-block-youtube-video wk-block--yt-video wk-block-yt-classic components-placeholder\">\n<div class=\"wk-block--yt-video-frame\">\n<div class=\"wk-block--yt-video-frame-request\" data-plyr-provider=\"youtube\" data-plyr-embed-id=\"VEKzQM6ITg0\">\n<div class=\"components-placeholder__instructions\">VEKzQM6ITg0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"alert alert-success\" style=\"text-align: justify;\">\n<h4><strong>What is the need for a Progressive Web Application?<\/strong><\/h4>\n<\/div>\n<p style=\"text-align: justify;\">The Progressive Web Application is recommended because it is more immersive and lightning-fast than a website or native application.<\/p>\n<p style=\"text-align: justify;\">Progressive Web Application also user-friendly if compared to the website and supports the push notification.<\/p>\n<p style=\"text-align: justify;\">Furthermore, the best part of Progressive Web Application is that a user can use many of the features without an internet connection and the mobile is connected to the internet the data gets synced.<\/p>\n<p style=\"text-align: justify;\">In short, you can say that if you are providing a platform to your user which is user-friendly and faster then it will definitely increase the engagement of the users and increase in sales.<\/p>\n<ul style=\"text-align: justify;\">\n<li>The Website becomes lightning fast.<\/li>\n<li>More user-friendly.<\/li>\n<li>Supports push notification.<\/li>\n<li>No need to download\/install.<\/li>\n<li>Works fast even on a slow connection.<\/li>\n<li>Increases User engagement.<\/li>\n<li>Boost conversion rate.<\/li>\n<\/ul>\n<h2>Lighthouse PWA Score<\/h2>\n<p><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/fe503b9618f54a19851cfe453a2d3260.png\"><img decoding=\"async\" class=\"aligncenter wp-image-79641\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/fe503b9618f54a19851cfe453a2d3260.png\" alt=\"PWA\" width=\"800\" height=\"438\" loading=\"lazy\" \/><\/a><\/p>\n<h3 style=\"text-align: justify;\"><strong>I have developed a native application for my store, do I still need the Progressive Web Application? <\/strong><\/h3>\n<p style=\"text-align: justify;\">For a native application, users first need to search the application in the relative store, download and install it, and then they can open and use the application.<\/p>\n<p style=\"text-align: justify;\">According to a study, an application loses 20% of its users on every step, from search to start using the app features.<\/p>\n<p style=\"text-align: justify;\">However, a user can start using the progressive web application as soon as they find the application. There, is no need to search, download, and install the application.<\/p>\n<p style=\"text-align: justify;\">Also, you need to upgrade the native application with every version of android.<\/p>\n<p style=\"text-align: justify;\">You can check that many of the applications are not available for the most recent or past very old version of Android.<\/p>\n<p style=\"text-align: justify;\">However, the Progressive Web Application works with the browser and designed to enhance browser compatibility.<\/p>\n<p style=\"text-align: justify;\">Furthermore, we are not at all saying that a native application is bad but these are a few merits of the progressive web application in comparison to native applications.<\/p>\n<p style=\"text-align: justify;\">If you are running a business then you should reach all types of users.<\/p>\n<p style=\"text-align: justify;\">If you are using a well\u2013designed native application like Mobikul <a href=\"https:\/\/store.webkul.com\/magento2-mobile-app.html\">Magento 2 Mobile App<\/a>\u00a0then it will surely give you high performance and consume low data.<\/p>\n<p style=\"text-align: justify;\">Although if you want to reach all types of customers then you should definitely go for Progressive Web Application.<\/p>\n<div class=\"panel panel-primary\" style=\"text-align: justify;\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Features List<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<ul>\n<li>More user-friendly than a web application.<\/li>\n<li>Works lightning fast if compared to the website.<\/li>\n<li>Supports push notifications for Android &amp; iOS(after installing the PWA) devices.<\/li>\n<li>Completely responsive on all the platforms.<\/li>\n<li>Launches without the internet or low-quality internet.<\/li>\n<li>Looks and feels like a native application.<\/li>\n<li>Users do not need to update the progressive web application.<\/li>\n<li>No app store requires managing the application.<\/li>\n<li>Increases user engagement in the store.<\/li>\n<li>Increases store revenue due to user engagement.<\/li>\n<li>The application name can be entered by the admin.<\/li>\n<li>The admin can upload and change the application icon.<\/li>\n<li>The splash background color of the Progressive Web Application can also be changed by the admin.<\/li>\n<li>The theme color of the PWA can be selected by the admin.<\/li>\n<li>Select the orientation of PWA as Any, Natural, Landscape, and Portrait.<\/li>\n<li>Select the display type for PWA Fullscreen, Standalone, Minimal UI, and Browser.<\/li>\n<li>The admin can upload the splash screen image for iOS.<\/li>\n<li>The admin can change the version number when want to refresh the service worker cache.<\/li>\n<\/ul>\n<h4><span data-preserver-spaces=\"true\">New Features<\/span><\/h4>\n<ul>\n<li>Workbox Cache Strategies integrated with this module to make quick execution for better performance.<\/li>\n<li>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.<\/li>\n<li>Workbox Run-Time Caching to collects all the assets during page load and adds to browser cache.<\/li>\n<li>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.<\/li>\n<li>A graphical representation of the total number of PWA downloads can be viewed by the admin.<\/li>\n<li>Users will be notified of every update on offers, deals, and order status.<\/li>\n<li>Hyva storefront compatible<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"panel panel-success\" style=\"text-align: justify;\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Installation &#8211; Progressive Web Application<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<h3 class=\"wp-block-heading\">#Download Module<\/h3>\n<p>Firstly, you need to log in to Webkul Store, go to<strong>\u00a0My Account&gt;My Purchased Products section<\/strong>, verify and then download and extract the contents of this zip folder on the system.<\/p>\n<\/div>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">#Upload Folder<\/h3>\n\n\n\n<p>The module zip extracts, follow path src&gt;app and then copy the app folder into the Magento 2 root directory on the server as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1200\" height=\"451\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/image-33.png\" alt=\"magento 2 root directory \" class=\"wp-image-399040\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/image-33.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/image-33-300x113.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/image-33-250x94.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/image-33-768x289.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n<p><!-- \/wp:post-content --><\/p>\n<div class=\"panel-body\">\n<h3><strong>#Run Commands<\/strong><\/h3>\n<p>You need to run the following commands:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">composer require minishlink\/web-push<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">composer require google\/auth<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">php bin\/magento setup:upgrade<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">php bin\/magento setup:di:compile<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">php bin\/magento setup:static-content:deploy<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">php bin\/magento indexer:reindex<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">php bin\/magento cache:flush<\/pre>\n<p><!-- \/wp:list --><\/p>\n<p>Thus, in this way, you can install the module.<\/p>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Language Translation<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<p>For the translation of the module language, navigate through <strong>src\/app\/code\/Webkul\/Pwa\/i18n,<\/strong> and edit the en_US.csv file.<\/p>\n<p>Now, <strong>translate <\/strong>the words on the <strong>right <\/strong>and <strong>upload <\/strong>the <strong>modified file <\/strong>to the <strong>same <\/strong>location. The filename of the translated file should be according to the <strong>language <\/strong>and <strong>region<\/strong> code like<strong> de_DE.csv<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-187365\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18111948\/translation.png\" alt=\"translation\" width=\"800\" height=\"566\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Creating Firebase Product Credentials<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<p>To use <strong>Progressive Web App for Magento 2<\/strong>, you need to have Firebase Project Credentials. Meanwhile, it is required during module configuration.<\/p>\n<p>Please click <strong><a href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a><\/strong> and <strong>create a new project<\/strong> with your <strong>Google<\/strong> account.<\/p>\n<p><strong>1.<\/strong>\u00a0 After opening the Firebase page. Please create a project by clicking <strong>Add project<\/strong> button.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-448301 size-full\" style=\"filter: invert(0);\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/create-new-plan-1.webp\" alt=\"create new project \" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/create-new-plan-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/create-new-plan-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/create-new-plan-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/create-new-plan-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p><strong>2. <\/strong>Then, create a new project, enter the name of the project, and click continue.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-448303 size-full\" style=\"filter: invert(0);\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/set-project-name-2.webp\" alt=\"give project a name \" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/set-project-name-2.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/set-project-name-2-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/set-project-name-2-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/set-project-name-2-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>The next step will ask you to set up Google Analytics for the firebase project. Let&#8217;s go ahead and set it up.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-448305 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/google-analytics-setup.webp\" alt=\"google analytics setup \" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/google-analytics-setup.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/google-analytics-setup-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/google-analytics-setup-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/google-analytics-setup-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>(Optional) Enable Google Analytics for your project, then follow the prompts to select or create a Google Analytics account.<\/p>\n<p>If you don&#8217;t want to set google analytics, disable the toggle button or you can click &#8220;Continue&#8221; and you will be taken to the project home page.<\/p>\n<p>After that, choose or create new Google Analytics, and then if you have selected already cteated Google Analytics account, click &#8220;<strong>Create Project&#8221;<\/strong><b>.<\/b><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-448310\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/select-google-analytics-account-and-continue.webp\" alt=\"elect-google-analytics-account-and-continue.\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/select-google-analytics-account-and-continue.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/select-google-analytics-account-and-continue-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/select-google-analytics-account-and-continue-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/select-google-analytics-account-and-continue-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>This will create a new project. Tap, continue to proceed further.\u00a0<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-448314\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/new-project-created.webp\" alt=\"new project created\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/new-project-created.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/new-project-created-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/new-project-created-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/new-project-created-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Tapping the Continue button brings up the below section.\u00a0<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-448317\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/project-overview-section.webp\" alt=\"project overview section\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/project-overview-section.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/project-overview-section-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/project-overview-section-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/project-overview-section-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p><strong>3.<\/strong> Now, click the <strong>Settings<\/strong> cog menu icon. After that, select the <strong>Project Settings<\/strong> option.\u00a0<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-448322\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/project-settings.webp\" alt=\"project settings\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/project-settings.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/project-settings-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/project-settings-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/project-settings-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>A new <strong>Project<\/strong> <strong>Settings<\/strong> page will open.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-448324 size-full\" style=\"filter: invert(0);\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/general-settings.webp\" alt=\"general settings\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/general-settings.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/general-settings-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/general-settings-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/general-settings-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p><strong>4.<\/strong> On the <strong>Project Settings<\/strong> page, go to the <strong>Cloud Messaging<\/strong> tab.<\/p>\n<p>Here, you have to generate the Web Push Certificate key that is to be added in the Magento 2 PWA configuration settings &#8211; <strong>Public Key<\/strong> section. <img decoding=\"async\" class=\"alignnone wp-image-448330 size-full\" style=\"filter: invert(0);\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-cloud-message-service-api-1.webp\" alt=\"firebase-cloud-message-service-api\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-cloud-message-service-api-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-cloud-message-service-api-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-cloud-message-service-api-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-cloud-message-service-api-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p><strong>5<\/strong>. Now, navigate through <strong>Project Settings &gt; General <\/strong>to generate credentials that will then be used in the admin configuration.<\/p>\n<p>To do so, tap on create web app, under Your apps section.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-448324\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/general-settings.webp\" alt=\"create web app\n\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/general-settings.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/general-settings-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/general-settings-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/general-settings-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/> This brings up the below section. Enter the new web app name and proceed further.\u00a0<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-448333\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/new-app.webp\" alt=\"new app\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/new-app.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/new-app-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/new-app-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/new-app-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>After that, add firebase SDK as required.\u00a0<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-448335\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-sdk.webp\" alt=\"add firebase sdk\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-sdk.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-sdk-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-sdk-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-sdk-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Lastly, tap continue to console and you can check the required details.<\/p>\n<\/div>\n<p>So, after following the above steps we will get these credentials &#8211;\u00a0\u00a0<\/p>\n<ul>\n<li>Web API Key<\/li>\n<li>FCM Auth Domain<\/li>\n<li>FCM Project ID<\/li>\n<li>FCM Storage Bucket<\/li>\n<li>Messaging Sender ID<\/li>\n<li>FCM App ID<\/li>\n<li>Public Key<\/li>\n<\/ul>\n<div class=\"wk-index-wrap\">\n<h3 class=\"index-title\">How to Get &#8211; Auth JSON file<\/h3>\n<\/div>\n<p>Navigate to your particular project&#8217;s settings section and go to the Service Accounts tab.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-448980\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/service-account-tab.webp\" alt=\"service account tab firebase \" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/service-account-tab.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/service-account-tab-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/service-account-tab-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/service-account-tab-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Here, tap Generate New Private Key button, that brings up a popup. Tap to continue and download the JSON file.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-448981 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/generate-key.webp\" alt=\"Firebase Auth JSON File generate\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/generate-key.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/generate-key-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/generate-key-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/generate-key-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>The file gets downloaded on your system and when opened looks like as shown below.\u00a0<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-448984\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/json-file.webp\" alt=\"JSON file content\" width=\"1366\" height=\"729\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/json-file.webp 1366w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/json-file-300x160.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/json-file-1200x640.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/json-file-250x133.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/json-file-768x410.webp 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" loading=\"lazy\" \/><\/p>\n<p>Now, upload this JSON file on the server where you have installed the Magento 2.\u00a0<\/p>\n<p><strong>Example<\/strong>:\u00a0 \u00a0home\/users\/magento\/www\/html\/m1215\/app\/etc\/example.json<\/p>\n<\/div>\n<div class=\"panel panel-primary\" style=\"text-align: justify;\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Configuration &#8211; Progressive Web Application<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<p>After the installation of the module, the admin can configure the module settings.<\/p>\n<p>For this, the admin will navigate to <strong>Stores &gt; Configuration &gt; Progressive Web Application <\/strong>as per the below image.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-452149 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/configuration-part-one.webp\" alt=\"magento2-pwa-configuration-settings\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/configuration-part-one.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/configuration-part-one-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/configuration-part-one-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/configuration-part-one-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\" style=\"text-align: justify;\">\n<div class=\"panel-body\">\n<h4><img decoding=\"async\" class=\"alignnone wp-image-448989 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-configuration-part-b.webp\" alt=\"pwa configuration for magento 2 additional settings\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-configuration-part-b.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-configuration-part-b-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-configuration-part-b-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-configuration-part-b-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/h4>\n<h4><strong>Settings<\/strong><\/h4>\n<ul>\n<li><strong>Status &#8211; <\/strong>Enable or disable the module.<\/li>\n<li><strong>Application Name &#8211; <\/strong>define the PWA application name.<\/li>\n<li><strong>Application Short Name &#8211; <\/strong>Set the PWA application short name.<\/li>\n<li><strong>Web API Key &#8211; <\/strong>The admin can get the Web API key from the Firebase in the general tab under the project settings.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-448335\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-sdk.webp\" alt=\"add firebase sdk\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-sdk.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-sdk-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-sdk-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-sdk-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<ul>\n<li><strong>FCM Auth Domain &#8211; <\/strong>firstly insert the auth domain name here from the firebase web app.<\/li>\n<li><strong>Firebase Auth JSON File Path\u00a0 &#8211; <\/strong>Enter the path of the JSON file on your server<br \/><strong>Example<\/strong>: home\/users\/magento\/www\/html\/m1215\/app\/etc\/example.json<\/li>\n<li><strong>FCM Project Id &#8211; <\/strong>after that enter the generated FCM Project ID here.<\/li>\n<li><strong>FCM Storage Bucket &#8211; <\/strong>now put the FCM storage bucket here.<\/li>\n<li><strong>Messaging Sender Id &#8211; <\/strong>so the next is place the sender ID here.<\/li>\n<li><strong>FCM App Id &#8211; <\/strong>thereafter enter the FCM App ID here.<\/li>\n<li><strong>Public Key &#8211; <\/strong>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-<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone wp-image-448330 size-full\" style=\"filter: invert(0);\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-cloud-message-service-api-1.webp\" alt=\"firebase-cloud-message-service-api\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-cloud-message-service-api-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-cloud-message-service-api-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-cloud-message-service-api-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/firebase-cloud-message-service-api-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<ul>\n<li><strong>Measurement Id &#8211;<\/strong> Now enter the measurement Id.<\/li>\n<li><strong>Application Icon &#8211; <\/strong>now upload the application icon. Allowed file types: png<\/li>\n<li><strong>Splash Background Color &#8211; <\/strong>then set the splash background color.<\/li>\n<li><strong>Theme Color &#8211; <\/strong>after that select the theme background color.<\/li>\n<li><strong>Select Orientation &#8211; <\/strong>Select orientation of PWA as Any, Natural, Landscape, and Portrait.<\/li>\n<li><b> Select Display &#8211; <\/b>Select the display type for PWA Fullscreen, Standalone, Minimal UI, and Browser.<\/li>\n<li><strong><strong>IOS Splash Screen Image &#8211; <\/strong><\/strong>Upload the Splash Screen Image for iOS. Allowed file types: png and size must be 2048&#215;2732<\/li>\n<li><strong>Service Worker Version &#8211;<\/strong> Change the version number when want to refresh the service worker cache.<\/li>\n<\/ul>\n<div class=\"alert alert-success\">\n<h4><strong>Push Notification<\/strong><\/h4>\n<\/div>\n<p>Admin can manage the Push Notifications by going to <strong>PWA &gt; Manage PWA Notifications. <\/strong>From here admin can add\/edit or delete any push notification.<\/p>\n<p>Admin can also enable or disable any push notification and can &#8216;Push&#8217; the notification message by clicking on <strong>Send<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-430952 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification-magento2-pwa.webp\" alt=\"push-notification-magento2-pwa\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification-magento2-pwa.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification-magento2-pwa-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification-magento2-pwa-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification-magento2-pwa-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>For adding or editing a Push Notification Message, the admin has to provide the Title, Message Body, Target URL, and the message icon image.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-430954 size-full\" title=\"Progressive Web Application For Magento2\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/add-magento2-pwa-push-notification.webp\" alt=\"add-magento2-pwa-push-notification\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/add-magento2-pwa-push-notification.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/add-magento2-pwa-push-notification-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/add-magento2-pwa-push-notification-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/add-magento2-pwa-push-notification-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<div class=\"wk-index-wrap\">\n<h3 class=\"index-title\">PWA Download Analytics<\/h3>\n<\/div>\n<p>Now, with this new feature, the store owner can track the downloads and rejections for the PWA for any date.<\/p>\n<p>These analytics are shown in the form of a graph to the store owner that makes it very easy to understand.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-430930 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-menu-options.webp\" alt=\"pwa-menu-options\" width=\"489\" height=\"420\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-menu-options.webp 489w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-menu-options-300x258.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-menu-options-250x215.webp 250w\" sizes=\"(max-width: 489px) 100vw, 489px\" loading=\"lazy\" \/><\/p>\n<p>By using the date filters the admin can view the download analytics for any previous date also.<\/p>\n<p>The Blue line on the graph shows the download results whereas the Red dotted line shows the rejected results for the PWA.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-431001 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-analytics.webp\" alt=\"pwa-analytics.\" width=\"1281\" height=\"524\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-analytics.webp 1281w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-analytics-300x123.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-analytics-1200x491.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-analytics-250x102.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-analytics-768x314.webp 768w\" sizes=\"(max-width: 1281px) 100vw, 1281px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\" style=\"text-align: justify;\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">How A Customer Can Use Progressive Web Application for Magento2(Adobe Commerce)<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<p>A customer can use the Progressive Web Application on both Android and iOS devices.<\/p>\n<h3><strong>If the customer is using an Android device:<\/strong><\/h3>\n<p style=\"text-align: justify;\">When a customer visits the website on a browser of a mobile device, then he will see a pop-up requesting permission to send a Push Notification to the customer.<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone wp-image-449343 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/notification-enable-home-screen.webp\" alt=\"notification enable on home screen magento 2 pwa\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/notification-enable-home-screen.webp 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/notification-enable-home-screen-169x300.webp 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/notification-enable-home-screen-576x1024.webp 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/notification-enable-home-screen-140x249.webp 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone wp-image-449345 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/notification-enabled.webp\" alt=\"enable push notifications\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/notification-enabled.webp 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/notification-enabled-169x300.webp 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/notification-enabled-576x1024.webp 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/notification-enabled-140x249.webp 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<p style=\"text-align: justify;\">When a Push Notification is sent, it can be seen as per the snapshot.<\/p>\n<div class=\"wk-image-wrapper\">\n<div class=\"wk-wrapper-left\" title=\"Add Image\">\n<p><img decoding=\"async\" class=\"alignnone wp-image-449388 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification-android.webp\" alt=\"magento2-pwa-configuration-settings\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification-android.webp 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification-android-169x300.webp 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification-android-576x1024.webp 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification-android-140x249.webp 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-wrapper-right\" title=\"Add Image\"><img decoding=\"async\" class=\"alignnone size-full wp-image-449380\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/order-notification.webp\" alt=\"push notification andriod device magento 2 pwa\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/order-notification.webp 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/order-notification-169x300.webp 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/order-notification-576x1024.webp 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/order-notification-140x249.webp 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/div>\n<\/div>\n<p style=\"text-align: justify;\">A customer can open the website in a browser on a mobile device. Here we have shown the working on Chrome.<\/p>\n<p style=\"text-align: justify;\">Users can see the<strong> Add to home screen button (Plus Sign)<\/strong> near the cart, or on the bottom of the page.<\/p>\n<p>The customer can click on the &#8220;<strong>Plus Sign<\/strong>&#8221; button near to the cart or click on the bottom of the webpage to add the app to the home screen.<\/p>\n<p>Now a pop window will appear as shown in the image below &#8211;<\/p>\n<div class=\"wk-image-wrapper\">\n<div class=\"wk-wrapper-left\" title=\"Add Image\">\n<p><img decoding=\"async\" class=\"alignnone wp-image-449307 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-home-page-1.webp\" alt=\"Progressive Web Application add to home screen\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-home-page-1.webp 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-home-page-1-169x300.webp 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-home-page-1-576x1024.webp 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-home-page-1-140x249.webp 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-wrapper-right\" title=\"Add Image\"><img decoding=\"async\" class=\"alignnone size-full wp-image-449309\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/install-pwa-app-android.webp\" alt=\"Progressive Web Application add app to the homescreen\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/install-pwa-app-android.webp 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/install-pwa-app-android-169x300.webp 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/install-pwa-app-android-576x1024.webp 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/install-pwa-app-android-140x249.webp 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/div>\n<\/div>\n<h4>Application Icon on Homescreen<\/h4>\n<p>Now the user can see the application icon on the home screen of the mobile like this.<\/p>\n<p>A user can click on the application to launch it.<\/p>\n<p>After clicking on the application, the application launches with a splash screen.<\/p>\n<p>The splash screen shows the application name and icon.<\/p>\n<p>The application launches in the same way as the native app.<\/p>\n<div class=\"wk-image-wrapper\">\n<div class=\"wk-wrapper-left\" title=\"Add Image\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-449313\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/app-icon-home-screen.webp\" alt=\"app-icon-home-screen\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/app-icon-home-screen.webp 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/app-icon-home-screen-169x300.webp 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/app-icon-home-screen-576x1024.webp 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/app-icon-home-screen-140x249.webp 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-wrapper-right\" title=\"Add Image\"><img decoding=\"async\" class=\"alignnone size-full wp-image-449314\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/splash-screen.webp\" alt=\"Progressive Web Application splash screen\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/splash-screen.webp 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/splash-screen-169x300.webp 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/splash-screen-576x1024.webp 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/splash-screen-140x249.webp 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/div>\n<\/div>\n<p>After the splash screen, a user can see the home screen of the application.<\/p>\n<p>The customer can also see all the available products using the PWA app.<\/p>\n<p>The customers can click on the product and add the product to the cart same as in the native app.<\/p>\n<\/div>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-449315\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/view-product-add-to-cart.webp\" alt=\"Progressive Web Application view products\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/view-product-add-to-cart.webp 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/view-product-add-to-cart-169x300.webp 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/view-product-add-to-cart-576x1024.webp 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/view-product-add-to-cart-140x249.webp 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-449316\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/product-added-to-cart-magento2-pwa.webp\" alt=\"Progressive Web Application add to cartProgressive Web Application add to cart\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/product-added-to-cart-magento2-pwa.webp 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/product-added-to-cart-magento2-pwa-169x300.webp 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/product-added-to-cart-magento2-pwa-576x1024.webp 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/product-added-to-cart-magento2-pwa-140x249.webp 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<div>\n<p>After adding the product to the cart, the customer can process it further to checkout and then complete the order.<\/p>\n<\/div>\n<div>\n<h3><strong>Progressive Web Application: If the customer is using an iOS device:<\/strong><\/h3>\n<p style=\"text-align: justify;\">A customer can open the website in a browser on a mobile device. Here we have shown the working on Safari.<\/p>\n<p style=\"text-align: justify;\">From here customers can click on the menu icon of Safari to add the application on the home screen.<\/p>\n<p>From the Safari menu, a user can select the \u2018Add to home screen\u2019 option to add the progressive web application to the home screen.<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone wp-image-449286 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-ios-device-installation.webp\" alt=\"magento 2 pwa ios device installation.\" width=\"1242\" height=\"2208\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-ios-device-installation.webp 1242w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-ios-device-installation-169x300.webp 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-ios-device-installation-576x1024.webp 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-ios-device-installation-140x249.webp 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-ios-device-installation-768x1365.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-ios-device-installation-864x1536.webp 864w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-ios-device-installation-1152x2048.webp 1152w\" sizes=\"(max-width: 1242px) 100vw, 1242px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone wp-image-449287 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-add-to-home-screen-1.webp\" alt=\"magento 2 pwa add to home screen\" width=\"1242\" height=\"2208\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-add-to-home-screen-1.webp 1242w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-add-to-home-screen-1-169x300.webp 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-add-to-home-screen-1-576x1024.webp 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-add-to-home-screen-1-140x249.webp 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-add-to-home-screen-1-768x1365.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-add-to-home-screen-1-864x1536.webp 864w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/magento2-pwa-add-to-home-screen-1-1152x2048.webp 1152w\" sizes=\"(max-width: 1242px) 100vw, 1242px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div>\n<p>Now a pop window will appear to add the name of the progressive web application like this.<\/p>\n<p>Now the user can see the application icon on the home screen of the mobile like this. A user can click on the application to launch it.<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone wp-image-449288 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/press-add-button-to-add-pwa-ios.webp\" alt=\"press add button to add pwa ios\" width=\"1242\" height=\"2208\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/press-add-button-to-add-pwa-ios.webp 1242w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/press-add-button-to-add-pwa-ios-169x300.webp 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/press-add-button-to-add-pwa-ios-576x1024.webp 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/press-add-button-to-add-pwa-ios-140x249.webp 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/press-add-button-to-add-pwa-ios-768x1365.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/press-add-button-to-add-pwa-ios-864x1536.webp 864w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/press-add-button-to-add-pwa-ios-1152x2048.webp 1152w\" sizes=\"(max-width: 1242px) 100vw, 1242px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone wp-image-449289 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-app-short-cut-launcher-ios-home-screen.webp\" alt=\"pwa app shortcut launcher ios home screen\" width=\"1242\" height=\"2208\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-app-short-cut-launcher-ios-home-screen.webp 1242w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-app-short-cut-launcher-ios-home-screen-169x300.webp 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-app-short-cut-launcher-ios-home-screen-576x1024.webp 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-app-short-cut-launcher-ios-home-screen-140x249.webp 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-app-short-cut-launcher-ios-home-screen-768x1365.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-app-short-cut-launcher-ios-home-screen-864x1536.webp 864w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/pwa-app-short-cut-launcher-ios-home-screen-1152x2048.webp 1152w\" sizes=\"(max-width: 1242px) 100vw, 1242px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wk-index-wrap\">\n<p>To enable notifications for the app, the user will need to choose <strong>allow<\/strong> option as shown in the below image. Users can configure the notifications setting for alerts, sounds, and icon badges.\u00a0<\/p>\n<p>If the user does not want any kind of notification, then the user chooses the <strong>Don&#8217;t Allow<\/strong> option.\u00a0\u00a0<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone wp-image-449367 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/allow-notifications.webp\" alt=\"allow notification\" width=\"1125\" height=\"2436\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/allow-notifications.webp 1125w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/allow-notifications-139x300.webp 139w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/allow-notifications-473x1024.webp 473w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/allow-notifications-115x249.webp 115w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/allow-notifications-768x1663.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/allow-notifications-709x1536.webp 709w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/allow-notifications-946x2048.webp 946w\" sizes=\"(max-width: 1125px) 100vw, 1125px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone wp-image-449368 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/approve-notifications.webp\" alt=\"approve notification\" width=\"1125\" height=\"2436\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/approve-notifications.webp 1125w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/approve-notifications-139x300.webp 139w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/approve-notifications-473x1024.webp 473w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/approve-notifications-115x249.webp 115w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/approve-notifications-768x1663.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/approve-notifications-709x1536.webp 709w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/approve-notifications-946x2048.webp 946w\" sizes=\"(max-width: 1125px) 100vw, 1125px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<p>Now, the users can easily use the PWA for the Magento 2 store add products to cart and make a checkout.\u00a0<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-449290\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/add-product-to-cart-magento2-pwa-ios.webp\" alt=\"add product to cart magento 2 pwa ios\" width=\"1242\" height=\"2208\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/add-product-to-cart-magento2-pwa-ios.webp 1242w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/add-product-to-cart-magento2-pwa-ios-169x300.webp 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/add-product-to-cart-magento2-pwa-ios-576x1024.webp 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/add-product-to-cart-magento2-pwa-ios-140x249.webp 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/add-product-to-cart-magento2-pwa-ios-768x1365.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/add-product-to-cart-magento2-pwa-ios-864x1536.webp 864w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/add-product-to-cart-magento2-pwa-ios-1152x2048.webp 1152w\" sizes=\"(max-width: 1242px) 100vw, 1242px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-449292\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/product-added-to-cart-magento2-pwa-ios.webp\" alt=\"product added to cart magento2 pwa ios\" width=\"1242\" height=\"2208\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/product-added-to-cart-magento2-pwa-ios.webp 1242w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/product-added-to-cart-magento2-pwa-ios-169x300.webp 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/product-added-to-cart-magento2-pwa-ios-576x1024.webp 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/product-added-to-cart-magento2-pwa-ios-140x249.webp 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/product-added-to-cart-magento2-pwa-ios-768x1365.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/product-added-to-cart-magento2-pwa-ios-864x1536.webp 864w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/product-added-to-cart-magento2-pwa-ios-1152x2048.webp 1152w\" sizes=\"(max-width: 1242px) 100vw, 1242px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<p>After, allowing the notifications user will be notified of every update on offer, deal, and order status notification.\u00a0<\/p>\n<div class=\"wk-two-columns\">\n<div class=\"wk-columns --left\">\n<p><img decoding=\"async\" class=\"alignnone wp-image-449372 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification.webp\" alt=\"Magento 2 PWA Push Notification\" width=\"1125\" height=\"2436\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification.webp 1125w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification-139x300.webp 139w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification-473x1024.webp 473w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification-115x249.webp 115w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification-768x1663.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification-709x1536.webp 709w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/push-notification-946x2048.webp 946w\" sizes=\"(max-width: 1125px) 100vw, 1125px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<div class=\"wk-columns --right\">\n<p><img decoding=\"async\" class=\"alignnone wp-image-449373 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/order-status-changed.webp\" alt=\"Magento 2 PWA Push Notification Order notifications\" width=\"1125\" height=\"2436\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/order-status-changed.webp 1125w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/order-status-changed-139x300.webp 139w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/order-status-changed-473x1024.webp 473w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/order-status-changed-115x249.webp 115w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/order-status-changed-768x1663.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/order-status-changed-709x1536.webp 709w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/order-status-changed-946x2048.webp 946w\" sizes=\"(max-width: 1125px) 100vw, 1125px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<h3 class=\"index-title\">Support<\/h3>\n<\/div>\n<p style=\"text-align: justify;\">That\u2019s all for the <strong>Progressive Web Application for <a href=\"https:\/\/store.webkul.com\/Magento-2.html\" target=\"_blank\" rel=\"noopener\">Magento 2<\/a><\/strong><a href=\"_wp_link_placeholder\"> extension<\/a>.\u00a0<\/p>\n<p><!-- wp:code --><\/p>\n<p><!-- \/wp:code --><\/p>","protected":false},"excerpt":{"rendered":"<p>Magento 2 PWA extension (Progressive Web Application) uses web compatibilities and provides an application experience to the users. It develops from a browser tab and makes pages more immersive with a low friction user experience. The Progressive Web Application is lightning fast compared to the website moreover supports push notification. According to the Google developers <a href=\"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":112,"featured_media":65349,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302],"tags":[4051,4371],"class_list":["post-65301","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento2","tag-progressive-web-application-for-magento2","tag-pwa"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Guide of Progressive Web Application For Magento 2 Plugin<\/title>\n<meta name=\"description\" content=\"Progressive Web Applications provides an application experience to the users and is lighter in weight than the mobile app.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guide of Progressive Web Application For Magento 2 Plugin\" \/>\n<meta property=\"og:description\" content=\"Progressive Web Applications provides an application experience to the users and is lighter in weight than the mobile app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-22T14:47:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-19T04:46:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/download-11.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Preeti Sagar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preeti Sagar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/\"},\"author\":{\"name\":\"Preeti Sagar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/2adf14aa22a7f6b7d97f0e46cf43a77e\"},\"headline\":\"Guide of Progressive Web Application For Magento 2\",\"datePublished\":\"2016-11-22T14:47:17+00:00\",\"dateModified\":\"2025-12-19T04:46:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/\"},\"wordCount\":2384,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/download-11.png\",\"keywords\":[\"Progressive Web Application for Magento2\",\"PWA\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/\",\"url\":\"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/\",\"name\":\"Guide of Progressive Web Application For Magento 2 Plugin\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/download-11.png\",\"datePublished\":\"2016-11-22T14:47:17+00:00\",\"dateModified\":\"2025-12-19T04:46:18+00:00\",\"description\":\"Progressive Web Applications provides an application experience to the users and is lighter in weight than the mobile app.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/download-11.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/download-11.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Guide of Progressive Web Application For Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/2adf14aa22a7f6b7d97f0e46cf43a77e\",\"name\":\"Preeti Sagar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6adfe341e84fe93411a7bb9b3857c64d8709455ce6c93811805bd5ed5cc18abe?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6adfe341e84fe93411a7bb9b3857c64d8709455ce6c93811805bd5ed5cc18abe?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Preeti Sagar\"},\"sameAs\":[\"http:\/\/webkul.com\/blog\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/preeti-sagar613\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Guide of Progressive Web Application For Magento 2 Plugin","description":"Progressive Web Applications provides an application experience to the users and is lighter in weight than the mobile app.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/","og_locale":"en_US","og_type":"article","og_title":"Guide of Progressive Web Application For Magento 2 Plugin","og_description":"Progressive Web Applications provides an application experience to the users and is lighter in weight than the mobile app.","og_url":"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2016-11-22T14:47:17+00:00","article_modified_time":"2025-12-19T04:46:18+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/download-11.png","type":"image\/png"}],"author":"Preeti Sagar","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Preeti Sagar","Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/"},"author":{"name":"Preeti Sagar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/2adf14aa22a7f6b7d97f0e46cf43a77e"},"headline":"Guide of Progressive Web Application For Magento 2","datePublished":"2016-11-22T14:47:17+00:00","dateModified":"2025-12-19T04:46:18+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/"},"wordCount":2384,"commentCount":1,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/download-11.png","keywords":["Progressive Web Application for Magento2","PWA"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/","url":"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/","name":"Guide of Progressive Web Application For Magento 2 Plugin","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/download-11.png","datePublished":"2016-11-22T14:47:17+00:00","dateModified":"2025-12-19T04:46:18+00:00","description":"Progressive Web Applications provides an application experience to the users and is lighter in weight than the mobile app.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/download-11.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/download-11.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/progressive-web-application-magento2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Guide of Progressive Web Application For Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/2adf14aa22a7f6b7d97f0e46cf43a77e","name":"Preeti Sagar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6adfe341e84fe93411a7bb9b3857c64d8709455ce6c93811805bd5ed5cc18abe?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6adfe341e84fe93411a7bb9b3857c64d8709455ce6c93811805bd5ed5cc18abe?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Preeti Sagar"},"sameAs":["http:\/\/webkul.com\/blog"],"url":"https:\/\/webkul.com\/blog\/author\/preeti-sagar613\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/65301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/112"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=65301"}],"version-history":[{"count":174,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/65301\/revisions"}],"predecessor-version":[{"id":518093,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/65301\/revisions\/518093"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/65349"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=65301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=65301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=65301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}