ImgBotApp / amp-pwa

A sample React PWA with AMP content.

Create React App with AMP

A simple React-based progressive web app that displays Accelerated Mobile Page (AMP) content. Built on create-react-app for minimal build configuration.

To see it in action, go to http://choumx.github.io/amp-pwa.

Table of Contents

• User Guide
  • Quick Start
  • npm start|test|run build
  • node server.js
• Changes to create-react-app
  • New dependencies
  • New files
• Limitations

User Guide

Quick Start

git clone [e-mail]:choumx/amp-pwa.git
cd amp-pwa
npm install
npm start

In a separate terminal, start the development API server:

node server.js

npm start|test|run build

This project uses the same development workflow as create-react-app:

• npm start runs the app in development mode.
• npm test runs the test watcher in an interactive mode.
• npm run build builds the app for production to the build folder.

See create-react-app's documentation for more detail.

node server.js

The web server initiated by npm start only serves the app's static content. To serve the AMP content to be displayed by the app, there's a separate Express server in server.js.

For more information on how the web server and API server interact, check out Using create-react-app with a server and Proxying API Requests in Development.

Changes to create-react-app

This project adds modern web features to create-react-app:

• Accelerated mobile page (AMP) content: Displays fast-loading AMP documents within the app shell via Shadow DOM.
• Progressive web: A service worker enables progressive enhancement of AMP content with precaching, offline functionality and an app shell.

New dependencies

Compared to create-react-app, this project adds a small number of new dependencies:

• sw-precache generates a production-ready service worker for precaching and other progressive enhancements.
• express is used to run the development API server, server.js.
• bootstrap and react-bootstrap can be easily removed for your choice of UI framework.

New files

amp-pwa/
  content/
  manifest.webmanifest
  server.js
  service-worker.tmpl
  sw-precache-config.json

• content/ contains sample AMP documents displayed by the app.
• manifest.webmanifest contains app metadata for native support in Chrome on Android.
• service-worker.tmpl is a customized service worker template for sw-precache.
• sw-precache-config.json instructs sw-precache which assets to precache and which resources to cache at runtime.

Limitations

• Service workers are not yet supported by all browsers.