{"id":135642,"date":"2019-06-11T14:52:44","date_gmt":"2019-06-11T14:52:44","guid":{"rendered":"https:\/\/inchoo.net\/?p=33510"},"modified":"2019-06-11T14:52:44","modified_gmt":"2019-06-11T14:52:44","slug":"introducing-magento-pwa-demo-by-inchoo","status":"publish","type":"post","link":"https:\/\/www.sushilkumar.ind.in\/blog\/magento-2\/introducing-magento-pwa-demo-by-inchoo\/","title":{"rendered":"Introducing Magento PWA Demo by Inchoo"},"content":{"rendered":"<p>We&#8217;re happy to share with you our Magento PWA Demo! Created by our team, based on PWA Studio tools and practices. Check out the highlights and key features below and see the demo in action!<br \/>\n<span id=\"more-33510\"><\/span><br \/>\nWe\u2019ve used <a href=\"https:\/\/github.com\/magento-research\/pwa-studio\" target=\"_blank\" rel=\"noopener\">PWA Studio<\/a> to create this demo, which is a more streamlined, fine-tuned solution (with room for improvements, of course), compared to the official Venia concept. As a result, this showcase\u2019s main goal is to show <strong>what can be achieved in both UX and performance<\/strong> consistency standpoint when you <strong>create your own Magento PWAs using PWA Studio<\/strong>.<\/p>\n<p>And the possibilities only expand from here. We\u2019ll make sure to add new features to this demo as we continue working on PWA Studio and on our client projects, so stay tuned!<\/p>\n<h3>Key demo highlights:<\/h3>\n<ul>\n<li>based on PWA studio, Buildpack and Peregrine<\/li>\n<li>mobile <strong>AND<\/strong> desktop PWA<\/li>\n<li>showcasing all key workflows, complete checkout included<\/li>\n<li>Lighthouse scores of 100 on 4\/5 audits on regular networks\n<ul>\n<li>93-100 on all audits on slow 3G networks<\/li>\n<\/ul>\n<\/li>\n<li>the \u201cstandard\u201d PWA stuff &#8211; works offline, add to home screen, and more<\/li>\n<\/ul>\n<h3>What do these scores tell us?<\/h3>\n<p>They show that the team behind the PWA project had spent considerable time into optimizing the solution, and that they know what they&#8217;re doing.<\/p>\n<p>Now, it doesn&#8217;t really matter if a certain audit score is a 100 or a 97, and Lighthouse scores can vary, depending on many factors.<\/p>\n<p>The important thing to note is that this is not a race to Lighthouse 100, this is more of a <strong>marathon towards creating more streamlined, better performing solutions for merchants<\/strong> everywhere.<\/p>\n<p>And this is the main promise of PWAs.<\/p>\n<h3>Feature update (May 2019)<\/h3>\n<p>We have, since the original article was published, added a number of features, so now, when you access the demo, you can also see in action the following:<\/p>\n<ul>\n<li>Offline add to cart<\/li>\n<li>Layered navigation (display only so far)<\/li>\n<li>Yotpo reviews<\/li>\n<li>Coupon codes<\/li>\n<li>Shipping estimates<\/li>\n<li>Grouped and bundle products support<\/li>\n<\/ul>\n<h3>Say no more &#8211; <a href=\"https:\/\/inchoopwa.com\" target=\"_blank\" rel=\"noopener\">take me to the demo<\/a>!<\/h3>\n<p>If you\u2019re already interested, you can <a href=\"https:\/\/inchoopwa.com\" target=\"_blank\" rel=\"noopener\">check the demo in action here<\/a>. Or you can visit our <a href=\"https:\/\/inchoo.net\/pwa-demo\/\">demo landing page<\/a> with some more information on what you can expect.<\/p>\n<p><a href=\"https:\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2019\/06\/introducing-magento-pwa-demo-by-inchoo.png\"><img class=\"lazyload alignleft size-full wp-image-33609\" alt=\"\" width=\"800\" height=\"480\" \/><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-33609\" src=\"https:\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2019\/06\/introducing-magento-pwa-demo-by-inchoo.png\" alt=\"\" width=\"800\" height=\"480\" \/><\/a><\/p>\n<h3>The team behind the demo<\/h3>\n<p>This is what our team members who worked on creating this demo have to say about the experience:<br \/>\n<strong><a href=\"https:\/\/inchoo.net\/author\/adrian-bece\/profile\/\">Adrian Bece:<\/a><\/strong><\/p>\n<blockquote class=\"answer\">\n<p>I\u2019m having fun working on Inchoo PWA demo and improving my skills along the way. It is a rewarding and fulfilling experience to <strong>create the frontend for eCommerce PWA from scratch<\/strong>: from designing the site, planning out the architecture and components, being playful with frontend and putting it all together, to seeing it in action and admiring the final results. I hope that the product reflects all the fire and creativity that went into it.<\/p>\n<\/blockquote>\n<p><strong><a href=\"https:\/\/inchoo.net\/author\/igor-cuckovic\/profile\/\">Igor Cuckovic:<\/a><\/strong><\/p>\n<blockquote class=\"answer\">\n<p>The most interesting thing while working on Inchoo PWA was <strong>applying my previous knowledge in React and PWA to an eCommerce project<\/strong>. Progressive web applications are the way of the future and React gives a desirable level of flexibility and performance. Working on this project is fun and challenging at the same time.<\/p>\n<\/blockquote>\n<h3>How do I start with PWAs?<\/h3>\n<p><strong>If you are a developer<\/strong>, make sure to hop on <a href=\"https:\/\/magento-research.github.io\/pwa-studio\/\" target=\"_blank\" rel=\"noopener\">to Magento PWA Documentation<\/a>. This will start you up and bring you up to speed with what\u2019s happening around PWA Studio. And, more importantly, show you how you can join!<\/p>\n<p><strong>If you\u2019re an agency<\/strong>, you can check some of <a href=\"\/category\/magento-2\/pwa\/\">our thoughts covered across several blog posts<\/a>.<\/p>\n<p>And <strong>if you are a merchant<\/strong> entertaining the thought of PWAs, but still haven\u2019t decided on this approach, <a href=\"https:\/\/inchoo.net\/pwa-demo#pwa-contact\">drop us a line to start the conversation<\/a>. We will answer most of your questions (and if we don&#8217;t have all the answers, we\u2019ll find them together)!<\/p>\n<h3>Now, <a href=\"https:\/\/inchoopwa.com\" target=\"_blank\" rel=\"noopener\">on to the demo<\/a>!<\/h3>\n<p>The post <a rel=\"nofollow\" href=\"https:\/\/inchoo.net\/ecommerce\/magento-pwa-demo\/\">Introducing Magento PWA Demo by Inchoo<\/a> appeared first on <a rel=\"nofollow\" href=\"https:\/\/inchoo.net\">Inchoo<\/a>.<\/p>\n<h1><a target=\"_blank\" href=\"http:\/\/www.circulatetechnology.com\/\">Click here for more informations about top website development services <\/a><\/h1>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re happy to share with you our Magento PWA Demo! Created by our team, based on PWA Studio tools and practices. Check out the highlights and key features below and see the demo in action! We\u2019ve used PWA Studio to create this demo, which is a more streamlined, fine-tuned solution (with room for improvements, of &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[235,1108,20,14080,14074,14081,1110,14082,13268,14083],"tags":[],"class_list":["post-135642","post","type-post","status-publish","format-standard","","category-ecommerce-talk","category-inchoo-pwa","category-magento-2","category-magento-pwa","category-progressive-web-applications","category-progressive-web-apps","category-pwa","category-pwa-demo","category-pwa-studio","category-venia"],"jetpack_publicize_connections":[],"acf":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p99pkJ-zhM","_links":{"self":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/135642"}],"collection":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/comments?post=135642"}],"version-history":[{"count":0,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/135642\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/media?parent=135642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/categories?post=135642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/tags?post=135642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}