Create React App with AMP
To see it in action, go to http://choumx.github.io/amp-pwa.
Table of Contents
- User Guide
- Changes to
git clone email@example.com:choumx/amp-pwa.git cd amp-pwa npm install npm start
In a separate terminal, start the development API server:
npm start|test|run build
This project uses the same development workflow as
npm startruns the app in development mode.
npm testruns the test watcher in an interactive mode.
npm run buildbuilds the app for production to the
create-react-app's documentation for more detail.
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
This project adds modern web features to
- 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.
create-react-app, this project adds a small number of new dependencies:
sw-precachegenerates a production-ready service worker for precaching and other progressive enhancements.
expressis used to run the development API server,
react-bootstrapcan be easily removed for your choice of UI framework.
amp-pwa/ content/ manifest.webmanifest server.js service-worker.tmpl sw-precache-config.json
content/contains sample AMP documents displayed by the app.
manifest.webmanifestcontains app metadata for native support in Chrome on Android.
service-worker.tmplis a customized service worker template for
sw-precachewhich assets to precache and which resources to cache at runtime.
- Service workers are not yet supported by all browsers.