Introducing Magento PWA Demo by Inchoo

Related Inchoo Services

We’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’ve used PWA Studio 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’s main goal is to show what can be achieved in both UX and performance consistency standpoint when you create your own Magento PWAs using PWA Studio.

And the possibilities only expand from here. We’ll make sure to add new features to this demo as we continue working on PWA Studio and on our client projects, so stay tuned!

Key demo highlights:

  • based on PWA studio, Buildpack and Peregrine
  • mobile AND desktop PWA
  • showcasing all key workflows, complete checkout included
  • Lighthouse scores of 100 on 4/5 audits on regular networks
    • 93-100 on all audits on slow 3G networks
  • the “standard” PWA stuff – works offline, add to home screen, and more

What do these scores tell us?

They show that the team behind the PWA project had spent considerable time into optimizing the solution, and that they know what they’re doing.

Now, it doesn’t really matter if a certain audit score is a 100 or a 97, and Lighthouse scores can vary, depending on many factors.

The important thing to note is that this is not a race to Lighthouse 100, this is more of a marathon towards creating more streamlined, better performing solutions for merchants everywhere.

And this is the main promise of PWAs.

Feature update (May 2019)

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:

  • Offline add to cart
  • Layered navigation (display only so far)
  • Yotpo reviews
  • Coupon codes
  • Shipping estimates
  • Grouped and bundle products support

Say no more – take me to the demo!

If you’re already interested, you can check the demo in action here. Or you can visit our demo landing page with some more information on what you can expect.

The team behind the demo

This is what our team members who worked on creating this demo have to say about the experience:
Adrian Bece:

I’m having fun working on Inchoo PWA demo and improving my skills along the way. It is a rewarding and fulfilling experience to create the frontend for eCommerce PWA from scratch: 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.

Igor Cuckovic:

The most interesting thing while working on Inchoo PWA was applying my previous knowledge in React and PWA to an eCommerce project. 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.

How do I start with PWAs?

If you are a developer, make sure to hop on to Magento PWA Documentation. This will start you up and bring you up to speed with what’s happening around PWA Studio. And, more importantly, show you how you can join!

If you’re an agency, you can check some of our thoughts covered across several blog posts.

And if you are a merchant entertaining the thought of PWAs, but still haven’t decided on this approach, drop us a line to start the conversation. We will answer most of your questions (and if we don’t have all the answers, we’ll find them together)!

Now, on to the demo!

You made it all the way down here so you must have enjoyed this post! You may also like:

Behind the scenes with one Magento PWA Studio contributor Aron Stanic
, | 3

Behind the scenes with one Magento PWA Studio contributor

Is now the time to invest in PWA for your Magento website? Top questions for merchants answered. Aron Stanic
, | 2

Is now the time to invest in PWA for your Magento website? Top questions for merchants answered.

Magento PWA Studio: Routing and Root Components Adrian Bece
Adrian Bece, | 1

Magento PWA Studio: Routing and Root Components

21 comments

  1. Hi Inchoo Team,
    thanks for sharing demo and i added on the my mobile home screen inchoo PWA, but i have one question everyone is saying PWA working offline also and you can submit offline ‘form’ also and you can do “add to cart” and all process offline, once it’s connected with the internet than it will send your all the data to server, but when i checked after disconnect my mobile data than home page is coming but when i click on the category than coming “You are offline” .
    Please explain me about it..

    1. Hi Chhatrapal, thanks for commenting. For anything to be accessible offline, the app first needs to load while online.

      So, if you have never accessed that particular category page, and you are trying to do it while offline, this is what will happen. I hope I managed to explain this, hope it helps.

      If you need any help with some of your PWA project(s), feel free to get in touch via our contact form – thanks!

    1. Hi Ramakant,

      sorry to hear you’re experiencing issues. If you could head over to Magento Community Engineering Slack and join #pwa channel, I’m sure you’ll get some people who can assist more quickly.

      I’d recommend this even if didn’t have this issue at hand – over there you’ll get access to everyone working on and interested in keeping up with PWA Studio.

      You can join here – https://magentocommeng.slack.com/ Good luck!

  2. This is an amazing use of PWA Studio. Great to see a working demo site utilising the studio, how much of your demo site was created by your team vs being provided by PWA studio?

    1. Hello Dave. Thank you very much for your comment. I’ve been working on this demo from the start (sometime around September) and Igor joined me around February. Majority of the demo site is created by us from scratch. We even use some different NPM packages for some functionalities (Venia’s informed vs react-final-form on demo, for example). We only reused a small portion of Venia’s code to speed up the development, mainly the webpack and UPWARD config, some necessary components from Peregrine, some reducers and actions, etc. All components and frontend architecture was made by us from scratch. But as Magento PWA team is continuing to work on Peregrine and adding more useful components, I see it being used way more in the future. Feel free to reach out and let us know if you have any more questions.

  3. Hello, this is a gorgeous demo. We would love to install this. Is it like an extension or installing theme or will it be a project and need custom development hours over 100?
    We also noticed that this demo isnt that fast, is it bc we are far from the server? any chance you guys can make a new demo on aws us to show off its speed?

  4. Hi Aron,

    This PWA demo is just too beautiful to not give us a chance to buy it. Would you please consider selling it? I guess many would be interested with this excellent work.

    Thank you

    1. Hi Isaac, thanks for the comments. We have options to help out or engage with other teams on their PWA projects and work together, but we don’t have plans to sell this as it is not really a plug-and-play product (none of the PWA stuff really is). You can always drop us a line via our contact form below to see how we can help with a particular project of yours. Thanks!

  5. Great work guys. This renews my faith in M2 and what can be achieved with great coding. Would be good to make it easy for people to use coupon codes since when you go directly to checkout there is no way currently. Also when you complete the order and click on continue shopping it takes you to an empty basket warning. Performance is superb though and I’m massively impressed 👍👍

    1. Thanks for the comments and noticed issues, Alistair. We’re actually working on coupon codes and other improvements, so stay tuned.

  6. As mentioned earlier, wish you guys would post this on Github for us to play with. This is EXACTLY what M2 should have been rather than the constantly frustrating spinner icon that forces customers to leave the site. Even is the site isn’t slow, the spinner gives the illusion of waiting..and waiting..

    Absolutely brilliant demo! Heck, we’d even pay a fee to get a copy of it 🙂

    1. Hi Alex,

      we don’t have any plans to open source this atm, however some of our work will be seen in the PWA studio as we’re actively contributing there too. Stay tuned! 🙂

  7. I feel this is a little too late. They had years to resolve the Knockout JS nightmare and they poorly outsourced broken teams to Ukraine who made the whole M2 front end worse. AngularJs installer pages.. mixed knockout and mage UI components. Have they learned there lesson? Is it sass or still less

    1. Hello Khaleel,
      we totally understand the whole KnockoutJS issue and PWA seems to be a step in the right direction for Magento 2 frontend.

      Regarding your question about SASS or LESS, it’s whatever you choose it to be. If you are working on a project from scratch (like we did), you can configure webpack however you want. We went with PostCSS with some awesome plugins, but you could easily implement SASS or LESS, or even leave it as pure CSS. It definitely leaves more options to choose from than standard Magento 2 frontend.

    1. Hi Isaac, not sure if we can compare as there’s no “native Magento PWA”, PWA Studio is a set of tools that anyone can use to build their own solutions (and then optimize accordingly), while Vue Storefront (I believe you are referring to this) is a standalone product. In any case, PWA Studio can be used to create well-optimized PWAs, as you can see from our demo 😉

  8. Hello,

    Thanks for your demo and looking good.

    i need some help on setup pwa on server.

    can i know how you are forwarding port to url? as i know PWA running on a specific port

    Is possible to create new blog for how to setup pwa on server?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.