diff --git a/pwa-devdocs/src/_config.yml b/pwa-devdocs/src/_config.yml index 8d643cb0b4..e9212c9afb 100644 --- a/pwa-devdocs/src/_config.yml +++ b/pwa-devdocs/src/_config.yml @@ -24,17 +24,17 @@ defaults: scope: path: "technologies" values: - toc-group: "getting-started" + toc-group: "overview" - scope: path: "pwa-buildpack" values: - toc-group: "getting-started" + toc-group: "overview" - scope: path: "frequently-asked-questions" values: - toc-group: "getting-started" + toc-group: "overview" - scope: @@ -52,7 +52,7 @@ defaults: scope: path: "peregrine" values: - toc-group: "getting-started" + toc-group: "overview" - scope: @@ -64,7 +64,7 @@ defaults: scope: path: "venia-pwa-concept" values: - toc-group: "getting-started" + toc-group: "overview" - scope: path: "venia-ui/reference" diff --git a/pwa-devdocs/src/_data/home-sections.yml b/pwa-devdocs/src/_data/home-sections.yml index 0157830ed2..7a00e32bf1 100644 --- a/pwa-devdocs/src/_data/home-sections.yml +++ b/pwa-devdocs/src/_data/home-sections.yml @@ -1,21 +1,21 @@ - title: Overview - content: The Magento PWA Studio project is a set of developer tools that allow you to develop, deploy, and maintain a PWA storefront on top of Magento 2. + content: Learn about Magento's PWA Studio and the tools it provides. url: /technologies/overview/ -- title: Tutorials - content: Step-by-step instructions to help you become familiar with PWA Studio tools and concepts. +- title: Getting Started + content: Follow this step-by-step tutorial for setting up your storefront project. url: /tutorials/ - title: Basic Concepts - content: Things you need to know to work with the Magento PWA Studio tools. + content: Read up on the patterns and concepts used in PWA Studio. url: /technologies/basic-concepts/ - title: Theme vs Storefront content: Learn the differences between a Magento theme and a PWA Studio storefront. url: /technologies/theme-vs-storefront/ -- title: Contribute to this project - content: Read our Contribution Guidelines to find out how you can help develop this project. +- title: Contribute + content: Read the Contribution Guidelines to find out how you can help develop this project. url: /technologies/contribute/ - title: Release notes diff --git a/pwa-devdocs/src/_data/getting-started.yml b/pwa-devdocs/src/_data/overview.yml similarity index 81% rename from pwa-devdocs/src/_data/getting-started.yml rename to pwa-devdocs/src/_data/overview.yml index dc0397de2b..81c1835aba 100644 --- a/pwa-devdocs/src/_data/getting-started.yml +++ b/pwa-devdocs/src/_data/overview.yml @@ -1,31 +1,31 @@ -title: Getting Started +title: Overview entries: - - label: Overview + + - label: PWA Studio Overview url: /technologies/overview/ + entries: + + - label: External tools and libraries + url: /technologies/tools-libraries/ - - label: Frequently Asked Questions (FAQ) - url: /frequently-asked-questions/ + - label: Versioning strategy + url: /technologies/versioning/ - - label: Tools and libraries - url: /technologies/tools-libraries/ + - label: Contributing to PWA Studio + url: /technologies/contribute/ + + - label: Frequently Asked Questions + url: /frequently-asked-questions/ - label: Magento integration entries: - - label: Magento compatibility + + - label: Version compatibility url: /technologies/magento-compatibility/ - label: Magento theme vs PWA storefront url: /technologies/theme-vs-storefront/ - - label: PWA Storefront architecture - url: /technologies/storefront-architecture/ - entries: - - label: Runtime architecture - url: /technologies/storefront-architecture/runtime/ - - - label: Build-time architecture - url: /technologies/storefront-architecture/buildtime/ - - label: Basic concepts url: /technologies/basic-concepts/ entries: @@ -50,55 +50,64 @@ entries: - label: State management url: /technologies/basic-concepts/state-management/ - - label: PWA Buildpack - url: /pwa-buildpack/ + - label: PWA Storefront architecture + url: /technologies/storefront-architecture/ entries: - - label: Configuration management - url: /pwa-buildpack/configuration-management/ - - label: Extensibility framework - url: /pwa-buildpack/extensibility-framework/ + - label: Runtime architecture + url: /technologies/storefront-architecture/runtime/ - - label: Scaffolding - url: /pwa-buildpack/scaffolding/ + - label: Build-time architecture + url: /technologies/storefront-architecture/buildtime/ - - label: Custom project templates - url: /pwa-buildpack/scaffolding/custom-project-templates/ + - label: Venia + url: /venia-pwa-concept/ + entries: - - label: Troubleshooting - url: /pwa-buildpack/troubleshooting/ + - label: Venia storefront setup + url: /venia-pwa-concept/setup/ + + - label: Install Venia sample data + url: /venia-pwa-concept/install-sample-data/ + + - label: Venia project structure + url: /venia-pwa-concept/project-structure/ + + - label: Modular components + url: /venia-pwa-concept/features/modular-components/ - label: Peregrine url: /peregrine/ entries: + - label: Talons url: /peregrine/talons/ + - label: Routing in PWA Studio url: /peregrine/routing/ - - label: Venia storefront concept - url: /venia-pwa-concept/ + - label: PWA Buildpack tools + url: /pwa-buildpack/ entries: - - label: Storefront setup - url: /venia-pwa-concept/setup/ - - label: Install Venia sample data - url: /venia-pwa-concept/install-sample-data/ + - label: Configuration management + url: /pwa-buildpack/configuration-management/ - - label: Project structure - url: /venia-pwa-concept/project-structure/ + - label: Extensibility framework + url: /pwa-buildpack/extensibility-framework/ - - label: Modular components - url: /venia-pwa-concept/features/modular-components/ + - label: Scaffolding + url: /pwa-buildpack/scaffolding/ + + - label: Custom project templates + url: /pwa-buildpack/scaffolding/custom-project-templates/ + + - label: Troubleshooting + url: /pwa-buildpack/troubleshooting/ - label: UPWARD url: /technologies/upward/ entries: + - label: Reference implementation url: /technologies/upward/reference-implementation/ - - - label: Versioning strategy - url: /technologies/versioning/ - - - label: Contributing to PWA Studio - url: /technologies/contribute/ diff --git a/pwa-devdocs/src/_data/peregrine.yml b/pwa-devdocs/src/_data/peregrine.yml deleted file mode 100644 index b076a3a5f8..0000000000 --- a/pwa-devdocs/src/_data/peregrine.yml +++ /dev/null @@ -1,55 +0,0 @@ -title: Peregrine -entries: - - label: Overview - url: /peregrine/ - - - label: Routing in PWA Studio - url: /peregrine/routing/ - - - label: Utility modules - entries: - - label: REST API client - url: /peregrine/reference/rest-api-client/ - - - label: Custom React hooks - entries: - - label: useDropdown - url: /peregrine/reference/hooks/useDropdown/ - - - label: useEventListener - url: /peregrine/reference/hooks/useEventListener/ - - - label: usePagination - url: /peregrine/reference/hooks/usePagination/ - - - label: useSearchParam - url: /peregrine/reference/hooks/useSearchParam/ - - - label: useToasts - url: /peregrine/reference/toasts/useToasts - - - label: useToastContext - url: /peregrine/reference/toasts/useToastContext/ - - - label: useWindowSize - url: /peregrine/reference/hooks/useWindowSize/ - - - label: React components - entries: - - label: ContainerChild - url: /peregrine/reference/container-child/ - - - label: Item - url: /peregrine/reference/item/ - - - label: Items - url: /peregrine/reference/items/ - - - label: List - url: /peregrine/reference/list/ - - - label: Price - url: /peregrine/reference/price/ - - - label: Router - url: /peregrine/reference/router/ diff --git a/pwa-devdocs/src/_data/pwa-buildpack.yml b/pwa-devdocs/src/_data/pwa-buildpack.yml deleted file mode 100644 index c6c2ba01d7..0000000000 --- a/pwa-devdocs/src/_data/pwa-buildpack.yml +++ /dev/null @@ -1,45 +0,0 @@ -title: PWA Buildpack -entries: - - label: Overview - url: /pwa-buildpack/ - - - label: Configuration management - url: /pwa-buildpack/configuration-management/ - - - label: Buildpack CLI - url: /pwa-buildpack/reference/buildpack-cli/ - entries: - - - label: Create custom origin - url: /pwa-buildpack/reference/buildpack-cli/create-custom-origin/ - - - label: Create environment file - url: /pwa-buildpack/reference/buildpack-cli/create-env-file/ - - - label: Load environment file - url: /pwa-buildpack/reference/buildpack-cli/load-env/ - - - label: Reference - entries: - - - label: Configure webpack - url: /pwa-buildpack/reference/configure-webpack - - - label: Environment variable definitions - url: /pwa-buildpack/reference/environment-variables/core-definitions - - - label: MagentoResolver - url: /pwa-buildpack/reference/magento-resolver/ - - - label: MagentoRootComponentsPlugin - url: /pwa-buildpack/reference/root-components-plugin/ - - - label: PWADevServer - url: /pwa-buildpack/reference/pwa-dev-server/ - - - label: ServiceWorkerPlugin - url: /pwa-buildpack/reference/serviceworker-plugin/ - - - label: Troubleshooting - url: /pwa-buildpack/troubleshooting/ - diff --git a/pwa-devdocs/src/_data/technologies.yml b/pwa-devdocs/src/_data/technologies.yml deleted file mode 100644 index 92be53ada3..0000000000 --- a/pwa-devdocs/src/_data/technologies.yml +++ /dev/null @@ -1,55 +0,0 @@ -title: Technologies -entries: - - label: Overview - url: /technologies/overview/ - - - label: Magento compatibility - url: /technologies/magento-compatibility/ - - - label: Magento theme vs PWA storefront - url: /technologies/theme-vs-storefront/ - - - label: PWA Storefront architecture - url: /technologies/storefront-architecture/ - entries: - - label: Runtime architecture - url: /technologies/storefront-architecture/runtime/ - - - label: Build-time architecture - url: /technologies/storefront-architecture/buildtime/ - - - label: Tools and libraries - url: /technologies/tools-libraries/ - - - label: Basic concepts - url: /technologies/basic-concepts/ - entries: - - label: Application shell - url: /technologies/basic-concepts/app-shell/ - - - label: Container extensibility - url: /technologies/basic-concepts/container-extensibility/ - - - label: CSS modules - url: /technologies/basic-concepts/css-modules/ - - - label: GraphQL - url: /technologies/basic-concepts/graphql/ - - - label: Client-side caching - url: /technologies/basic-concepts/client-side-caching/ - - - label: State management - url: /technologies/basic-concepts/state-management/ - - - label: UPWARD - url: /technologies/upward/ - entries: - - label: Reference implementation - url: /technologies/upward/reference-implementation/ - - - label: Contributing to PWA Studio - url: /technologies/contribute/ - - - label: Versioning strategy - url: /technologies/versioning/ diff --git a/pwa-devdocs/src/_data/top-nav.yml b/pwa-devdocs/src/_data/top-nav.yml index 3e0aba9b76..c93435bf07 100644 --- a/pwa-devdocs/src/_data/top-nav.yml +++ b/pwa-devdocs/src/_data/top-nav.yml @@ -1,6 +1,6 @@ -- label: Getting Started +- label: Overview children: - - label: Overview + - label: PWA Studio overview url: /technologies/overview/ - label: Frequently Asked Questions @@ -27,7 +27,7 @@ - label: Tutorials url: /tutorials/ -- label: Reference API +- label: API Reference children: - label: PWA Buildpack url: /pwa-buildpack/reference/buildpack-cli/ diff --git a/pwa-devdocs/src/_data/venia-pwa-concept.yml b/pwa-devdocs/src/_data/venia-pwa-concept.yml deleted file mode 100644 index f81d63feb4..0000000000 --- a/pwa-devdocs/src/_data/venia-pwa-concept.yml +++ /dev/null @@ -1,163 +0,0 @@ -title: Venia Storefront -entries: - - label: Overview - url: /venia-pwa-concept/ - - - label: Project structure - url: /venia-pwa-concept/project-structure/ - - - label: Venia storefront setup - url: /venia-pwa-concept/setup/ - - - label: Install Venia sample data - url: /venia-pwa-concept/install-sample-data/ - - - label: UI component reference - entries: - - - label: Button - url: /venia-ui/reference/components/Button/ - - - label: ButtonGroup - url: /venia-ui/reference/components/ButtonGroup/ - - - label: Logo - url: /venia-ui/reference/components/Logo/ - - - label: Mask - url: /venia-ui/reference/components/Mask/ - - - label: Modal - url: /venia-ui/reference/components/Modal/ - - - label: ProductImageCarousel - url: /venia-ui/reference/components/ProductImageCarousel/ - - - label: ToastContainer - url: /venia-ui/reference/components/ToastContainer/ - - - label: Trigger - url: /venia-ui/reference/components/Trigger/ - - - label: Features - entries: - - - label: Modular components - url: /venia-pwa-concept/features/modular-components/ - - - label: Checkout - url: /venia-pwa-concept/features/checkout/ - - - label: Braintree integration - url: /venia-pwa-concept/features/braintree/ - - - label: Design - entries: - - - label: Global style guide - url: /venia-pwa-concept/design/global-style/ - - - label: Colors - url: /venia-pwa-concept/design/colors/ - - - label: Typography - url: /venia-pwa-concept/design/typography/ - - - label: Buttons - url: /venia-pwa-concept/design/buttons/ - - - label: Form fields - url: /venia-pwa-concept/design/form-fields/ - - - label: Homepage - url: /venia-pwa-concept/design/homepage/ - - - label: Product page - url: /venia-pwa-concept/design/product-page/ - - - label: Category page - url: /venia-pwa-concept/design/category-page/ - - - label: Component specifications - entries: - - - label: Add to cart - url: /venia-pwa-concept/component/add-to-cart/ - - - label: Add to wishlist - url: /venia-pwa-concept/component/add-to-wishlist/ - - - label: Buy now / Buy with - url: /venia-pwa-concept/component/buy-now-with/ - - - label: Category menu - url: /venia-pwa-concept/component/category-menu/ - - - label: Color selector - url: /venia-pwa-concept/component/color-selector/ - - - label: Filter - url: /venia-pwa-concept/component/filter/ - - - label: Footer - url: /venia-pwa-concept/component/footer/ - - - label: Forgot password - url: /venia-pwa-concept/component/forgot-password/ - - - label: Header - url: /venia-pwa-concept/component/header/ - - - label: Image carousel - url: /venia-pwa-concept/component/image-carousel/ - - - label: Label selector - url: /venia-pwa-concept/component/label-selector/ - - - label: Main image - url: /venia-pwa-concept/component/main-image/ - - - label: Number of items - url: /venia-pwa-concept/component/number-of-items/ - - - label: Order confirmation - url: /venia-pwa-concept/component/order-confirmation/ - - - label: Page - url: /venia-pwa-concept/component/page/ - - - label: Product description - url: /venia-pwa-concept/component/product-description/ - - - label: Product listing - url: /venia-pwa-concept/component/product-listing/ - - - label: Purchase history - url: /venia-pwa-concept/component/purchase-history/ - - - label: Quantity selector - url: /venia-pwa-concept/component/quantity-selector/ - - - label: Quantity sync bar - url: /venia-pwa-concept/component/quantity-sync-bar/ - - - label: Recommended carousel - url: /venia-pwa-concept/component/recommended-carousel/ - - - label: Sale banner - url: /venia-pwa-concept/component/sale-banner/ - - - label: Share - url: /venia-pwa-concept/component/share/ - - - label: Show more - url: /venia-pwa-concept/component/show-more/ - - - label: Size selector - url: /venia-pwa-concept/component/size-selector/ - - - label: Sort - url: /venia-pwa-concept/component/sort/ - - - label: Title bar - url: /venia-pwa-concept/component/title-bar/ diff --git a/pwa-devdocs/src/_includes/layout/sidebar-nav-root-item.html b/pwa-devdocs/src/_includes/layout/sidebar-nav-root-item.html index d0affc11b9..2fb90d7045 100644 --- a/pwa-devdocs/src/_includes/layout/sidebar-nav-root-item.html +++ b/pwa-devdocs/src/_includes/layout/sidebar-nav-root-item.html @@ -1,6 +1,6 @@ -{% if page.toc-group == "getting-started" %} - {% assign toc = site.data.getting-started %} +{% if page.toc-group == "overview" %} + {% assign toc = site.data.overview %} {% elsif page.toc-group == "buildpack-api" %} {% assign toc = site.data.buildpack-api %} @@ -11,21 +11,9 @@ {% elsif page.toc-group == "venia-api" %} {% assign toc = site.data.venia-api %} -{% elsif page.toc-group == "technologies" %} - {% assign toc = site.data.technologies %} - -{% elsif page.toc-group == "pwa-buildpack" %} - {% assign toc = site.data.pwa-buildpack %} - {% elsif page.toc-group == "pagebuilder" %} {% assign toc = site.data.pagebuilder %} -{% elsif page.toc-group == "peregrine" %} - {% assign toc = site.data.peregrine %} - -{% elsif page.toc-group == "venia-pwa-concept" %} - {% assign toc = site.data.venia-pwa-concept %} - {% elsif page.toc-group == "tutorials" %} {% assign toc = site.data.tutorials %} diff --git a/pwa-devdocs/src/technologies/basic-concepts/client-side-caching/index.md b/pwa-devdocs/src/technologies/basic-concepts/client-side-caching/index.md index f687d5b251..2957fce9fc 100644 --- a/pwa-devdocs/src/technologies/basic-concepts/client-side-caching/index.md +++ b/pwa-devdocs/src/technologies/basic-concepts/client-side-caching/index.md @@ -20,7 +20,7 @@ Service workers can intercept network requests and fetch cached data or store re ### Venia service worker -Venia's service worker behavior is defined in the [`src/sw.js`][] file using Google's [Workbox][] library. +Venia's service worker behavior is defined in the [`src/SerciveWorker/sw.js`][] file using Google's [Workbox][] library. You do not need to use Workbox to define service worker behavior, but Workbox makes this task easier by removing boilerplate code that is always used when working with service workers. @@ -78,7 +78,7 @@ This strategy is set using the `fetchPolicy` prop on the `Query` component. Caching for Apollo is set up in the [`src/drivers/adapter.js`][] file. [service worker]: https://developers.google.com/web/ilt/pwa/introduction-to-service-worker -[`src/sw.js`]: https://github.com/magento/pwa-studio/blob/master/packages/venia-concept/src/sw.js +[`src/ServiceWorker/sw.js`]: https://github.com/magento/pwa-studio/blob/master/packages/venia-concept/src/ServiceWorker/sw.js [workbox]: https://developers.google.com/web/tools/workbox/ [caching strategies]: https://developers.google.com/web/tools/workbox/modules/workbox-strategies [stale-while-revalidate]: https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#stale-while-revalidate diff --git a/pwa-devdocs/src/technologies/overview/index.md b/pwa-devdocs/src/technologies/overview/index.md index fe41d3f8ab..62d0d286d4 100644 --- a/pwa-devdocs/src/technologies/overview/index.md +++ b/pwa-devdocs/src/technologies/overview/index.md @@ -2,48 +2,75 @@ title: Overview --- -This page provides a brief description of a Progressive Web App (PWA) and its relationship to the Magento PWA Studio project. +Magento's PWA Studio is a set of tools that let you create Progressive Web Apps (PWA). +This page provides a brief description of a Progressive Web App and its relationship to the PWA Studio project. ## What is a Progressive Web App -A Progressive Web App, or PWA, is a web application that uses modern web technologies and design patterns to provide a reliable, fast, and engaging user experience. +A Progressive Web App, or PWA, is a term for any web application that uses modern web technologies and design patterns to provide a reliable, fast, and engaging user experience. The following features define a basic PWA website: - **Fast** - PWA sites use a variety of performance optimization strategies to provide a responsive experience or load content fast, even on slow networks. - **Secure** - PWA sites use HTTPS connections for enhanced security. -- **Responsive** - PWA sites implement responsive design strategies to provide a consistent experience on desktops, tablets, and mobile devices. -- **Cross-browser compatible** - PWA sites work equally well on all modern browsers, such as Chrome, Edge, Firefox, Safari. +- **Responsive** - PWA sites implement responsive design strategies to provide a consistent experience on desktops, tablets, and mobile devices. +- **Cross-browser compatible** - PWA sites work equally well on all modern browsers, such as Chrome, Edge, Firefox, Safari. - **Offline Mode** - PWA sites cache content to ensure that some content can be served when a user is offline. - **Mobile "Install"** - Mobile users can add PWA sites to their home screens and even receive Push notifications from the site. - **Shareable content** - Each page in a PWA site has a unique URL that can be shared with other apps or social media. -This strategy is known as the [RAIL](https://web.dev/rail/) model: +The [RAIL][] model lays out the user-centric goals for PWA websites: - **Response** – An application is receptive to the user's request. - **Animation** – It shows a movement to keep the user pausing. - **Idle** – A PWA utilizes the "idle" second to cache content. - **Load** – It loads under a moment. +Learn more about Progressive Web Apps: + +- [web.dev][] +- [developer.mozilla.org][] +- [developers.google.com][] + ## What is the Magento PWA Studio project ![pwa studio overview][] -The Magento PWA Studio project is a set of developer tools that allow for the development, deployment, and maintenance of a PWA storefront on top of Magento 2. +The Magento PWA Studio project is a set of developer tools and libraries that let you develop, deploy, and maintain a PWA storefront on top of a Magento 2 backend. It uses modern [tools and libraries][] to create a build system and framework that adheres to the Magento principle of extensibility. -The Magento PWA Studio project provides the following tools: +### Build tools + +The `pwa-buildpack` package contains the main build and development tools for your PWA Studio project. +It provides features such as project setup tools, configuration management, and an extensibility framework. + +When you use the CLI tool in this package to [set up a new storefront project][], it bundles and incorporates these tools into your new project to help you get started. + +### Custom React hooks and component + +The `venia-ui` and `peregrine` packages contain custom React hooks and components for your PWA Studio project. + +The `venia-ui` package provides React components that render the HTML structure of UI components in your storefront. +It uses components from the `peregrine` package, which provide components that manage state, calculate values, and fetch data from the backend. -- **[pwa-buildpack][] CLI tools** - Contains the main build and development tools for a Magento PWA. -- **[Peregrine][] hooks and components** - Contains a collection of useful components and custom React hooks for a Magento PWA. -- **[Venia][] store and visual components** - The Venia package contains a proof of concept Magento 2 storefront built using the PWA Studio tools. - It also provides visual components you can use in your own projects. -- **[UPWARD][]** - A specification for a file that determines the behavior of the application server. - The project provides [UPWARD-JS][], which is a JavaScript implementation of an UPWARD server. -- **[pwastudio.io][]** - The project provides documentation to help guide developers towards creating a Magento PWA storefront. -- **Shared Magento server** - Developers have access to a Magento application running in the Cloud to help jumpstart storefront development. - This server contains sample data and is maintained by the team to ensure that you are developing on the latest version of Magento. - This shared instance is open to all PWA Studio developers. +These packages work together to provide features for your storefront project, but you can also pick and choose which components you need for your own customizations. + +### Demo storefront and backend + +The `venia-concept` package provides a template for a PWA Studio storefront project. +When you [set up a new storefront project][], you get a copy of the content in this package, which is a fully operational storefront you can customize. + +Magento also provides a shared Magento server to all PWA Studio developers to help you get started with development. +The PWA Studio team updates and maintains this Magento server to ensure you are developing on the latest Magento version. +This server also contains sample data for a fashion store to show the different features available from PWA Studio libraries. + +### Other notable packages + +Other notable packages in PWA Studio include: + +- **[pwastudio.io][]** - Provides documentation to help guide developers towards creating a Magento PWA storefront +- **[UPWARD][]** - A proxy-server concept that describes a highly configurable server that sits between the PWA storefront and backend services, such as Magento +- **[PageBuilder][]** - PageBuilder extension for PWA Studio [tools and libraries]: {% link technologies/tools-libraries/index.md %} [pwa-buildpack]: {% link pwa-buildpack/index.md %} @@ -52,5 +79,12 @@ The Magento PWA Studio project provides the following tools: [upward]: {% link technologies/upward/index.md %} [upward-js]: {% link technologies/upward/reference-implementation/index.md %} [pwa studio overview]: {%link technologies/overview/images/pwa-studio-developer-overview.png %} +[set up a new storefront project]: <{%link tutorials/pwa-studio-fundamentals/project-setup/index.md %}> +[pagebuilder]: <{%link pagebuilder/index.md %}> [pwastudio.io]: https://pwastudio.io +[web.dev]: https://web.dev/progressive-web-apps/ +[developers.google.com]: https://developers.google.com/web/updates/2015/12/getting-started-pwa +[developer.mozilla.org]: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps +[rail]: https://web.dev/rail/ +