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.

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
, | 2

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
, | 0

Magento PWA Studio: Routing and Root Components

10 comments

  1. 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 👍👍

  2. 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! 🙂

  3. 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 😉

  4. 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.