{"id":2157,"date":"2018-12-17T13:00:18","date_gmt":"2018-12-17T07:30:18","guid":{"rendered":"https:\/\/www.idslogic.com\/blog\/?p=2157"},"modified":"2019-07-24T12:22:31","modified_gmt":"2019-07-24T06:52:31","slug":"new-frontend-progressive-web-app-for-magento-2","status":"publish","type":"post","link":"https:\/\/www.idslogic.com\/blog\/new-frontend-progressive-web-app-for-magento-2","title":{"rendered":"A New Frontend Progressive Web App for Magento 2"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.idslogic.com\/blog\/new-frontend-progressive-web-app-for-magento-2\/#Progressive_Web_Application_for_Magento_2\" title=\"Progressive Web Application for Magento 2:\">Progressive Web Application for Magento 2:<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.idslogic.com\/blog\/new-frontend-progressive-web-app-for-magento-2\/#Characteristics_of_PWA\" title=\"Characteristics of PWA:\">Characteristics of PWA:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.idslogic.com\/blog\/new-frontend-progressive-web-app-for-magento-2\/#The_Approach_of_PWA\" title=\"The Approach of PWA:\">The Approach of PWA:<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p><span style=\"font-size: 14pt;\"><br \/>\nMagento is a popular e-commerce platform that is preferred by businesses because of its rich features, robustness, scalability and immense flexibility. Recently Magento introduced the Progressive Web App Studio in the 2.3 version and it is a suite of tools that are designed to empower the developers so that they can create online stores as progressive web apps.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"> PWA has gained immense popularity in the field of e-commerce, online news portals, businesses, and other fields because of its varied characteristics and features.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Progressive_Web_Application_for_Magento_2\"><\/span><span style=\"font-size: 18pt; color: #008000;\"><strong>Progressive Web Application for Magento 2: <\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-size: 14pt;\"><br \/>\nThe PWA uses modern capabilities that help to deliver an application like user experience and also helps to do things like work offline, send push notifications, the load on the home screen and etc. PWA for Magento 2 uses the web capabilities and develops from a browser tab making the pages more impressive. It is super-fast when compared to the website.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Characteristics_of_PWA\"><\/span><span style=\"font-size: 18pt; color: #003366;\"><strong>Characteristics of PWA:<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"color: #003366;\"><span style=\"font-size: 14pt;\"><strong>Faster User Interface Support<\/strong>:<\/span><span style=\"color: #000000;\"><span style=\"font-size: 14pt;\">Web developers can load a complete site to the browser just after one-page view on slow networks as well.<\/span><br \/>\n<\/span><\/span><\/p>\n<hr \/>\n<p><span style=\"color: #003366;\"><span style=\"font-size: 14pt;\"><strong>Offline Support<\/strong>: <\/span><span style=\"color: #000000;\"><span style=\"font-size: 14pt;\">The sites can now be accessed even if users lose internet connectivity. PWA sites cache the content and also ensure that the content is served even when the user is offline.<\/span><br \/>\n<\/span><\/span><\/p>\n<hr \/>\n<p><span style=\"color: #003366; font-size: 14pt;\"><strong>Background Processes<\/strong>:<span style=\"color: #000000;\">If the user has poor net connectivity, then the browser stores all the requests, form submission data and etc. and when the connectivity returns, it sends all the data again.<br \/>\n<\/span><\/span><\/p>\n<hr \/>\n<p><span style=\"color: #003366; font-size: 14pt;\"><strong>Home Screen Shortcut:<\/strong> <span style=\"color: #000000;\">The PWA site can be installed in the home screen like a native app by the mobile users.<br \/>\n<\/span><\/span><\/p>\n<hr \/>\n<p><span style=\"color: #003366;\"><span style=\"font-size: 14pt;\"><strong>Secure<\/strong>: <\/span><span style=\"color: #000000;\"><span style=\"font-size: 14pt;\">For enhanced security, PWA sites use HTTPS connections.<\/span><\/p>\n<p><\/span><\/span><\/p>\n<p><a href=\"https:\/\/www.idslogic.com\/how-to-get-your-company-ready-to-outsource-skilled-magento-resources.html\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2159 size-full\" src=\"https:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2018\/12\/How-to-get-your-company-ready-to-outsource-skilled-magento-resources.jpg\" alt=\"How to get your company ready to outsource skilled magento resources\" width=\"856\" height=\"93\" srcset=\"https:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2018\/12\/How-to-get-your-company-ready-to-outsource-skilled-magento-resources.jpg 856w, https:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2018\/12\/How-to-get-your-company-ready-to-outsource-skilled-magento-resources-300x33.jpg 300w, https:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2018\/12\/How-to-get-your-company-ready-to-outsource-skilled-magento-resources-768x83.jpg 768w\" sizes=\"auto, (max-width: 856px) 100vw, 856px\" \/><\/a><\/p>\n<hr \/>\n<h3><span class=\"ez-toc-section\" id=\"The_Approach_of_PWA\"><\/span><span style=\"font-size: 18pt; color: #003366;\"><strong>The Approach of PWA:<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-size: 14pt;\"><br \/>\nPWA is the latest technology that combines the advantages of both native apps and websites.\u00a0 You can easily pin a website to the home screen of your phone and also cope with offline phases and use the machine sensors. But when it is regarding <span style=\"color: #800000;\"><a style=\"color: #800000;\" href=\"https:\/\/www.idslogic.com\/magento-development\/\">Magento development<\/a><\/span>, PWAs are the future.<\/span><\/p>\n<h4><span style=\"font-size: 18pt; color: #003366;\"><strong>Here is why?<\/strong><\/span><\/h4>\n<p><span style=\"font-size: 14pt; color: #cc5e14;\"><strong>PWAs Allow to Decouple Backend and Frontend: <\/strong><\/span><br \/>\n<span style=\"font-size: 14pt;\"><br \/>\nPWAs are built using a JavaScript framework like AngularJS, React, Vue.js for handling the data and displaying it.\u00a0 They communicate with the backend, Magento 2 via REST APIs in the background and add some caching layer and have a frontend that is super fast and covers the same functionality as the traditional frontend of Magento.\u00a0 <\/span><\/p>\n<p><span style=\"font-size: 14pt;\">And since Magento doesn\u2019t use the frontend layer anymore, this approach is called the headless Magento.<\/span><\/p>\n<hr \/>\n<p><span style=\"font-size: 14pt; color: #cc5e14;\"><strong>The UI Components: <\/strong><\/span><br \/>\n<span style=\"font-size: 14pt;\"><br \/>\nThe UI components are developed by the core team of Magento for a modern, and extensible frontend that can cope up with various components. The components are self-dependent and can easily access other components by using a well-defined interface. <\/span><\/p>\n<p><span style=\"font-size: 14pt;\">They are used in the Admin and the checkout mostly and there are plans to extend the usage to the frontend, and replace the old layout system.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><br \/>\nSo, to conclude, the free progressive web app for Magento 2 is a wonderful combination of apps and webs and it applies to the modern web capability and delivers an amazing app like experience to the mobile users. <\/span><\/p>\n<p><span style=\"font-size: 14pt;\">This results in enhanced customer experience, more traffic, increased conversions, and sales volumes.<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Magento is a popular e-commerce platform that is preferred by businesses because of its rich features, robustness, scalability and immense flexibility. Recently Magento introduced the Progressive Web App Studio in the 2.3 version and it is a suite of tools&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2158,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[171,536,550,677],"tags":[666,667,665],"class_list":["post-2157","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecommerce-website-development","category-front-end-development","category-magento","category-magento-2-extension","tag-magento-2-pwa","tag-progressive-web-app-magento-2","tag-progressive-web-apps"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/2157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/comments?post=2157"}],"version-history":[{"count":4,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/2157\/revisions"}],"predecessor-version":[{"id":3460,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/2157\/revisions\/3460"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/media\/2158"}],"wp:attachment":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/media?parent=2157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/categories?post=2157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/tags?post=2157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}