Magento PWA Studio 2.0.0

Yesterday, Senior Magento Frontend Architect James Zetlen released Magento PWA (Progressive Web Apps) Studio 2.0.0. He stated on Twitter that they are now keeping APIs stable, using semantic versioning and think it’s time to start building stuff with it if you have not already been starting to use it.

He posted the following release video, the process of which is usually automated, but if you watch the video, you know why it was triggered manually 🎉🎉🎉.

&tldr;

Magento PWA Studio is a collection of tools that lets developers build complex Progressive Web Applications on top of Magento 2 stores.

• UPWARD
• modular Venia
• full checkout
• 100% Lighthouse scores
• community contribution galore

Lighthouse Scores

The following development summary was taken from the Github release page. For a list of relevant Pull Requests related to the 2.0 release, see this GitHub query result.

Server Platform and Language Independence

• UPWARD spec introduced for cross platform server behavior configuration.
  An UPWARD file describes a stack-agnostic server that is used for server side rendering, asset delivery, and proxying.
• A PWA package can now define its network requirements in an UPWARD file.
• A PWA can now be deployed on any tech stack as long as the server is UPWARD compliant.
• UPWARD servers implemented in NodeJS and PHP
• UPWARD spec published and open for community contribution.

Related Documentation Updates

• UPWARD spec overview
• UPWARD-js server

Improved Developer Experience

• Implemented consistent patterns for workflow, such as action/reducer organization and container/presentational separation, in the Venia reference storefront source code.
• Venia components are now portable and can be used in any React application.
• New centralized driver and adapter concepts for all PWA-Studio component input/output.
• Configurable low level UI elements, such as lists and forms, available for developers without the need for drivers or adapters.
• Improved error handling to help detection and recoverability.

Related Documentation Updates

• Modular Venia components
• Venia directory structure

Venia App-Like Experience

• Pagination feature added to Venia reference storefront for app-like navigation.
• Inline checkout implemented in the Venia reference storefront.
• Basic account creation and management implemented in Venia.
• Loading state implemented to improved the app-like experience.

Related documentation updates

• Venia Checkout implementation

Improved Shopper Experience

• Braintree checkout integration in the Venia reference storefront.
• Search with intelligent previews implemented in the Venia reference storefront.

Related Documentation Updates

• Braintree integration

PWA Compliance

• Web App Manifest file created for the Venia reference storefront.
  This file provides the metadata for adding the Venia storefront to a mobile home screen.
• Service worker optimizations.

Performance Enhancements

• Smart caching implemented to improve service worker catalog caching
• Bandwidth usage optimizations achieved using:
  • Dynamic image compression/resize
  • Advanced minification
  • Bundle splitting
• Improved app performance on devices, including smoother renders and faster Time To First Meaningful Paint.

GraphQL Usage

• GraphQL usage increased to match coverage updates in Magento 2.3.0.

Magento Cloud Compatibility

• A new Magento module (Magento_UpwardConnector) is available to route frontend requests through an UPWARD-PHP server.
• Solution Implementers(SI) can replace existing Magento cloud storefronts with a new PWA storefront using the UPWARD connector module.
• Documentation created for deploying storefront to Magento Cloud
• Assistance offered by Magento Enterprise Cloud deployment team

Related Documentation Updates

• README for the Magento_UpwardConnector module, which contains Cloud deployment instructions.

Other Documentation Updates

New Topics

• Theme vs Storefront
• Install Venia sample data
• Peregrine Routing

Updated Topics

• Certificate and Valet+ troubleshooting
• Tools and Libraries

Known Issues

• After submitting a successful order, the application throws up an error notification, and the user has to actively click out of the error notification.
• Create account page displayed with null values for email, first and last name when creating an account during a guest checkout.
• (Mobile specific) When there are more categories, users cannot scroll to Sign in button. It blocks user from signing to the account.

Other notable updates

• Switched from NPM to Yarn for package management
• Setup Venia storefront video developed and available in Magento U