docs: service-worker translation (#315)
* arreglos sugeridos por Alejandro * gramática sugerido por Alejandro en PR
This commit is contained in:
Pato
GitHub
parent
b142d33bbe
commit
e10a578603
84
aio/content/guide/service-worker-intro.en.md
Normal file
84
aio/content/guide/service-worker-intro.en.md
Normal file
@ -0,0 +1,84 @@
|
||||
# Angular service worker introduction
|
||||
|
||||
Service workers augment the traditional web deployment model and empower applications to deliver a user experience with the reliability and performance on par with natively-installed code. Adding a service worker to an Angular application is one of the steps for turning an application into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) (also known as a PWA).
|
||||
|
||||
At its simplest, a service worker is a script that runs in the web browser and manages caching for an application.
|
||||
|
||||
Service workers function as a network proxy. They intercept all outgoing HTTP requests made by the application and can choose how to respond to them. For example, they can query a local cache and deliver a cached response if one is available. Proxying isn't limited to requests made through programmatic APIs, such as `fetch`; it also includes resources referenced in HTML and even the initial request to `index.html`. Service worker-based caching is thus completely programmable and doesn't rely on server-specified caching headers.
|
||||
|
||||
Unlike the other scripts that make up an application, such as the Angular app bundle, the service worker is preserved after the user closes the tab. The next time that browser loads the application, the service worker loads first, and can intercept every request for resources to load the application. If the service worker is designed to do so, it can *completely satisfy the loading of the application, without the need for the network*.
|
||||
|
||||
Even across a fast reliable network, round-trip delays can introduce significant latency when loading the application. Using a service worker to reduce dependency on the network can significantly improve the user experience.
|
||||
|
||||
|
||||
## Service workers in Angular
|
||||
|
||||
Angular applications, as single-page applications, are in a prime position to benefit from the advantages of service workers. Starting with version 5.0.0, Angular ships with a service worker implementation. Angular developers can take advantage of this service worker and benefit from the increased reliability and performance it provides, without needing to code against low-level APIs.
|
||||
|
||||
Angular's service worker is designed to optimize the end user experience of using an application over a slow or unreliable network connection, while also minimizing the risks of serving outdated content.
|
||||
|
||||
The Angular service worker's behavior follows that design goal:
|
||||
|
||||
* Caching an application is like installing a native application. The application is cached as one unit, and all files update together.
|
||||
* A running application continues to run with the same version of all files. It does not suddenly start receiving cached files from a newer version, which are likely incompatible.
|
||||
* When users refresh the application, they see the latest fully cached version. New tabs load the latest cached code.
|
||||
* Updates happen in the background, relatively quickly after changes are published. The previous version of the application is served until an update is installed and ready.
|
||||
* The service worker conserves bandwidth when possible. Resources are only downloaded if they've changed.
|
||||
|
||||
To support these behaviors, the Angular service worker loads a *manifest* file from the server. The manifest describes the resources to cache and includes hashes of every file's contents. When an update to the application is deployed, the contents of the manifest change, informing the service worker that a new version of the application should be downloaded and cached. This manifest is generated from a CLI-generated configuration file called `ngsw-config.json`.
|
||||
|
||||
Installing the Angular service worker is as simple as including an `NgModule`. In addition to registering the Angular service worker with the browser, this also makes a few services available for injection which interact with the service worker and can be used to control it. For example, an application can ask to be notified when a new update becomes available, or an application can ask the service worker to check the server for available updates.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
To make use of all the features of Angular service worker, use the latest versions of Angular and the Angular CLI.
|
||||
|
||||
In order for service workers to be registered, the app must be accessed over HTTPS, not HTTP.
|
||||
Browsers ignore service workers on pages that are served over an insecure connection.
|
||||
The reason is that service workers are quite powerful, so extra care needs to be taken to ensure the service worker script has not been tampered with.
|
||||
|
||||
There is one exception to this rule: to make local development easier, browsers do _not_ require a secure connection when accessing an app on `localhost`.
|
||||
|
||||
### Browser support
|
||||
|
||||
To benefit from the Angular service worker, your app must run in a web browser that supports service workers in general.
|
||||
Currently, service workers are supported in the latest versions of Chrome, Firefox, Edge, Safari, Opera, UC Browser (Android version) and Samsung Internet.
|
||||
Browsers like IE and Opera Mini do not support service workers.
|
||||
|
||||
If the user is accessing your app via a browser that does not support service workers, the service worker is not registered and related behavior such as offline cache management and push notifications does not happen.
|
||||
More specifically:
|
||||
|
||||
* The browser does not download the service worker script and `ngsw.json` manifest file.
|
||||
* Active attempts to interact with the service worker, such as calling `SwUpdate.checkForUpdate()`, return rejected promises.
|
||||
* The observable events of related services, such as `SwUpdate.available`, are not triggered.
|
||||
|
||||
It is highly recommended that you ensure that your app works even without service worker support in the browser.
|
||||
Although an unsupported browser ignores service worker caching, it will still report errors if the app attempts to interact with the service worker.
|
||||
For example, calling `SwUpdate.checkForUpdate()` will return rejected promises.
|
||||
To avoid such an error, you can check whether the Angular service worker is enabled using `SwUpdate.isEnabled()`.
|
||||
|
||||
To learn more about other browsers that are service worker ready, see the [Can I Use](https://caniuse.com/#feat=serviceworkers) page and [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API).
|
||||
|
||||
|
||||
## Related resources
|
||||
|
||||
The rest of the articles in this section specifically address the Angular implementation of service workers.
|
||||
|
||||
* [App Shell](guide/app-shell)
|
||||
* [Service Worker Communication](guide/service-worker-communications)
|
||||
* [Service Worker in Production](guide/service-worker-devops)
|
||||
* [Service Worker Configuration](guide/service-worker-config)
|
||||
|
||||
For more information about service workers in general, see [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers/).
|
||||
|
||||
For more information about browser support, see the [browser support](https://developers.google.com/web/fundamentals/primers/service-workers/#browser_support) section of [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers/), Jake Archibald's [Is Serviceworker ready?](https://jakearchibald.github.io/isserviceworkerready/), and
|
||||
[Can I Use](http://caniuse.com/#feat=serviceworkers).
|
||||
|
||||
For additional recommendations and examples, see:
|
||||
|
||||
* [Precaching with Angular Service Worker](https://web.dev/precaching-with-the-angular-service-worker/)
|
||||
* [Creating a PWA with Angular CLI](https://web.dev/creating-pwa-with-angular-cli/)
|
||||
|
||||
## Next steps
|
||||
|
||||
To begin using Angular service workers, see [Getting Started with service workers](guide/service-worker-getting-started).
|
||||
@ -1,84 +1,84 @@
|
||||
# Angular service worker introduction
|
||||
# Introducción al Service Worker de Angular
|
||||
|
||||
Service workers augment the traditional web deployment model and empower applications to deliver a user experience with the reliability and performance on par with natively-installed code. Adding a service worker to an Angular application is one of the steps for turning an application into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) (also known as a PWA).
|
||||
Los service Workers amplían el modelo de implementación web tradicional y permiten que las aplicaciones brinden una experiencia de usuario con la confiabilidad y el rendimiento a la par del código instalado de forma nativa. Agregar un service worker a una aplicación Angular es uno de los pasos para convertir una aplicación en una [Aplicación web progresiva] (https://developers.google.com/web/progressive-web-apps/) (también conocida como PWA ).
|
||||
|
||||
At its simplest, a service worker is a script that runs in the web browser and manages caching for an application.
|
||||
En su forma más simple, un service worker es un script que se ejecuta en el navegador web y administra el almacenamiento en caché de una aplicación.
|
||||
|
||||
Service workers function as a network proxy. They intercept all outgoing HTTP requests made by the application and can choose how to respond to them. For example, they can query a local cache and deliver a cached response if one is available. Proxying isn't limited to requests made through programmatic APIs, such as `fetch`; it also includes resources referenced in HTML and even the initial request to `index.html`. Service worker-based caching is thus completely programmable and doesn't rely on server-specified caching headers.
|
||||
Los service workers funcionan como un proxy de red. Interceptan todas las solicitudes HTTP salientes realizadas por la aplicación y pueden elegir cómo responderlas. Por ejemplo, pueden consultar un caché local y entregar una respuesta en caché si hay una disponible. El proxy no se limita a las solicitudes realizadas a través de código para consumir API, como "fetch"; también incluye recursos referenciados en HTML e incluso la solicitud inicial a `index.html`. El almacenamiento en caché basado en service workers es, por lo tanto, completamente programable y no depende de los encabezados de almacenamiento en caché especificados por el servidor.
|
||||
|
||||
Unlike the other scripts that make up an application, such as the Angular app bundle, the service worker is preserved after the user closes the tab. The next time that browser loads the application, the service worker loads first, and can intercept every request for resources to load the application. If the service worker is designed to do so, it can *completely satisfy the loading of the application, without the need for the network*.
|
||||
A diferencia de los otros scripts que componen una aplicación, como el paquete de la aplicación Angular, el service worker se conserva después de que el usuario cierre la pestaña. La próxima vez que el navegador cargue la aplicación, el service worker cargará primero y podrá interceptar cada solicitud de recursos para cargar la aplicación. Si el service worker está diseñado para hacerlo, puede *satisfacer completamente la carga de la aplicación, sin necesidad de la red*.
|
||||
|
||||
Even across a fast reliable network, round-trip delays can introduce significant latency when loading the application. Using a service worker to reduce dependency on the network can significantly improve the user experience.
|
||||
Incluso en una red rápida y fiable, los retrasos de ida y vuelta pueden introducir una latencia significativa al cargar la aplicación. El uso de un service worker para reducir la dependencia de la red puede mejorar significativamente la experiencia del usuario.
|
||||
|
||||
|
||||
## Service workers in Angular
|
||||
## Service workers en Angular
|
||||
|
||||
Angular applications, as single-page applications, are in a prime position to benefit from the advantages of service workers. Starting with version 5.0.0, Angular ships with a service worker implementation. Angular developers can take advantage of this service worker and benefit from the increased reliability and performance it provides, without needing to code against low-level APIs.
|
||||
Las aplicaciones de Angular, como aplicaciones de una sola página, están en una posición privilegiada para beneficiarse de las ventajas de los service workers. A partir de la versión 5.0.0, Angular se envía con una implementación del service worker. Los desarrolladores de Angular pueden aprovechar este service worker y beneficiarse de la mayor fiabilidad y rendimiento que proporciona, sin necesidad de codificar con APIs de bajo nivel.
|
||||
|
||||
Angular's service worker is designed to optimize the end user experience of using an application over a slow or unreliable network connection, while also minimizing the risks of serving outdated content.
|
||||
El service worker de Angular está diseñado para optimizar la experiencia del usuario final al usar una aplicación en una conexión de red lenta o poco fiable, al mismo tiempo que minimiza los riesgos de ofrecer contenido desactualizado.
|
||||
|
||||
The Angular service worker's behavior follows that design goal:
|
||||
El comportamiento del service worker de Angular sigue ese objetivo de diseño:
|
||||
|
||||
* Caching an application is like installing a native application. The application is cached as one unit, and all files update together.
|
||||
* A running application continues to run with the same version of all files. It does not suddenly start receiving cached files from a newer version, which are likely incompatible.
|
||||
* When users refresh the application, they see the latest fully cached version. New tabs load the latest cached code.
|
||||
* Updates happen in the background, relatively quickly after changes are published. The previous version of the application is served until an update is installed and ready.
|
||||
* The service worker conserves bandwidth when possible. Resources are only downloaded if they've changed.
|
||||
* El almacenamiento en caché de una aplicación es como instalar una aplicación nativa. La aplicación se almacena en caché como una unidad y todos los archivos se actualizan juntos.
|
||||
* Una aplicación en ejecución continúa ejecutándose con la misma versión de todos los archivos. No comienza a recibir repentinamente archivos en caché de una versión más reciente, que probablemente sean incompatibles.
|
||||
* Cuando los usuarios actualizan la aplicación, ven la última versión completamente almacenada en caché. Las pestañas nuevas cargan el último código almacenado en caché.
|
||||
* Las actualizaciones ocurren en segundo plano, relativamente rápido después de que se publican los cambios. La versión anterior de la aplicación se sirve hasta que se instala y está lista una actualización.
|
||||
* El service worker conserva el ancho de banda cuando es posible. Los recursos solo se descargan si han cambiado.
|
||||
|
||||
To support these behaviors, the Angular service worker loads a *manifest* file from the server. The manifest describes the resources to cache and includes hashes of every file's contents. When an update to the application is deployed, the contents of the manifest change, informing the service worker that a new version of the application should be downloaded and cached. This manifest is generated from a CLI-generated configuration file called `ngsw-config.json`.
|
||||
Para admitir estos comportamientos, el service worker de Angular carga un archivo * manifiesto * desde el servidor. El manifiesto describe los recursos para almacenar en caché e incluye hashes del contenido de cada archivo. Cuando se implementa una actualización de la aplicación, el contenido del manifiesto cambia e informa al service worker que se debe descargar y almacenar en caché una nueva versión de la aplicación. Este manifiesto se genera a partir de un archivo de configuración generado por CLI llamado `ngsw-config.json`.
|
||||
|
||||
Installing the Angular service worker is as simple as including an `NgModule`. In addition to registering the Angular service worker with the browser, this also makes a few services available for injection which interact with the service worker and can be used to control it. For example, an application can ask to be notified when a new update becomes available, or an application can ask the service worker to check the server for available updates.
|
||||
Instalar el service worker de Angular es tan simple como incluir un `NgModule`. Además de registrar el service worker de Angular en el navegador, esto también hace que algunos servicios estén disponibles para inyección que interactúan con el service worker y se pueden usar para controlarlo. Por ejemplo, una aplicación puede solicitar que se le notifique cuando esté disponible una nueva actualización, o una aplicación puede pedirle al service worker que busque actualizaciones disponibles en el servidor.
|
||||
|
||||
## Prerequisites
|
||||
## Requisitos previos
|
||||
|
||||
To make use of all the features of Angular service worker, use the latest versions of Angular and the Angular CLI.
|
||||
Para hacer uso de todas las características del Angular service worker, use las últimas versiones de Angular y Angular CLI.
|
||||
|
||||
In order for service workers to be registered, the app must be accessed over HTTPS, not HTTP.
|
||||
Browsers ignore service workers on pages that are served over an insecure connection.
|
||||
The reason is that service workers are quite powerful, so extra care needs to be taken to ensure the service worker script has not been tampered with.
|
||||
Para que los service workers se registren, se debe acceder a la aplicación a través de HTTPS, no de HTTP.
|
||||
Los navegadores ignoran a los service workers en las páginas que se sirven a través de una conexión insegura.
|
||||
La razón es que los service workers son bastante poderosos, por lo que se debe tener especial cuidado para garantizar que el script del service worker no se haya alterado.
|
||||
|
||||
There is one exception to this rule: to make local development easier, browsers do _not_ require a secure connection when accessing an app on `localhost`.
|
||||
Hay una excepción a esta regla: para facilitar el desarrollo local, los navegadores _no_ requieren una conexión segura al acceder a una aplicación en `localhost`.
|
||||
|
||||
### Browser support
|
||||
### Soporte de navegador
|
||||
|
||||
To benefit from the Angular service worker, your app must run in a web browser that supports service workers in general.
|
||||
Currently, service workers are supported in the latest versions of Chrome, Firefox, Edge, Safari, Opera, UC Browser (Android version) and Samsung Internet.
|
||||
Browsers like IE and Opera Mini do not support service workers.
|
||||
Para beneficiarse del service worker de Angular, su aplicación debe ejecutarse en un navegador web que admita service workers en general.
|
||||
Actualmente, los service workers son compatibles con las últimas versiones de Chrome, Firefox, Edge, Safari, Opera, UC Browser (versión de Android) y Samsung Internet.
|
||||
Los navegadores como IE y Opera Mini no son compatibles con los service workers.
|
||||
|
||||
If the user is accessing your app via a browser that does not support service workers, the service worker is not registered and related behavior such as offline cache management and push notifications does not happen.
|
||||
More specifically:
|
||||
Si el usuario accede a su aplicación a través de un navegador que no es compatible con los service workers, el service worker no es registrado y el comportamiento relacionado como la administración de caché sin conexión y las notificaciones automáticas, no ocurre.
|
||||
Más específicamente:
|
||||
|
||||
* The browser does not download the service worker script and `ngsw.json` manifest file.
|
||||
* Active attempts to interact with the service worker, such as calling `SwUpdate.checkForUpdate()`, return rejected promises.
|
||||
* The observable events of related services, such as `SwUpdate.available`, are not triggered.
|
||||
* El navegador no descarga la secuencia de comandos del service worker y el archivo de manifiesto `ngsw.json`.
|
||||
* Intentos activos de interactuar con el service worker, como llamar a `SwUpdate.checkForUpdate ()`, devuelve promesas rechazadas.
|
||||
* Los eventos observables de servicios relacionados, como "SwUpdate.available", no se activan.
|
||||
|
||||
It is highly recommended that you ensure that your app works even without service worker support in the browser.
|
||||
Although an unsupported browser ignores service worker caching, it will still report errors if the app attempts to interact with the service worker.
|
||||
For example, calling `SwUpdate.checkForUpdate()` will return rejected promises.
|
||||
To avoid such an error, you can check whether the Angular service worker is enabled using `SwUpdate.isEnabled()`.
|
||||
Se recomienda encarecidamente que se asegure de que su aplicación funcione incluso sin la asistencia del trabajador de servicio en el navegador.
|
||||
Aunque un navegador no compatible ignora el almacenamiento en caché del service worker, seguirá informando errores si la aplicación intenta interactuar con el service worker.
|
||||
Por ejemplo, llamar a `SwUpdate.checkForUpdate ()` devolverá las promesas rechazadas.
|
||||
Para evitar tal error, puede verificar si el service worker de Angular está habilitado usando `SwUpdate.isEnabled ()`.
|
||||
|
||||
To learn more about other browsers that are service worker ready, see the [Can I Use](https://caniuse.com/#feat=serviceworkers) page and [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API).
|
||||
Para obtener más información sobre otros navegadores que soportan service workers, consulta [Can I Use](https://caniuse.com/#feat=serviceworkers) y [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API).
|
||||
|
||||
|
||||
## Related resources
|
||||
## Recursos Relacionados
|
||||
|
||||
The rest of the articles in this section specifically address the Angular implementation of service workers.
|
||||
El resto de los artículos de esta sección abordan específicamente la implementación de los service workers en Angular.
|
||||
|
||||
* [App Shell](guide/app-shell)
|
||||
* [Service Worker Communication](guide/service-worker-communications)
|
||||
* [Service Worker in Production](guide/service-worker-devops)
|
||||
* [Service Worker Configuration](guide/service-worker-config)
|
||||
* [Comunicación del Service Worker](guide/service-worker-communications)
|
||||
* [Service Worker en producción](guide/service-worker-devops)
|
||||
* [Service Worker Configuración](guide/service-worker-config)
|
||||
|
||||
For more information about service workers in general, see [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers/).
|
||||
Para obtener más información sobre los service workers en general, consulta [Service Workers: una Introducción](https://developers.google.com/web/fundamentals/primers/service-workers/).
|
||||
|
||||
For more information about browser support, see the [browser support](https://developers.google.com/web/fundamentals/primers/service-workers/#browser_support) section of [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers/), Jake Archibald's [Is Serviceworker ready?](https://jakearchibald.github.io/isserviceworkerready/), and
|
||||
Para obtener más información sobre la compatibilidad con el navegador, consulta la [soporte del navegador](https://developers.google.com/web/fundamentals/primers/service-workers/#browser_support) sección de [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers/), [Is Serviceworker ready?](https://jakearchibald.github.io/isserviceworkerready/) Jake Archibald, y
|
||||
[Can I Use](http://caniuse.com/#feat=serviceworkers).
|
||||
|
||||
For additional recommendations and examples, see:
|
||||
Para obtener recomendaciones y ejemplos adicionales, consulta:
|
||||
|
||||
* [Precaching with Angular Service Worker](https://web.dev/precaching-with-the-angular-service-worker/)
|
||||
* [Creating a PWA with Angular CLI](https://web.dev/creating-pwa-with-angular-cli/)
|
||||
* [Precaching con Angular Service Worker](https://web.dev/precaching-with-the-angular-service-worker/)
|
||||
* [Creando una PWA con Angular CLI](https://web.dev/creating-pwa-with-angular-cli/)
|
||||
|
||||
## Next steps
|
||||
## Siguientes pasos con el Angular CLI
|
||||
|
||||
To begin using Angular service workers, see [Getting Started with service workers](guide/service-worker-getting-started).
|
||||
Comienza a usar los service workers en Angular, consulta [Introducción a los trabajadores del servicio](guide/service-worker-getting-started).
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user