The tools provided by the Magento PWA Studio project allows you to create websites that are fast, mobile-friendly, and reliable. This topic lists the basic concepts you need to know to work with the Magento PWA Studio tools.
Getting Started
Basic Concepts
Application shell
An application shell provides the basic user interface structure for a progressive web application.
For more information, see Application shell.
Service worker
A service worker is a script that runs in the background. Progressive web applications use service workers for caching and resource retrieval.
Component data binding
Component data binding refers to the way data flows between the source and a UI component. Progressive web applications use data binding patterns to connect dynamic data with the user interface.
GraphQL
GraphQL is a specification for a data query language client side and a service layer on the server side. It is used to request and push data in a progressive web application.
For more information, see GraphQL.
CSS modules
CSS modules are modular and reusable CSS styles. This allows you to develop components with styles that do not conflict with external style definitions.
For more information, see CSS modules.
Client state, reducers, and actions
Client state, reducers, and actions are Redux concepts used to manage and handle the state of a web application.
Loading and offline states
Loading and offline are both states that must be handled by progressive web applications.
Container extensibility
Writing extensible containers allow others to re-use and alter your container without modifying the source.
For more information, see Container extensibility.
Performance patterns
Performance is an important feature for a progressive web app. There are many strategies and patterns available to help boost the performance of a PWA.
Root components and routing
The root component of an application is the DOM node under which all other nodes are managed by React. Routing is the ability to map a URL pattern to the appropriate handler.
Critical path
The critical path for rendering refers to the steps the browser takes to process the HTML, CSS, and JavaScript files to display a website. Optimizing the critical path is important to get the best performance out of a progressive web application.