{"id":175530,"date":"2019-05-24T09:27:42","date_gmt":"2019-05-24T09:27:42","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=175530"},"modified":"2023-03-09T09:56:09","modified_gmt":"2023-03-09T09:56:09","slug":"laravel-ecommerce-pwa","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/","title":{"rendered":"Laravel eCommerce Progressive Web Application"},"content":{"rendered":"<p><strong>Laravel eCommerce PWA:-<\/strong>Laravel eCommerce Progressive Web Application uses web compatibilities and provides an application experience to the user.\u00a0 By using this extension you can do the thing like work in <strong>low internet connection<\/strong>, <strong>load on the home screen<\/strong>, <strong>Social Sharing of <a href=\"https:\/\/bagisto.com\/en\/how-to-create-simple-product-in-bagisto\/\" target=\"_blank\" rel=\"noopener noreferrer\">Product<\/a>, <\/strong>etc.<\/p>\n<p>The Progressive Web Application is <strong>lightning fast compared to the website<\/strong>. Due to the faster performance as a result user <strong>engagement increases<\/strong> on the website.<\/p>\n<p><span style=\"color: red;\"><strong>**Note:<\/strong><\/span><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Laravel eCommerce Progressive Web Application module is supported by Bagisto version v1.2.0<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">What Is Need for Progressive Web Application<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<p>Nowadays, most people use mobile apps to visit the website. By using PWA, you can generate more traffic on the website.<\/p>\n<p>With the help of an amazing user experience, you will improve your website conversion rate likewise AliExpress, Flipkart, Amazon, etc.<\/p>\n<p><strong>Let\u2019s have a look, how Flipkart is using PWA to improve their conversion rate.<\/strong><\/p>\n<p><b>Flipkart Lite:- <\/b>As we know that Flipkart is the largest eCommerce platform. Firstly they used the only app after that they came up with PWA as Flipkart Lite. With the help of PWA, <a href=\"https:\/\/widely.io\/know-about-flipkart-pwa?utm_source=medium&amp;utm_medium=medium_blog&amp;utm_campaign=organictraffic\" target=\"_blank\" rel=\"noopener noreferrer\">it converts 70% user to customer<\/a>.<\/p>\n<div id=\"attachment_176352\" style=\"width: 1250px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-176352\" class=\"size-full wp-image-176352\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/1_pYAyIn8vuo-aJ9zHcWPWww.png\" alt=\"FlipKart lite PWA\" width=\"1240\" height=\"700\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/1_pYAyIn8vuo-aJ9zHcWPWww.png 1240w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/1_pYAyIn8vuo-aJ9zHcWPWww-250x141.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/1_pYAyIn8vuo-aJ9zHcWPWww-300x169.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/1_pYAyIn8vuo-aJ9zHcWPWww-768x434.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/1_pYAyIn8vuo-aJ9zHcWPWww-1200x677.png 1200w\" sizes=\"(max-width: 1240px) 100vw, 1240px\" loading=\"lazy\" \/><p id=\"caption-attachment-176352\" class=\"wp-caption-text\">widely.io<\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div><\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Feature of Laravel eCommerce Progressive Web Application<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<ul>\n<li>More user-friendly than a web application.<\/li>\n<li>Dynamic SEO.<\/li>\n<li>Push Notification functionality.<\/li>\n<li>Admin can add PWA home page layout.<\/li>\n<li>Also, work with low-quality internet<\/li>\n<li>Do not need to update Progressive web Application.<\/li>\n<li>Admin can set the splash background color of the Progressive Web Application.<\/li>\n<li>Admin can enter the application name.<\/li>\n<li>Looks and feels like a native application.<\/li>\n<li>Increases user engagement in the store.<\/li>\n<li>Admin can upload and change the application icon.<\/li>\n<li>Admin can set the theme color of the Progressive Web Application.<\/li>\n<li>Support multiple currencies.<\/li>\n<li>Support social sharing feature of the product.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3 class=\"panel-title\">Installation of Laravel eCommerce Progressive Web Application<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<p>You have to run the below commands from the Bagisto root directory to install the PWA module.<\/p>\n<pre class=\"brush:php\">composer require bagisto\/pwa:dev-master<\/pre>\n<pre class=\"brush:php\">php artisan migrate<\/pre>\n<p>Run these commands below to complete the setup in the bagisto root directory.<\/p>\n<pre class=\"brush:php\">php artisan route:cache\nphp artisan vendor:publish\n-&gt; Press 0 and then press enter to publish all assets and configurations.\nThat's it, now go to https:\/\/yourdomain\/mobile\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<div>\n<h3>Creating Firebase Credentials for Push Notification<\/h3>\n<p>In order to use Push Notification feature, you need to have <strong>Firebase Project Credentials.<\/strong><\/p>\n<p><strong>Step 1: Create your account on Firebase<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">Go to <a href=\"https:\/\/accounts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/accounts.google.com\/<\/a> and Sign In with your Google Account.<\/span><\/p>\n<p><b>Step 2: Add\/Create a Project on Firebase<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Go to <a href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/console.firebase.google.com\/<\/a> and click on Create a Project.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-275887\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/firebase-create-project-1200x574-1.png\" alt=\"firebase-create-project-1200x574-1\" width=\"1200\" height=\"574\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/firebase-create-project-1200x574-1.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/firebase-create-project-1200x574-1-300x144.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/firebase-create-project-1200x574-1-250x120.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/firebase-create-project-1200x574-1-768x367.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/p>\n<p><b>Step 3: Get Credentials<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">At the right side of Project Overview, you will see a settings icon.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Click on the Settings icon and go to Project settings.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Under the general tab, scroll down and get these credentials: ( apiKey, authDomain, databaseURL, projectId, storage bucket, messagingSenderId, appId )<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-275888\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/firebase-credentials-2.png\" alt=\"firebase-credentials-2\" width=\"589\" height=\"207\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/firebase-credentials-2.png 589w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/firebase-credentials-2-300x105.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/firebase-credentials-2-250x88.png 250w\" sizes=\"(max-width: 589px) 100vw, 589px\" loading=\"lazy\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Now go to the Cloud Messaging tab, under Project credentials \u2013 get these credentials: (Server key and Legacy server Key ).<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-275890\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/credentials2-1-1.png\" alt=\"credentials2-1-1\" width=\"944\" height=\"313\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/credentials2-1-1.png 944w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/credentials2-1-1-300x99.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/credentials2-1-1-250x83.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/credentials2-1-1-768x255.png 768w\" sizes=\"(max-width: 944px) 100vw, 944px\" loading=\"lazy\" \/><\/p>\n<p><span style=\"font-weight: 400;\">In the Cloud Messaging tab, under web Configuration \u2013 get key pair (also called vapid key ).<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-275891\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/credentials-3-1.png\" alt=\"credentials-3-1\" width=\"938\" height=\"291\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/credentials-3-1.png 938w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/credentials-3-1-300x93.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/credentials-3-1-250x78.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/credentials-3-1-768x238.png 768w\" sizes=\"(max-width: 938px) 100vw, 938px\" loading=\"lazy\" \/><\/p>\n<h3 class=\"panel-title\">Laravel eCommerce PWA Configuration<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<p>Once you successfully execute the command, after that you will see the PWA in the <b>Configure&gt;PWA<\/b><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-275881\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-configuration-1.png\" alt=\"Laravel-PWA-configuration\" width=\"1287\" height=\"662\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-configuration-1.png 1287w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-configuration-1-300x154.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-configuration-1-1200x617.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-configuration-1-250x129.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-configuration-1-768x395.png 768w\" sizes=\"(max-width: 1287px) 100vw, 1287px\" loading=\"lazy\" \/><\/p>\n<p><strong>Name:-\u00a0<\/strong>Admin has to enter the name of the Application, so It will be <strong>displayed on the home screen<\/strong>.<\/p>\n<p><strong>Short Name:-\u00a0<\/strong>Admin has to enter the short name of the application, so It will be displayed on the<strong> splash screen<\/strong>.<\/p>\n<p><strong>Theme Color:-\u00a0<\/strong>Set the theme color.<\/p>\n<p><strong>Background Color:-\u00a0<\/strong>Set the background color.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-275883\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Configuration1-1.png\" alt=\"Laravel-PWA-Configuration\" width=\"1260\" height=\"608\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Configuration1-1.png 1260w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Configuration1-1-300x145.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Configuration1-1-1200x579.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Configuration1-1-250x121.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Configuration1-1-768x371.png 768w\" sizes=\"(max-width: 1260px) 100vw, 1260px\" loading=\"lazy\" \/><\/p>\n<p><b>Enable New Products:- <\/b><span style=\"font-weight: 400;\">\u00a0Enable toggle button for new products, so the new products section will be visible on PWA front end.<\/span><\/p>\n<p><b>Featured Products Enable:-<\/b><span style=\"font-weight: 400;\"> Enable toggle button for featured products, so the featured products section will be visible on PWA front end.<\/span><\/p>\n<p><b>Enable Slider:- <\/b><span style=\"font-weight: 400;\">Enable slider so it will be visible on PWA front end.<\/span><\/p>\n<p><b>Categories Home Page Listing :- <\/b><span style=\"font-weight: 400;\">Enable toggle button for categories home page listing.<\/span><\/p>\n<p><b>Redirect user PWA If using mobile device:- <\/b><span style=\"font-weight: 400;\">Enable toggle button so it will automatically redirect PWA when customers are using website from mobile device.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-275884\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/seo-setting.png\" alt=\"Laravel-PWA-SEO-setting\" width=\"1253\" height=\"655\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/seo-setting.png 1253w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/seo-setting-300x157.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/seo-setting-1200x627.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/seo-setting-250x131.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/seo-setting-768x401.png 768w\" sizes=\"(max-width: 1253px) 100vw, 1253px\" loading=\"lazy\" \/><\/p>\n<p><b>Author:- <\/b><span style=\"font-weight: 400;\">You can mention your company name<\/span><b>.<\/b><\/p>\n<p><b>Meta Title:- <\/b><span style=\"font-weight: 400;\">Enter the meta title which will appear in the title bar of your browser and search result listing.<\/span><\/p>\n<p><b>Add Meta Description:- <\/b><span style=\"font-weight: 400;\">You can enter a brief overview of your store.<\/span><\/p>\n<p><b>Meta Keywords:- <\/b><span style=\"font-weight: 400;\">Enter the meta keywords to improve the searchability of your sites.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-275885\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/pwa-config.png\" alt=\"PWA-App Icon Config\" width=\"1259\" height=\"627\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/pwa-config.png 1259w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/pwa-config-300x149.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/pwa-config-1200x598.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/pwa-config-250x125.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/pwa-config-768x382.png 768w\" sizes=\"(max-width: 1259px) 100vw, 1259px\" loading=\"lazy\" \/><\/p>\n<h6><strong>App Icon:- <\/strong><\/h6>\n<p>Upload icon of the application so It will be displayed on the homepage. you can upload in various sizes.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-275886\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Server-key.png\" alt=\"PWA-Server-key\" width=\"1268\" height=\"355\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Server-key.png 1268w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Server-key-300x84.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Server-key-1200x336.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Server-key-250x70.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Server-key-768x215.png 768w\" sizes=\"(max-width: 1268px) 100vw, 1268px\" loading=\"lazy\" \/><\/p>\n<p><b>Push Notification:- <\/b><span style=\"font-weight: 400;\">\u00a0A notification is a message that pops up on the user\u2019s device. For using push notification features, you have to enter the below details.<\/span><\/p>\n<ul>\n<li><b>Server API key:- This<\/b><span style=\"font-weight: 400;\">\u00a0is generated using the firebase web app and it can be found in cloud messaging under the project setting.<\/span><\/li>\n<li><b>Topic:- <\/b><span style=\"font-weight: 400;\">With help of Topic<\/span><b>, <\/b><span style=\"font-weight: 400;\">you can send one content(push notification) to multiple users.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">After setting all configuration, click on <\/span><b>Save<\/b><\/p>\n<h3>Push Notification<\/h3>\n<p><span style=\"font-weight: 400;\">Admin can manage push notifications by navigating Progressive Web App&gt;&gt;Push Notification. From here admin can add\/remove push notifications. Click on <\/span><b>Create Push Notification.<\/b><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-275892\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Create-Push-Notification.png\" alt=\"Create-Push-Notification\" width=\"1249\" height=\"647\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Create-Push-Notification.png 1249w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Create-Push-Notification-300x155.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Create-Push-Notification-1200x622.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Create-Push-Notification-250x130.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Create-Push-Notification-768x398.png 768w\" sizes=\"(max-width: 1249px) 100vw, 1249px\" loading=\"lazy\" \/><\/p>\n<p><b>Title:-<\/b><span style=\"font-weight: 400;\"> Enter title for notification<\/span><b>.<\/b><\/p>\n<p><b>Description:- <\/b><span style=\"font-weight: 400;\">Enter description for notification.<\/span><\/p>\n<p><b>Target URL:- <\/b><span style=\"font-weight: 400;\">Enter the URL on which user will be redirected when they click on the notification.<\/span><\/p>\n<p><b>Icon:-<\/b><span style=\"font-weight: 400;\"> Upload the push notification message icon.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Click on <\/span><b>Save<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-275893\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Push-Notification.png\" alt=\"Push-Notification\" width=\"1287\" height=\"617\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Push-Notification.png 1287w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Push-Notification-300x144.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Push-Notification-1200x575.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Push-Notification-250x120.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Push-Notification-768x368.png 768w\" sizes=\"(max-width: 1287px) 100vw, 1287px\" loading=\"lazy\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Click on the bell icon to send the push notification as given above screenshots.<\/span><\/p>\n<p><b>PWA Layout:-<\/b><\/p>\n<p><span style=\"font-weight: 400;\">You can add home page content for PWA by navigating<\/span><b> Progressive Web APP&gt;PWA Layout.\u00a0<\/b><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-275895\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Layout-1.png\" alt=\"PWA-Layout-1\" width=\"1269\" height=\"617\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Layout-1.png 1269w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Layout-1-300x146.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Layout-1-1200x583.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Layout-1-250x122.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Layout-1-768x373.png 768w\" sizes=\"(max-width: 1269px) 100vw, 1269px\" loading=\"lazy\" \/><\/p>\n<p><b>Enable Categories for PWA:-<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Go to Catalog&gt;&gt;Category to enable categories for PWA.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-275896\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Categroy.png\" alt=\"PWA-Categroy\" width=\"1278\" height=\"625\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Categroy.png 1278w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Categroy-300x147.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Categroy-1200x587.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Categroy-250x122.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/PWA-Categroy-768x376.png 768w\" sizes=\"(max-width: 1278px) 100vw, 1278px\" 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\">How A Customer Can Install Progressive Web App on Desktop<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<div>\n<p>Now you can also Install PWA on your desktop like the below screenshot.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-280957\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot64.png\" alt=\"Install PWA in desktop\" width=\"1105\" height=\"611\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot64.png 1105w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot64-300x166.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot64-250x138.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot64-768x425.png 768w\" sizes=\"(max-width: 1105px) 100vw, 1105px\" loading=\"lazy\" \/><\/p>\n<p>Once you click on Install, PWA will be installed on your desktop.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-280966\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot65.png\" alt=\"PWA Install\" width=\"1039\" height=\"573\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot65.png 1039w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot65-300x165.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot65-250x138.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot65-768x424.png 768w\" sizes=\"(max-width: 1039px) 100vw, 1039px\" loading=\"lazy\" \/><\/p>\n<p>When a Push Notification is sent, it can be seen as the screenshot shown below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-280969\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot66.png\" alt=\"push notification\" width=\"1085\" height=\"578\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot66.png 1085w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot66-300x160.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot66-250x133.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot66-768x409.png 768w\" sizes=\"(max-width: 1085px) 100vw, 1085px\" loading=\"lazy\" \/><\/p>\n<h3 class=\"panel-title\">How A Customer Can Install Progressive Web App on Mobile<\/h3>\n<p>A customer can open a website in the <strong>browser<\/strong> of the mobile device, then click on the<strong> menu icon<\/strong> of the browser to add the application on the home screen as shown below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-176306\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/mockup.png\" alt=\"PWA Add to homescreen\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/mockup.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/mockup-140x249.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/mockup-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/mockup-576x1024.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<p>Or<\/p>\n<p>You can click on &#8220;Add to Home screen&#8221; from the bottom popup.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-280955\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/mockup__24_.png\" alt=\"add to home screen\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/mockup__24_.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/mockup__24_-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/mockup__24_-576x1024.png 576w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/mockup__24_-140x249.png 140w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<p>Now a <strong>pop window<\/strong> will appear to add the progressive web application like this.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full-size wp-image-176313\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot55.png\" alt=\"Screenshot(55)\" width=\"317\" height=\"560\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot55.png 317w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot55-141x249.png 141w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot55-170x300.png 170w\" sizes=\"(max-width: 317px) 100vw, 317px\" loading=\"lazy\" \/><\/p>\n<p>Now the user can view the app icon on the home screen of the mobile like this. A user can click on the application<strong> to launch it<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-176339\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot56.png\" alt=\"click to launch on home\" width=\"329\" height=\"565\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot56.png 329w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot56-145x249.png 145w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot56-175x300.png 175w\" sizes=\"(max-width: 329px) 100vw, 329px\" loading=\"lazy\" \/><\/p>\n<p>After clicking on the application, the application will <strong>launch with the splash screen<\/strong>. PWA will launch as like <a href=\"https:\/\/store.webkul.com\/bagisto-laravel-mobile-app.html\">Laravel native mobile app<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-176347\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/launch-app12.png\" alt=\"launch laravel PWA\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/launch-app12.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/launch-app12-140x249.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/launch-app12-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/launch-app12-576x1024.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<p>After the splash screen, the user can search products or browse <a href=\"https:\/\/bagisto.com\/en\/create-new-category-and-root-category-in-bagisto\/\" target=\"_blank\" rel=\"noopener noreferrer\">categories<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-176349\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/mockup-pwa.png\" alt=\"PWA categories\" width=\"720\" height=\"1280\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/mockup-pwa.png 720w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/mockup-pwa-140x249.png 140w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/mockup-pwa-169x300.png 169w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/mockup-pwa-576x1024.png 576w\" sizes=\"(max-width: 720px) 100vw, 720px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>That\u2019s all for the Laravel eCommerce Progressive Web Application module, still, have any issue feel free to add a ticket and let us know your views to make the module better <a href=\"http:\/\/bagisto.uvdesk.com\" target=\"_blank\" rel=\"noopener noreferrer\">bagisto.uvdesk.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Laravel eCommerce PWA:-Laravel eCommerce Progressive Web Application uses web compatibilities and provides an application experience to the user.\u00a0 By using this extension you can do the thing like work in low internet connection, load on the home screen, Social Sharing of Product, etc. The Progressive Web Application is lightning fast compared to the website. Due <a href=\"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":243,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8396,8929,8931],"tags":[8055,74,8678,2843,8071,4371],"class_list":["post-175530","post","type-post","status-publish","format-standard","hentry","category-bagisto","category-e-commerce-bagisto","category-pwa","tag-bagisto","tag-ecommerce","tag-laravel","tag-mobile-application","tag-opensource","tag-pwa"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Laravel eCommerce PWA | Progressive Web Application - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Laravel eCommerce PWA - Laravel eCommerce PWA uses web compatibilities and provides an native application experience to the user.\" \/>\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\/laravel-ecommerce-pwa\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Laravel eCommerce PWA | Progressive Web Application - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Laravel eCommerce PWA - Laravel eCommerce PWA uses web compatibilities and provides an native application experience to the user.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/\" \/>\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=\"2019-05-24T09:27:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-09T09:56:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/05\/1_pYAyIn8vuo-aJ9zHcWPWww.png\" \/>\n<meta name=\"author\" content=\"Sanjana Singh\" \/>\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=\"Sanjana Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/\"},\"author\":{\"name\":\"Sanjana Singh\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/423f8850bc70196595e9e678c039f455\"},\"headline\":\"Laravel eCommerce Progressive Web Application\",\"datePublished\":\"2019-05-24T09:27:42+00:00\",\"dateModified\":\"2023-03-09T09:56:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/\"},\"wordCount\":1132,\"commentCount\":15,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/05\/1_pYAyIn8vuo-aJ9zHcWPWww.png\",\"keywords\":[\"Bagisto\",\"ecommerce\",\"laravel\",\"Mobile Application\",\"Opensource\",\"PWA\"],\"articleSection\":[\"Bagisto\",\"E commerce\",\"PWA\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/\",\"url\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/\",\"name\":\"Laravel eCommerce PWA | Progressive Web Application - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/05\/1_pYAyIn8vuo-aJ9zHcWPWww.png\",\"datePublished\":\"2019-05-24T09:27:42+00:00\",\"dateModified\":\"2023-03-09T09:56:09+00:00\",\"description\":\"Laravel eCommerce PWA - Laravel eCommerce PWA uses web compatibilities and provides an native application experience to the user.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/1_pYAyIn8vuo-aJ9zHcWPWww.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/1_pYAyIn8vuo-aJ9zHcWPWww.png\",\"width\":1240,\"height\":700,\"caption\":\"widely.io\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laravel eCommerce Progressive Web Application\"}]},{\"@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\/423f8850bc70196595e9e678c039f455\",\"name\":\"Sanjana Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3b1649473554d683f4cf4a8b85d233cf43338684aaedc9004cee2e3668990526?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\/3b1649473554d683f4cf4a8b85d233cf43338684aaedc9004cee2e3668990526?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Sanjana Singh\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/sanjana-singh202\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Laravel eCommerce PWA | Progressive Web Application - Webkul Blog","description":"Laravel eCommerce PWA - Laravel eCommerce PWA uses web compatibilities and provides an native application experience to the user.","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\/laravel-ecommerce-pwa\/","og_locale":"en_US","og_type":"article","og_title":"Laravel eCommerce PWA | Progressive Web Application - Webkul Blog","og_description":"Laravel eCommerce PWA - Laravel eCommerce PWA uses web compatibilities and provides an native application experience to the user.","og_url":"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2019-05-24T09:27:42+00:00","article_modified_time":"2023-03-09T09:56:09+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/05\/1_pYAyIn8vuo-aJ9zHcWPWww.png","type":"","width":"","height":""}],"author":"Sanjana Singh","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Sanjana Singh","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/"},"author":{"name":"Sanjana Singh","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/423f8850bc70196595e9e678c039f455"},"headline":"Laravel eCommerce Progressive Web Application","datePublished":"2019-05-24T09:27:42+00:00","dateModified":"2023-03-09T09:56:09+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/"},"wordCount":1132,"commentCount":15,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/05\/1_pYAyIn8vuo-aJ9zHcWPWww.png","keywords":["Bagisto","ecommerce","laravel","Mobile Application","Opensource","PWA"],"articleSection":["Bagisto","E commerce","PWA"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/","url":"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/","name":"Laravel eCommerce PWA | Progressive Web Application - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/05\/1_pYAyIn8vuo-aJ9zHcWPWww.png","datePublished":"2019-05-24T09:27:42+00:00","dateModified":"2023-03-09T09:56:09+00:00","description":"Laravel eCommerce PWA - Laravel eCommerce PWA uses web compatibilities and provides an native application experience to the user.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/1_pYAyIn8vuo-aJ9zHcWPWww.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/05\/1_pYAyIn8vuo-aJ9zHcWPWww.png","width":1240,"height":700,"caption":"widely.io"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-pwa\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Laravel eCommerce Progressive Web Application"}]},{"@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\/423f8850bc70196595e9e678c039f455","name":"Sanjana Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3b1649473554d683f4cf4a8b85d233cf43338684aaedc9004cee2e3668990526?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\/3b1649473554d683f4cf4a8b85d233cf43338684aaedc9004cee2e3668990526?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Sanjana Singh"},"url":"https:\/\/webkul.com\/blog\/author\/sanjana-singh202\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/175530","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\/243"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=175530"}],"version-history":[{"count":41,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/175530\/revisions"}],"predecessor-version":[{"id":372035,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/175530\/revisions\/372035"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=175530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=175530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=175530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}