diff --git a/aio/content/guide/accessibility.md b/aio/content/guide/accessibility.md index 082c8c3a00..0520d92755 100644 --- a/aio/content/guide/accessibility.md +++ b/aio/content/guide/accessibility.md @@ -12,7 +12,7 @@ work well for all users, including those who rely on assistive technologies.
- For the sample app that this page describes, see the . + For the sample application that this page describes, see the .
@@ -84,7 +84,7 @@ You can see [`MatFormField`](https://material.angular.io/components/form-field/o ## Case study: Building a custom progress bar -The following example shows how to make a simple progress bar accessible by using host binding to control accessibility-related attributes. +The following example shows how to make a progress bar accessible by using host binding to control accessibility-related attributes. * The component defines an accessibility-enabled element with both the standard HTML attribute `role`, and ARIA attributes. The ARIA attribute `aria-valuenow` is bound to the user's input. diff --git a/aio/content/guide/app-shell.md b/aio/content/guide/app-shell.md index 1cd0f86f3b..b888676509 100644 --- a/aio/content/guide/app-shell.md +++ b/aio/content/guide/app-shell.md @@ -1,9 +1,9 @@ # App shell -App shell is a way to render a portion of your application via a route at build time. +Application shell is a way to render a portion of your application using a route at build time. It can improve the user experience by quickly launching a static rendered page (a skeleton common to all pages) while the browser downloads the full client version and switches to it automatically after the code loads. -This gives users a meaningful first paint of your application that appears quickly because the browser can simply render the HTML and CSS without the need to initialize any JavaScript. +This gives users a meaningful first paint of your application that appears quickly because the browser can render the HTML and CSS without the need to initialize any JavaScript. Learn more in [The App Shell Model](https://developers.google.com/web/fundamentals/architecture/app-shell). @@ -18,7 +18,7 @@ For an existing application, you have to manually add the `RouterModule` and def ## Step 2: Create the app shell -Use the CLI to automatically create the app shell. +Use the CLI to automatically create the application shell. ng generate app-shell @@ -87,4 +87,4 @@ Or to use the production configuration. ng run my-app:app-shell:production -To verify the build output, open `dist/my-app/browser/index.html`. Look for default text `app-shell works!` to show that the app shell route was rendered as part of the output. +To verify the build output, open `dist/my-app/browser/index.html`. Look for default text `app-shell works!` to show that the application shell route was rendered as part of the output. diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md index 366329f195..b9a13c0308 100644 --- a/aio/content/guide/deployment.md +++ b/aio/content/guide/deployment.md @@ -13,7 +13,7 @@ Before fully deploying your application, you can test the process, build configu ### Building and serving from disk During development, you typically use the `ng serve` command to build, watch, and serve the application from local memory, using [webpack-dev-server](https://webpack.js.org/guides/development/#webpack-dev-server). -When you are ready to deploy, however, you must use the `ng build` command to build the app and deploy the build artifacts elsewhere. +When you are ready to deploy, however, you must use the `ng build` command to build the application and deploy the build artifacts elsewhere. Both `ng build` and `ng serve` clear the output folder before they build the project, but only the `ng build` command writes the generated build artifacts to the output folder. @@ -82,7 +82,7 @@ In the table below, you can find a list of packages which implement deployment f | [NPM](https://npmjs.com/) | [`ngx-deploy-npm`](https://npmjs.org/package/ngx-deploy-npm) | | [Amazon Cloud S3](https://aws.amazon.com/s3/?nc2=h_ql_prod_st_s3) | [`@jefiozie/ngx-aws-deploy`](https://www.npmjs.com/package/@jefiozie/ngx-aws-deploy) | -If you're deploying to a self-managed server or there's no builder for your favorite cloud platform, you can either create a builder that allows you to use the `ng deploy` command, or read through this guide to learn how to manually deploy your app. +If you're deploying to a self-managed server or there's no builder for your favorite cloud platform, you can either create a builder that allows you to use the `ng deploy` command, or read through this guide to learn how to manually deploy your application. ### Basic deployment to a remote server @@ -112,8 +112,8 @@ To deploy your Angular application to [GitHub Pages](https://help.github.com/art 1. [Create a GitHub repository](https://help.github.com/articles/create-a-repo/) for your project. -1. Configure `git` in your local project by adding a remote that specifies the GitHub repo you created in previous step. - GitHub provides these commands when you create the repo so that you can copy and paste them at your command prompt. +1. Configure `git` in your local project by adding a remote that specifies the GitHub repository you created in previous step. + GitHub provides these commands when you create the repository so that you can copy and paste them at your command prompt. The commands should be similar to the following, though GitHub fills in your project-specific settings for you: ```sh @@ -165,17 +165,17 @@ This section covers changes you may have to make to the server or to files deplo ### Routed apps must fallback to `index.html` -Angular apps are perfect candidates for serving with a simple static HTML server. +Angular applications are perfect candidates for serving with a simple static HTML server. You don't need a server-side engine to dynamically compose application pages because Angular does that on the client-side. -If the app uses the Angular router, you must configure the server +If the application uses the Angular router, you must configure the server to return the application's host page (`index.html`) when asked for a file that it does not have. {@a deep-link} A routed application should support "deep links". -A _deep link_ is a URL that specifies a path to a component inside the app. +A _deep link_ is a URL that specifies a path to a component inside the application. For example, `http://www.mysite.com/heroes/42` is a _deep link_ to the hero detail page that displays the hero with `id: 42`. @@ -264,7 +264,7 @@ modified to serve `index.html`: [directly configure](https://github.com/isaacs/github/issues/408) the GitHub Pages server, but you can add a 404 page. Copy `index.html` into `404.html`. -It will still be served as the 404 response, but the browser will process that page and load the app properly. +It will still be served as the 404 response, but the browser will process that page and load the application properly. It's also a good idea to [serve from `docs/` on master](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch) and to @@ -315,7 +315,7 @@ See [`ng build`](cli/build) for more about CLI build options and what they do. ### Enable runtime production mode -In addition to build optimizations, Angular also has a runtime production mode. Angular apps run in development mode by default, as you can see by the following message on the browser console: +In addition to build optimizations, Angular also has a runtime production mode. Angular applications run in development mode by default, as you can see by the following message on the browser console: @@ -333,7 +333,7 @@ runtime production mode. ### Lazy loading You can dramatically reduce launch time by only loading the application modules that -absolutely must be present when the app starts. +absolutely must be present when the application starts. Configure the Angular Router to defer loading of all other modules (and their associated code), either by [waiting until the app has launched](guide/router-tutorial-toh#preloading "Preloading") @@ -345,7 +345,7 @@ them on demand.
Don't eagerly import something from a lazy-loaded module
If you mean to lazy-load a module, be careful not to import it -in a file that's eagerly loaded when the app starts (such as the root `AppModule`). +in a file that's eagerly loaded when the application starts (such as the root `AppModule`). If you do that, the module will be loaded immediately. The bundling configuration must take lazy loading into consideration. @@ -366,8 +366,8 @@ which automatically recognizes lazy-loaded `NgModules` and creates separate bund You can make better decisions about what to optimize and how when you have a clear and accurate understanding of what's making the application slow. The cause may not be what you think it is. -You can waste a lot of time and money optimizing something that has no tangible benefit or even makes the app slower. -You should measure the app's actual behavior when running in the environments that are important to you. +You can waste a lot of time and money optimizing something that has no tangible benefit or even makes the application slower. +You should measure the application's actual behavior when running in the environments that are important to you. The @@ -391,7 +391,7 @@ Install `source-map-explorer`: -Build your app for production _including the source maps_ +Build your application for production _including the source maps_ @@ -419,7 +419,7 @@ The following example displays the graph for the _main_ bundle. The `source-map-explorer` analyzes the source map generated with the bundle and draws a map of all dependencies, showing exactly which classes are included in the bundle. -Here's the output for the _main_ bundle of an example app called `cli-quickstart`. +Here's the output for the _main_ bundle of an example application called `cli-quickstart`.
quickstart sourcemap explorer @@ -442,13 +442,13 @@ See also the [*APP_BASE_HREF*](api/common/APP_BASE_HREF "API: APP_BASE_HREF") al
In development, you typically start the server in the folder that holds `index.html`. -That's the root folder and you'd add `` near the top of `index.html` because `/` is the root of the app. +That's the root folder and you'd add `` near the top of `index.html` because `/` is the root of the application. -But on the shared or production server, you might serve the app from a subfolder. -For example, when the URL to load the app is something like `http://www.mysite.com/my/app/`, +But on the shared or production server, you might serve the application from a subfolder. +For example, when the URL to load the application is something like `http://www.mysite.com/my/app/`, the subfolder is `my/app/` and you should add `` to the server version of the `index.html`. -When the `base` tag is mis-configured, the app fails to load and the browser console displays `404 - Not Found` errors +When the `base` tag is mis-configured, the application fails to load and the browser console displays `404 - Not Found` errors for the missing files. Look at where it _tried_ to find those files and adjust the base tag appropriately. {@a differential-loading} @@ -655,7 +655,7 @@ In `angular.json` add two new configuration sections under the `build` and `serv -You can then run the `ng serve` command with this configuration. Make sure to replace `` (in `":build:es5"`) with the actual name of the app, as it appears under `projects` in `angular.json`. For example, if your app name is `myAngularApp` the config will become `"browserTarget": "myAngularApp:build:es5"`. +You can then run the `ng serve` command with this configuration. Make sure to replace `` (in `":build:es5"`) with the actual name of the app, as it appears under `projects` in `angular.json`. For example, if your application name is `myAngularApp` the configuration will become `"browserTarget": "myAngularApp:build:es5"`. @@ -727,7 +727,7 @@ Create an [ES5 serve configuration](guide/deployment#configuring-serve-for-es5) -You can then run the `ng e2e` command with this configuration. Make sure to replace `` (in `":serve:es5"`) with the actual name of the app, as it appears under `projects` in `angular.json`. For example, if your app name is `myAngularApp` the config will become `"devServerTarget": "myAngularApp:serve:es5"`. +You can then run the `ng e2e` command with this configuration. Make sure to replace `` (in `":serve:es5"`) with the actual name of the app, as it appears under `projects` in `angular.json`. For example, if your application name is `myAngularApp` the configuration will become `"devServerTarget": "myAngularApp:serve:es5"`. diff --git a/aio/content/guide/lightweight-injection-tokens.md b/aio/content/guide/lightweight-injection-tokens.md index 0849eab28a..b3afb9aa64 100644 --- a/aio/content/guide/lightweight-injection-tokens.md +++ b/aio/content/guide/lightweight-injection-tokens.md @@ -9,10 +9,10 @@ This normally ensures that if a provided component or service is never actually However, due to the way Angular stores injection tokens, it is possible that such an unused component or service can end up in the bundle anyway. This page describes a dependency-injection design pattern that supports proper tree-shaking by using lightweight injection tokens. -The lightweight injection token design pattern is especially important for library developers. It ensures that when an application uses only some of your library's capabilities, the unused code can be eliminated from the client's app bundle. +The lightweight injection token design pattern is especially important for library developers. It ensures that when an application uses only some of your library's capabilities, the unused code can be eliminated from the client's application bundle. -When an application uses your library, there might be some services that your library supplies which the client app doesn't use. -In this case, the app developer should expect that service to be tree-shaken, and not contribute to the size of the compiled app. +When an application uses your library, there might be some services that your library supplies which the client application doesn't use. +In this case, the application developer should expect that service to be tree-shaken, and not contribute to the size of the compiled application. Because the application developer cannot know about or remedy a tree-shaking problem in the library, it is the responsibility of the library developer to do so. To prevent the retention of unused components, your library should use the lightweight injection token design pattern. diff --git a/aio/content/guide/reusable-animations.md b/aio/content/guide/reusable-animations.md index 3a8e54eb4d..fe3b44f1ea 100644 --- a/aio/content/guide/reusable-animations.md +++ b/aio/content/guide/reusable-animations.md @@ -13,7 +13,7 @@ The [AnimationOptions](api/animations/AnimationOptions) interface in Angular ani ## Creating reusable animations -To create a reusable animation, use the [`animation()`](api/animations/animation) method to define an animation in a separate `.ts` file and declare this animation definition as a `const` export variable. You can then import and reuse this animation in any of your app components using the [`useAnimation()`](api/animations/useAnimation) API. +To create a reusable animation, use the [`animation()`](api/animations/animation) method to define an animation in a separate `.ts` file and declare this animation definition as a `const` export variable. You can then import and reuse this animation in any of your application components using the [`useAnimation()`](api/animations/useAnimation) API. diff --git a/aio/content/guide/route-animations.md b/aio/content/guide/route-animations.md index 924380a394..0be4ae050e 100644 --- a/aio/content/guide/route-animations.md +++ b/aio/content/guide/route-animations.md @@ -47,7 +47,7 @@ The following configuration defines the possible routes for the application. The `home` and `about` paths are associated with the `HomeComponent` and `AboutComponent` views. The route configuration tells the Angular router to instantiate the `HomeComponent` and `AboutComponent` views when the navigation matches the corresponding path. -In addition to `path` and `component`, the `data` property of each route defines the key animation-specific configuration associated with a route. The `data` property value is passed into `AppComponent` when the route changes. You can also pass additional data in route config that is consumed within the animation. The data property value has to match the transitions defined in the `routeAnimation` trigger, which we'll define later. +In addition to `path` and `component`, the `data` property of each route defines the key animation-specific configuration associated with a route. The `data` property value is passed into `AppComponent` when the route changes. You can also pass additional data in route configuration that is consumed within the animation. The data property value has to match the transitions defined in the `routeAnimation` trigger, which we'll define later.
diff --git a/aio/content/guide/schematics-for-libraries.md b/aio/content/guide/schematics-for-libraries.md index 727bb9c54a..cefa7bf4d1 100644 --- a/aio/content/guide/schematics-for-libraries.md +++ b/aio/content/guide/schematics-for-libraries.md @@ -202,7 +202,7 @@ For details of these data structures and syntax, see the [Schematics README](htt -This simple rule factory returns the tree without modification. +This rule factory returns the tree without modification. The options are the option values passed through from the `ng generate` command. ## Define a generation rule @@ -322,7 +322,7 @@ ng generate my-lib:my-service --name my-data -In the console, you will see that the schematic was run and the `my-data.service.ts` file was created in your app folder. +In the console, you will see that the schematic was run and the `my-data.service.ts` file was created in your application folder. diff --git a/aio/content/guide/security.md b/aio/content/guide/security.md index fb7f318b2a..fc87af1afb 100644 --- a/aio/content/guide/security.md +++ b/aio/content/guide/security.md @@ -180,7 +180,7 @@ safer coding practices. Trusted Types can also help simplify the auditing of app
-Trusted Types might not yet be available in all browsers your application targets. In the case your Trusted-Types-enabled application runs in a browser that doesn't support Trusted Types, the functionality of the application will be preserved, and your application will be guarded against XSS via Angular's DomSanitizer. See [caniuse.com/trusted-types](https://caniuse.com/trusted-types) for the current browser support. +Trusted Types might not yet be available in all browsers your application targets. In the case your Trusted-Types-enabled application runs in a browser that doesn't support Trusted Types, the functionality of the application will be preserved, and your application will be guarded against XSS by way of Angular's DomSanitizer. See [caniuse.com/trusted-types](https://caniuse.com/trusted-types) for the current browser support.
diff --git a/aio/content/guide/service-worker-communications.md b/aio/content/guide/service-worker-communications.md index 3b971cac76..70cc7750be 100644 --- a/aio/content/guide/service-worker-communications.md +++ b/aio/content/guide/service-worker-communications.md @@ -1,6 +1,6 @@ # Service worker communication -Importing `ServiceWorkerModule` into your `AppModule` doesn't just register the service worker, it also provides a few services you can use to interact with the service worker and control the caching of your app. +Importing `ServiceWorkerModule` into your `AppModule` doesn't just register the service worker, it also provides a few services you can use to interact with the service worker and control the caching of your application. #### Prerequisites @@ -10,13 +10,13 @@ A basic understanding of the following: ## `SwUpdate` service -The `SwUpdate` service gives you access to events that indicate when the service worker has discovered an available update for your app or when it has activated such an update—meaning it is now serving content from that update to your app. +The `SwUpdate` service gives you access to events that indicate when the service worker has discovered an available update for your application or when it has activated such an update—meaning it is now serving content from that update to your application. The `SwUpdate` service supports four separate operations: -* Getting notified of *available* updates. These are new versions of the app to be loaded if the page is refreshed. -* Getting notified of update *activation*. This is when the service worker starts serving a new version of the app immediately. +* Getting notified of *available* updates. These are new versions of the application to be loaded if the page is refreshed. +* Getting notified of update *activation*. This is when the service worker starts serving a new version of the application immediately. * Asking the service worker to check the server for new updates. -* Asking the service worker to activate the latest version of the app for the current tab. +* Asking the service worker to activate the latest version of the application for the current tab. ### Available and activated updates @@ -30,31 +30,31 @@ You can use these events to notify the user of a pending update or to refresh th ### Checking for updates It's possible to ask the service worker to check if any updates have been deployed to the server. -The service worker checks for updates during initialization and on each navigation request—that is, when the user navigates from a different address to your app. +The service worker checks for updates during initialization and on each navigation request—that is, when the user navigates from a different address to your application. However, you might choose to manually check for updates if you have a site that changes frequently or want updates to happen on a schedule. Do this with the `checkForUpdate()` method: -This method returns a `Promise` which indicates that the update check has completed successfully, though it does not indicate whether an update was discovered as a result of the check. Even if one is found, the service worker must still successfully download the changed files, which can fail. If successful, the `available` event will indicate availability of a new version of the app. +This method returns a `Promise` which indicates that the update check has completed successfully, though it does not indicate whether an update was discovered as a result of the check. Even if one is found, the service worker must still successfully download the changed files, which can fail. If successful, the `available` event will indicate availability of a new version of the application.
-In order to avoid negatively affecting the initial rendering of the page, `ServiceWorkerModule` waits for up to 30 seconds by default for the app to stabilize, before registering the ServiceWorker script. -Constantly polling for updates, for example, with [setInterval()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) or RxJS' [interval()](https://rxjs.dev/api/index/function/interval), will prevent the app from stabilizing and the ServiceWorker script will not be registered with the browser until the 30 seconds upper limit is reached. +In order to avoid negatively affecting the initial rendering of the page, `ServiceWorkerModule` waits for up to 30 seconds by default for the application to stabilize, before registering the ServiceWorker script. +Constantly polling for updates, for example, with [setInterval()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) or RxJS' [interval()](https://rxjs.dev/api/index/function/interval), will prevent the application from stabilizing and the ServiceWorker script will not be registered with the browser until the 30 seconds upper limit is reached. Note that this is true for any kind of polling done by your application. Check the {@link ApplicationRef#isStable isStable} documentation for more information. -You can avoid that delay by waiting for the app to stabilize first, before starting to poll for updates, as shown in the example above. +You can avoid that delay by waiting for the application to stabilize first, before starting to poll for updates, as shown in the example above. Alternatively, you might want to define a different {@link SwRegistrationOptions#registrationStrategy registration strategy} for the ServiceWorker.
### Forcing update activation -If the current tab needs to be updated to the latest app version immediately, it can ask to do so with the `activateUpdate()` method: +If the current tab needs to be updated to the latest application version immediately, it can ask to do so with the `activateUpdate()` method: @@ -67,25 +67,25 @@ Therefore, it is recommended to reload the page once the promise returned by `ac ### Handling an unrecoverable state -In some cases, the version of the app used by the service worker to serve a client might be in a broken state that cannot be recovered from without a full page reload. +In some cases, the version of the application used by the service worker to serve a client might be in a broken state that cannot be recovered from without a full page reload. For example, imagine the following scenario: -- A user opens the app for the first time and the service worker caches the latest version of the app. - Let's assume the app's cached assets include `index.html`, `main..js` and `lazy-chunk..js`. -- The user closes the app and does not open it for a while. -- After some time, a new version of the app is deployed to the server. +- A user opens the application for the first time and the service worker caches the latest version of the application. + Let's assume the application's cached assets include `index.html`, `main..js` and `lazy-chunk..js`. +- The user closes the application and does not open it for a while. +- After some time, a new version of the application is deployed to the server. This newer version includes the files `index.html`, `main..js` and `lazy-chunk..js` (note that the hashes are different now, because the content of the files has changed). The old version is no longer available on the server. - In the meantime, the user's browser decides to evict `lazy-chunk..js` from its cache. Browsers may decide to evict specific (or all) resources from a cache in order to reclaim disk space. -- The user opens the app again. +- The user opens the application again. The service worker serves the latest version known to it at this point, namely the old version (`index.html` and `main..js`). -- At some later point, the app requests the lazy bundle, `lazy-chunk..js`. +- At some later point, the application requests the lazy bundle, `lazy-chunk..js`. - The service worker is unable to find the asset in the cache (remember that the browser evicted it). Nor is it able to retrieve it from the server (since the server now only has `lazy-chunk..js` from the newer version). In the above scenario, the service worker is not able to serve an asset that would normally be cached. -That particular app version is broken and there is no way to fix the state of the client without reloading the page. +That particular application version is broken and there is no way to fix the state of the client without reloading the page. In such cases, the service worker notifies the client by sending an `UnrecoverableStateEvent` event. You can subscribe to `SwUpdate#unrecoverable` to be notified and handle these errors. diff --git a/aio/content/guide/service-worker-config.md b/aio/content/guide/service-worker-config.md index 140fb46908..5b19f7da1d 100644 --- a/aio/content/guide/service-worker-config.md +++ b/aio/content/guide/service-worker-config.md @@ -37,8 +37,8 @@ Each section of the configuration file is described below. ## `appData` -This section enables you to pass any data you want that describes this particular version of the app. -The `SwUpdate` service includes that data in the update notifications. Many apps use this section to provide additional information for the display of UI popups, notifying users of the available update. +This section enables you to pass any data you want that describes this particular version of the application. +The `SwUpdate` service includes that data in the update notifications. Many applications use this section to provide additional information for the display of UI popups, notifying users of the available update. {@a index-file} ## `index` @@ -47,7 +47,7 @@ Specifies the file that serves as the index page to satisfy navigation requests. ## `assetGroups` -*Assets* are resources that are part of the app version that update along with the app. They can include resources loaded from the page's origin as well as third-party resources loaded from CDNs and other external URLs. As not all such external URLs may be known at build time, URL patterns can be matched. +*Assets* are resources that are part of the application version that update along with the application. They can include resources loaded from the page's origin as well as third-party resources loaded from CDNs and other external URLs. As not all such external URLs may be known at build time, URL patterns can be matched. This field contains an array of asset groups, each of which defines a set of asset resources and the policy by which they are cached. @@ -101,7 +101,7 @@ A `name` is mandatory. It identifies this particular group of assets between ver The `installMode` determines how these resources are initially cached. The `installMode` can be either of two values: -* `prefetch` tells the Angular service worker to fetch every single listed resource while it's caching the current version of the app. This is bandwidth-intensive but ensures resources are available whenever they're requested, even if the browser is currently offline. +* `prefetch` tells the Angular service worker to fetch every single listed resource while it's caching the current version of the application. This is bandwidth-intensive but ensures resources are available whenever they're requested, even if the browser is currently offline. * `lazy` does not cache any of the resources up front. Instead, the Angular service worker only caches resources for which it receives requests. This is an on-demand caching mode. Resources that are never requested will not be cached. This is useful for things like images at different resolutions, so the service worker only caches the correct assets for the particular screen and orientation. @@ -109,7 +109,7 @@ Defaults to `prefetch`. ### `updateMode` -For resources already in the cache, the `updateMode` determines the caching behavior when a new version of the app is discovered. Any resources in the group that have changed since the previous version are updated in accordance with `updateMode`. +For resources already in the cache, the `updateMode` determines the caching behavior when a new version of the application is discovered. Any resources in the group that have changed since the previous version are updated in accordance with `updateMode`. * `prefetch` tells the service worker to download and cache the changed resources immediately. @@ -124,7 +124,7 @@ This section describes the resources to cache, broken up into the following grou * `files` lists patterns that match files in the distribution directory. These can be single files or glob-like patterns that match a number of files. * `urls` includes both URLs and URL patterns that will be matched at runtime. These resources are not fetched directly and do not have content hashes, but they will be cached according to their HTTP headers. This is most useful for CDNs such as the Google Fonts service.
- _(Negative glob patterns are not supported and `?` will be matched literally; i.e. it will not match any character other than `?`.)_ + _(Negative glob patterns are not supported and `?` will be matched literally; that is, it will not match any character other than `?`.)_ ### `cacheQueryOptions` @@ -134,7 +134,7 @@ These options are used to modify the matching behavior of requests. They are pas ## `dataGroups` -Unlike asset resources, data requests are not versioned along with the app. They're cached according to manually-configured policies that are more useful for situations such as API requests and other data dependencies. +Unlike asset resources, data requests are not versioned along with the application. They're cached according to manually-configured policies that are more useful for situations such as API requests and other data dependencies. This field contains an array of data groups, each of which defines a set of data resources and the policy by which they are cached. @@ -189,7 +189,7 @@ A list of URL patterns. URLs that match these patterns are cached according to t * `?` is matched literally; that is, it matches *only* the character `?`. ### `version` -Occasionally APIs change formats in a way that is not backward-compatible. A new version of the app may not be compatible with the old API format and thus may not be compatible with existing cached resources from that API. +Occasionally APIs change formats in a way that is not backward-compatible. A new version of the application may not be compatible with the old API format and thus may not be compatible with existing cached resources from that API. `version` provides a mechanism to indicate that the resources being cached have been updated in a backwards-incompatible way, and that the old cache entries—those from previous versions—should be discarded. @@ -240,7 +240,7 @@ To use this strategy set `strategy` to `freshness` and `timeout` to `0u` in `cac This will essentially do the following: 1. Try to fetch from the network first. -2. If the network request does not complete after 0ms (i.e. immediately), fall back to the cache (ignoring cache age). +2. If the network request does not complete after 0ms (that is, immediately), fall back to the cache (ignoring cache age). 3. Once the network request completes, update the cache for future requests. 4. If the resource does not exist in the cache, wait for the network request anyway. @@ -264,7 +264,7 @@ The ServiceWorker will redirect navigation requests that don't match any `asset` By default, these criteria are: -1. The URL must not contain a file extension (i.e. a `.`) in the last path segment. +1. The URL must not contain a file extension (that is, a `.`) in the last path segment. 2. The URL must not contain `__`.
@@ -277,7 +277,7 @@ To configure whether navigation requests are sent through to the network or not, While these default criteria are fine in most cases, it is sometimes desirable to configure different rules. For example, you may want to ignore specific routes (that are not part of the Angular app) and pass them through to the server. -This field contains an array of URLs and [glob-like](#glob-patterns) URL patterns that will be matched at runtime. It can contain both negative patterns (i.e. patterns starting with `!`) and non-negative patterns and URLs. +This field contains an array of URLs and [glob-like](#glob-patterns) URL patterns that will be matched at runtime. It can contain both negative patterns (that is, patterns starting with `!`) and non-negative patterns and URLs. Only requests whose URLs match _any_ of the non-negative URLs/patterns and _none_ of the negative ones will be considered navigation requests. The URL query will be ignored when matching. diff --git a/aio/content/guide/service-worker-devops.md b/aio/content/guide/service-worker-devops.md index 3c8de12006..f216b253fa 100644 --- a/aio/content/guide/service-worker-devops.md +++ b/aio/content/guide/service-worker-devops.md @@ -1,6 +1,6 @@ # Service worker in production -This page is a reference for deploying and supporting production apps that use the Angular service worker. It explains how the Angular service worker fits into the larger production environment, the service worker's behavior under various conditions, and available resources and fail-safes. +This page is a reference for deploying and supporting production applications that use the Angular service worker. It explains how the Angular service worker fits into the larger production environment, the service worker's behavior under various conditions, and available resources and fail-safes. #### Prerequisites @@ -9,23 +9,23 @@ A basic understanding of the following: ## Service worker and caching of app resources -Conceptually, you can imagine the Angular service worker as a forward cache or a CDN edge that is installed in the end user's web browser. The service worker's job is to satisfy requests made by the Angular app for resources or data from a local cache, without needing to wait for the network. Like any cache, it has rules for how content is expired and updated. +Conceptually, you can imagine the Angular service worker as a forward cache or a CDN edge that is installed in the end user's web browser. The service worker's job is to satisfy requests made by the Angular application for resources or data from a local cache, without needing to wait for the network. Like any cache, it has rules for how content is expired and updated. {@a versions} ### App versions -In the context of an Angular service worker, a "version" is a collection of resources that represent a specific build of the Angular app. Whenever a new build of the app is deployed, the service worker treats that build as a new version of the app. This is true even if only a single file is updated. At any given time, the service worker may have multiple versions of the app in its cache and it may be serving them simultaneously. For more information, see the [App tabs](guide/service-worker-devops#tabs) section below. +In the context of an Angular service worker, a "version" is a collection of resources that represent a specific build of the Angular application. Whenever a new build of the application is deployed, the service worker treats that build as a new version of the application. This is true even if only a single file is updated. At any given time, the service worker may have multiple versions of the application in its cache and it may be serving them simultaneously. For more information, see the [App tabs](guide/service-worker-devops#tabs) section below. -To preserve app integrity, the Angular service worker groups all files into a version together. The files grouped into a version usually include HTML, JS, and CSS files. Grouping of these files is essential for integrity because HTML, JS, and CSS files frequently refer to each other and depend on specific content. For example, an `index.html` file might have a `