PWA Studio

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

Contributions

Are you interested in contributing to the PWA Studio project? Check out the community wiki to learn how to contribute to PWA Studio.

If you are looking for an issue to work on, visit our community backlog board and look at the Ready for Development column.

For more information about contributing to this repository, see the Contribution guide.

Useful links

PWA Studio documentation site - The best place to start learning about the tools and the technologies that PWA Studio provides. Here, you can learn PWA Studio concepts, find API reference docs, and read tutorials on how to use PWA Studio to create your own PWA storefront.

Here are some popular topics to help you get started:

• PWA Studio Overview - A high level overview of PWA Studio and what it provides to developers
• PWA Studio Beginner Guide
• Tools and libraries - A list of tools and libraries developers need to be familiar with to use PWA Studio
• PWA Studio fundamentals - A series of tutorials covering common storefront development tasks
• PWA Studio best Practices

Venia

Venia is a Magento PWA storefront created and powered by PWA Studio tools and libraries. Developers can use Venia as a reference storefront for their own projects or as a starting point for customization.

About this repository

To facilitate local development, testing, and versioning, PWA Studio is structured as a monorepo using Yarn Workspaces. Packages in this repository are independently published to NPM. Install individual packages as needed instead of installing the entire pwa-studio project as a dependency of your project.

Note: If you are installing the whole PWA Studio monorepo, please be aware that the project uses yarn workspaces and does not support npm install. Please use yarn install instead.

Packages

This repository includes the following packages:

• peregrine - A component library for adding logic to visual components
• venia-ui - A library of visual components for PWA storefront projects
• venia-concept - A concept storefront project built using PWA Studio tools
• pwa-buildpack - A tooling library to help with PWA storefront development
• upward-spec - UPWARD specification and test suite
• upward-js - A reference implementation of the UPWARD specification
• babel-preset-peregrine - A babel preset plugin that is required to use peregrine components
• graphql-cli-validate-magento-pwa-queries - A script to validate your project's GraphQL queries against a schema
• pwa-devdocs - Project source for the documentation site

If you have an issue that cannot be resolved, please create an issue.

PWA Studio XD Kit

Adobe XD makes handoff between designers and engineers more efficient through easy-to-use collaboration tools. The [PWA Studio XD Kit][] contains a collection of templates and components compatible with Adobe Commerce.

Join the conversation

If you have any project questions, concerns, or contribution ideas, join our #pwa slack channel!

Here you can find a public calendar with events that Magento PWA team runs with Community. You can also add that calendar to your calendar app to stay up to date with the changes and get notifications.

Community Maintainers

A community maintainer is a point of contact from the community approved by the Core Team to help with community outreach and project administration.

The following members are the community maintainers for this project:

Top Community Contributors

The PWA Studio project welcomes all codebase and documentation contributions. We would like to recognize the following community members for their efforts on improving the PWA Studio project in our latest release.

Last Updated: October 14, 2021

Source: statistic.magento.engineering

PWA Studio Release 14.1.0

NOTE: This changelog only contains release notes for PWA Studio and Venia 14.1.0 For older release notes, see PWA Studio releases.

Highlights

The 14.1.0 release of PWA Studio provides compatibility with PREX extension and Upgradation from node 14 to 18.

Additional fixes

• Story: 4319 — Get Minimum Password Length from configuration.
• Story: 4314 — Header location should set to correct endpoint in case of 301|302.
• Bug: 4316 — DevContainer > Node 14 to 18 LTS is updated in dev container
• Bug: 4303 — Props error on Checkout page
• Bug: 4260 — Change user time to logout
• Bug: 4277 — PDP breadcrumbs only show one level of product category
• Bug: 4280 — Login issue with PWA 14.0
• Bug: 4273 — PWA Store View Not Functioning for Taiwan Store View with Language Locale 'zh_Hant_TW'
• Bug: 59 — GraphQL with PWA Non-default Sortable attribute fails
• Bug: 4300 — Update magento-compatibility.js to indicate all dependencies and just not magento
• Bug: 4309 — Extending Peregrine Talons for Custom Applications
• Bug: 4305 — PWA Studio URL redirect not working
• Bug: 4117 — Update README.md with PWA Studio XD Kit
• Bug: 4301 — Language translating giving errors

14.1.0 Lighthouse scores

With each new release of PWA Studio, we perform Lighthouse audits of four Venia page types, each representing a different level of complexity. Shown below are the Lighthouse scores for the 14.1.0 release of these pages on desktop and mobile devices.

Desktop scores

| | Home Page | Product Category | Product Details | Search Results | |---------------:|:-------------------------------:|:-----------------------------------:|:----------------------------------:|:---------------------------------:| | Desktop | | | | | | Performance | | | | | | Accessibility | | | | | | Best Practices | | | | | | SEO | | | | | | PWA | | | | |

Mobile scores

| |   Home Page   | Product Category | Product Details | Search Results | |---------------:|:---------------------------------:|:-----------------------------------:|:----------------------------------:|:---------------------------------:| | Mobile | | | | | | Performance | | | | | | Accessibility | | | | | | Best Practices | | | | | | SEO | | | | | | PWA | | | | |

Known issue

When a user logs out, that user's local storage session persists. As a result, the cart ID from the logged out user is retrieved and given to the guest user on the computer. This causes the following error when the guest user tries to check out: An error has occurred. Please check the input and try again. To resolve this issue, try disabling graphql session sharing as described in the GraphQL documentation on session cookies here: https://devdocs.magento.com/guides/v2.4/graphql/authorization-tokens.html#session-cookies.

Upgrading from a previous version

Use the steps outlined in this section to update your scaffolded project from 14.0.1 to 14.1.0 See Upgrading versions for more information about upgrading between PWA Studio versions.

Updated package dependencies

Open your package.json file and update the PWA Studio package dependencies to the versions associated with this release. The following table lists the latest versions of each package as of 14.0.1. The bolded versions with an asterisk (*) are the packages that were updated from PWA Studio 14.0.0.

NOTE: Your project may not depend on some packages listed in this table.

[UPDATE THIS TABLE WITH THE LATEST VERSIONS OF EACH PACKAGE]