From 58ee06c2cc50a6a38c44261455fc4a3fea4dd194 Mon Sep 17 00:00:00 2001 From: Simon Lieschke Date: Fri, 9 Apr 2021 18:03:42 -0400 Subject: [PATCH] Update PWA docs to point at the cra-template-pwa package --- docusaurus/docs/making-a-progressive-web-app.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docusaurus/docs/making-a-progressive-web-app.md b/docusaurus/docs/making-a-progressive-web-app.md index 649fb9cb320..fc8ba0a0da9 100644 --- a/docusaurus/docs/making-a-progressive-web-app.md +++ b/docusaurus/docs/making-a-progressive-web-app.md @@ -39,14 +39,14 @@ case. In addition to creating your local `src/service-worker.js` file, it needs to be registered before it will be used. In order to opt-in to the offline-first behavior, developers should look for the following in their -[`src/index.js`](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/src/index.js) +[`src/index.js`](https://github.com/cra-template/pwa/blob/master/packages/cra-template-pwa/template/src/index.js) file: ```js // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://cra.link/PWA -serviceWorker.unregister(); +serviceWorkerRegistration.unregister(); ``` As the comment states, switching `serviceWorker.unregister()` to @@ -82,7 +82,7 @@ or unreliable network. Note: Resources that are not generated by `webpack`, such as static files that are copied over from your local -[`public/` directory](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/public/) +[`public/` directory](https://github.com/cra-template/pwa/tree/master/packages/cra-template-pwa/template/public/) or third-party resources, will not be precached. You can optionally set up Workbox [routes](https://developers.google.com/web/tools/workbox/guides/route-requests) to apply the runtime caching strategy of your choice to those resources. @@ -128,7 +128,7 @@ following into account: fetched the latest updates that will be available the next time they load the page (showing a "New content is available once existing tabs are closed." message). Showing these messages is currently left as an exercise to the developer, but as a - starting point, you can make use of the logic included in [`src/serviceWorker.js`](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/src/serviceWorker.js), which + starting point, you can make use of the logic included in [`src/serviceWorkerRegistration.js`](https://github.com/cra-template/pwa/blob/master/packages/cra-template-pwa/template/src/serviceWorkerRegistration.js), which demonstrates which service worker lifecycle events to listen for to detect each scenario, and which as a default, only logs appropriate messages to the JavaScript console. @@ -160,11 +160,11 @@ following into account: ## Progressive Web App Metadata The default configuration includes a web app manifest located at -[`public/manifest.json`](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/public/manifest.json), that you can customize with +[`public/manifest.json`](https://github.com/cra-template/pwa/blob/master/packages/cra-template-pwa/template/public/manifest.json), that you can customize with details specific to your web application. When a user adds a web app to their homescreen using Chrome or Firefox on -Android, the metadata in [`manifest.json`](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/public/manifest.json) determines what +Android, the metadata in [`manifest.json`](https://github.com/cra-template/pwa/blob/master/packages/cra-template-pwa/template/public/manifest.json) determines what icons, names, and branding colors to use when the web app is displayed. [The Web App Manifest guide](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/) provides more context about what each field means, and how your customizations