From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../progressive_web_apps/app_structure/index.html | 286 +++++++++++++++++++++ .../developer_guide/index.html | 79 ++++++ .../developer_guide/instalar/index.html | 96 +++++++ files/es/web/progressive_web_apps/index.html | 107 ++++++++ .../installable_pwas/index.html | 130 ++++++++++ .../progressive_web_apps/introduction/index.html | 169 ++++++++++++ .../es/web/progressive_web_apps/loading/index.html | 155 +++++++++++ .../offline_service_workers/index.html | 208 +++++++++++++++ .../re-engageable_notifications_push/index.html | 251 ++++++++++++++++++ .../web/progressive_web_apps/ventajas/index.html | 62 +++++ 10 files changed, 1543 insertions(+) create mode 100644 files/es/web/progressive_web_apps/app_structure/index.html create mode 100644 files/es/web/progressive_web_apps/developer_guide/index.html create mode 100644 files/es/web/progressive_web_apps/developer_guide/instalar/index.html create mode 100644 files/es/web/progressive_web_apps/index.html create mode 100644 files/es/web/progressive_web_apps/installable_pwas/index.html create mode 100644 files/es/web/progressive_web_apps/introduction/index.html create mode 100644 files/es/web/progressive_web_apps/loading/index.html create mode 100644 files/es/web/progressive_web_apps/offline_service_workers/index.html create mode 100644 files/es/web/progressive_web_apps/re-engageable_notifications_push/index.html create mode 100644 files/es/web/progressive_web_apps/ventajas/index.html (limited to 'files/es/web/progressive_web_apps') diff --git a/files/es/web/progressive_web_apps/app_structure/index.html b/files/es/web/progressive_web_apps/app_structure/index.html new file mode 100644 index 0000000000..fb6e6b812c --- /dev/null +++ b/files/es/web/progressive_web_apps/app_structure/index.html @@ -0,0 +1,286 @@ +--- +title: Estructura de una aplicación web progresiva +slug: Web/Progressive_web_apps/App_structure +tags: + - Estructura + - Intérprete de la aplicación + - PWAs + - Servicio workers + - Streams + - Transmisiones + - aplicaciones web progresivas + - js13kGames + - progresiva +translation_of: Web/Progressive_web_apps/App_structure +--- +
{{PreviousMenuNext("Web/Progressive_web_apps/Introduction", "Web/Progressive_web_apps/Offline_Service_workers", "Web/Progressive_web_apps")}}
+ +

Ahora que conoces la teoría detrás de las PWAs, veamos la estructura recomendada de una aplicación real. Comenzaremos analizando la aplicación js13kPWA, veamos por qué está construida de esa manera y qué beneficios aporta.

+ +

Arquitectura de una aplicación

+ +

Hay dos principales y diferentes enfoques para representar un sitio web — en el servidor o en el cliente. Ambos tienen sus ventajas y desventajas, y puedes combinar los dos enfoques hasta cierto punto.

+ + + +

La combinación de SSR con CSR puede generar los mejores resultados: puedes representar un sitio web en el servidor, almacenar en caché su contenido y luego actualizar la representación en el lado del cliente cuando sea necesario. La carga de la primera página es rápida debido al SSR y la navegación entre páginas es fluida porque el cliente puede volver a renderizar la página solo con las partes que han cambiado.

+ +

Las PWAs se pueden crear utilizando cualquier enfoque que desees, pero algunas funcionarán mejor que otras. El enfoque más popular es el concepto de "intérprete de la aplicación", que combina SSR y CSR exactamente de la manera descrita anteriormente, y además sigue la metodología "fuera de línea primero" que explicaremos en detalle en los próximos artículos y utilizaremos en nuestra aplicación de ejemplo. También hay un nuevo enfoque que involucra la {{web.link("/es/docs/Web/API/Streams_API", "API Streams")}}, que mencionaremos brevemente.

+ +

Intérprete de la aplicación

+ +

El concepto de intérprete de la aplicación se ocupa de cargar una interfaz de usuario mínima lo antes posible y luego almacenarla en caché para que esté disponible sin conexión para visitas posteriores antes de cargar todo el contenido de la aplicación. De esa manera, la próxima vez que alguien visite la aplicación desde el dispositivo, la interfaz de usuario se cargará desde la caché de inmediato y se solicitará cualquier contenido nuevo del servidor (si aún no está disponible en la caché).

+ +

Esta estructura es rápida y también se siente rápida, ya que el usuario ve "algo" instantáneamente, en lugar de una ruleta de carga o una página en blanco. También permite que el sitio web sea accesible sin conexión si la conexión de red no está disponible.

+ +

Podemos controlar lo que se solicita del servidor y lo que se recupera de la caché con un {{web.link("/es/docs/Web/API/Service_Worker_API", "servicio worker")}}, que se explicará en detalle en el próximo artículo, por ahora centrémonos en la estructura en sí misma.

+ +

¿Por qué debería usarla?

+ +

Esta arquitectura permite que un sitio web se beneficie al máximo de todas las funciones de PWA — almacena en caché el intérprete de la aplicación y administra el contenido dinámico de una manera que mejora enormemente el rendimiento. Además del intérprete básico, puedes agregar otras funciones como {{web.link("/es/docs/Web/Progressive_web_apps/Add_to_home_screen", "agregar a la pantalla de inicio")}} o {{web.link("/es/docs/Web/API/Push_API", "notificaciones push")}}, con la certeza de que la aplicación seguirá funcionando correctamente si no son compatibles con el navegador del usuario — esta es la belleza de la mejora progresiva.

+ +

El sitio web se siente como una aplicación nativa con interacción instantánea y un rendimiento sólido, al tiempo que conserva todos los beneficios de la web.

+ +

Ser enlazable, progresiva y adaptable por diseño

+ +

Es importante recordar las ventajas de PWA y tenerlas en cuenta al diseñar la aplicación. El enfoque del intérprete de la aplicación permite que los sitios web sean:

+ + + +

Concepto diferente: streams o transmisiones

+ +

Se puede lograr un enfoque completamente diferente para la representación del lado del servidor o del cliente con la {{web.link("/es/docs/Web/API/Streams_API", "API Streams")}}. Con un poco de ayuda del servicio workers, las transmisiones pueden mejorar en gran medida la forma en que analizamos el contenido.

+ +

El modelo de intérprete de la aplicación requiere que todos los recursos estén disponibles antes de que el sitio web pueda comenzar a renderizarse. Es diferente con HTML, ya que el navegador ya está transmitiendo los datos y puede ver cuándo se cargan y procesan los elementos en el sitio web. Sin embargo, para que JavaScript esté "operativo", se debe descargar en su totalidad.

+ +

La API de Streams permite a los desarrolladores tener acceso directo a la transmisión de datos desde el servidor — si deseas realizar una operación en los datos (por ejemplo, agregar un filtro a un video), ya no necesitas esperar a que se complete la descarga y convertirla en un blob (o lo que sea) — puedes comenzar de inmediato. Proporciona un control detallado: la transmisión se puede iniciar, encadenar con otra transmisión, cancelar, verificar errores y más.

+ +

En teoría, la transmisión es un mejor modelo, pero también es más complejo, y en el momento de redactar este artículo (marzo de 2018), la API de Streams todavía está en proceso y aún no está completamente disponible en ninguno de los principales navegadores. Cuando esté disponible, será la forma más rápida de servir el contenido — los beneficios serán enormes en términos de rendimiento.

+ +

Para obtener ejemplos trabajando y más información, consulta la {{web.link("/es/docs/Web/API/Streams_API", "documentación de la API de Streams")}}.

+ +

Estructura de nuestra aplicación de ejemplo

+ +

La estructura del sitio web js13kPWA es bastante simple: consta de un solo archivo HTML (index.html) con estilo CSS básico (style.css) y algunas imágenes, scripts y tipos de letra. La estructura de la carpeta se ve así:

+ +

Estructura del directorio de js13kPWA.

+ +

El HTML

+ +

Desde el punto de vista HTML, el intérprete de la aplicación es todo lo que está fuera de la sección de contenido:

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>js13kGames — Entradas del marco A</title>
+	<meta name="description" content="Una lista de las entradas del marco A enviadas a la competencia js13kGames 2017, que se utiliza como ejemplo para los artículos de MDN sobre Aplicaciones Web Progresivas">
+	<meta name="author" content="end3r">
+	<meta name="theme-color" content="#B12A34">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta property="og:image" content="icons/icon-512.png">
+	<link rel="shortcut icon" href="favicon.ico">
+	<link rel="stylesheet" href="style.css">
+	<link rel="manifest" href="js13kpwa.webmanifest">
+	<script src="data/games.js" defer></script>
+	<script src="app.js" defer></script>
+</head>
+<body>
+<header>
+	<p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kGames"></a></p>
+</header>
+<main>
+	<h1>js13kGames — Entradas del marco A</h1>
+	<p class="description">Lista de juegos enviada a <a href="http://js13kgames.com/aframe">categoría Marco A</a> en la competencia de <a href="http://2017.js13kgames.com">js13kGames 2017</a>. Puedes <a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa">bifurcar js13kPWA en GitHub</a> para revisar su código fuente.</p>
+	<button id="notifications">Solicitar notificaciones ficticias</button>
+	<section id="content">
+		// Contenido insertado aquí
+	</section>
+</main>
+<footer>
+	<p>© js13kGames 2012-2020, creado y mantenido por <a href="http://end3r.com">Andrzej Mazur</a> de <a href="http://enclavegames.com">Enclave Games</a>.</p>
+</footer>
+</body>
+</html>
+ +

La sección {{HTMLElement("head")}} contiene información básica como título, descripción y enlaces a CSS, manifiesto web, archivo JS de contenido de juegos y app.js; ahí es donde se inicia nuestra aplicación JavaScript. El {{HTMLElement("body")}} se divide en {{HTMLElement("header")}} (que contiene la imagen vinculada), {{HTMLElement("main")}} de la página (con título, descripción y lugar para el contenido) y {{HTMLElement("footer")}} (derechos de autor y enlaces).

+ +

El único trabajo de la aplicación es enumerar todas las entradas del Marco A de la competencia js13kGames 2017. Como puedes ver, es un sitio web muy común de una página — el objetivo es tener algo simple para que podamos centrarnos en la implementación de las características reales de PWA.

+ +

El CSS

+ +

El CSS también es lo más sencillo posible: usa {{CSSxRef("@font-face")}} para cargar y usar un tipo de letra personalizado, y aplica un estilo simple de los elementos HTML. El enfoque general es que el diseño se vea bien tanto en dispositivos móviles (con un enfoque de diseño web adaptable) como en dispositivos de escritorio.

+ +

El main de la aplicación JavaScript

+ +

El archivo app.js hace algunas cosas que veremos de cerca en los próximos artículos. En primer lugar, genera el contenido en base a esta plantilla:

+ +
var template = "<article>\n\
+    <img src='data/img/SLUG.jpg' alt='NAME'>\n\
+    <h3>#POS. NAME</h3>\n\
+    <ul>\n\
+    <li><span>Author:</span> <strong>AUTHOR</strong></li>\n\
+    <li><span>Twitter:</span> <a href='https://twitter.com/TWITTER'>@TWITTER</a></li>\n\
+    <li><span>Website:</span> <a href='http://WEBSITE/'>WEBSITE</a></li>\n\
+    <li><span>GitHub:</span> <a href='https://GITHUB'>GITHUB</a></li>\n\
+    <li><span>More:</span> <a href='http://js13kgames.com/entries/SLUG'>js13kgames.com/entries/SLUG</a></li>\n\
+    </ul>\n\
+</article>";
+var content = '';
+for(var i=0; i<games.length; i++) {
+    var entry = template.replace(/POS/g,(i+1))
+        .replace(/SLUG/g,games[i].slug)
+        .replace(/NAME/g,games[i].name)
+        .replace(/AUTHOR/g,games[i].author)
+        .replace(/TWITTER/g,games[i].twitter)
+        .replace(/WEBSITE/g,games[i].website)
+        .replace(/GITHUB/g,games[i].github);
+    entry = entry.replace('<a href=\'http:///\'></a>','-');
+    content += entry;
+};
+document.getElementById('content').innerHTML = content;
+ +

A continuación, registra un servicio works:

+ +
if('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js');
+};
+ +

El siguiente bloque de código solicita permiso para recibir notificaciones cuando se hace clic en un botón:

+ +
var button = document.getElementById("notifications");
+button.addEventListener('click', function(e) {
+    Notification.requestPermission().then(function(result) {
+        if(result === 'granted') {
+            randomNotification();
+        }
+    });
+});
+ +

El último bloque crea notificaciones que muestran un elemento seleccionado al azar de la lista de juegos:

+ +
function randomNotification() {
+    var randomItem = Math.floor(Math.random()*games.length);
+    var notifTitle = games[randomItem].name;
+    var notifBody = 'Creado por '+games[randomItem].author+'.';
+    var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
+    var options = {
+        body: notifBody,
+        icon: notifImg
+    }
+    var notif = new Notification(notifTitle, options);
+    setTimeout(randomNotification, 30000);
+}
+ +

El servicio worker

+ +

El último archivo que veremos rápidamente es el servicio worker: sw.js — primero importa datos del archivo games.js:

+ +
self.importScripts('data/games.js');
+ +

A continuación, crea una lista de todos los archivos que se almacenarán en caché, tanto del intérprete de la aplicación como del contenido:

+ +
var cacheName = 'js13kPWA-v1';
+var appShellFiles = [
+  '/pwa-examples/js13kpwa/',
+  '/pwa-examples/js13kpwa/index.html',
+  '/pwa-examples/js13kpwa/app.js',
+  '/pwa-examples/js13kpwa/style.css',
+  '/pwa-examples/js13kpwa/fonts/graduate.eot',
+  '/pwa-examples/js13kpwa/fonts/graduate.ttf',
+  '/pwa-examples/js13kpwa/fonts/graduate.woff',
+  '/pwa-examples/js13kpwa/favicon.ico',
+  '/pwa-examples/js13kpwa/img/js13kgames.png',
+  '/pwa-examples/js13kpwa/img/bg.png',
+  '/pwa-examples/js13kpwa/icons/icon-32.png',
+  '/pwa-examples/js13kpwa/icons/icon-64.png',
+  '/pwa-examples/js13kpwa/icons/icon-96.png',
+  '/pwa-examples/js13kpwa/icons/icon-128.png',
+  '/pwa-examples/js13kpwa/icons/icon-168.png',
+  '/pwa-examples/js13kpwa/icons/icon-192.png',
+  '/pwa-examples/js13kpwa/icons/icon-256.png',
+  '/pwa-examples/js13kpwa/icons/icon-512.png'
+];
+var gamesImages = [];
+for(var i=0; i<games.length; i++) {
+  gamesImages.push('data/img/'+games[i].slug+'.jpg');
+}
+var contentToCache = appShellFiles.concat(gamesImages);
+ +

El siguiente bloque instala el servicio worker, que luego almacena en caché todos los archivos contenidos en la lista anterior:

+ +
self.addEventListener('install', function(e) {
+  console.log('[Service Worker] Install');
+  e.waitUntil(
+    caches.open(cacheName).then(function(cache) {
+      console.log('[Servicio Worker] Almacena todo en caché: contenido e intérprete de la aplicación');
+      return cache.addAll(contentToCache);
+    })
+  );
+});
+ +

Por último, el servicio worker obtiene contenido de la caché si está disponible allí, lo cual proporciona una funcionalidad fuera de línea:

+ +
self.addEventListener('fetch', function(e) {
+  e.respondWith(
+    caches.match(e.request).then(function(r) {
+      console.log('[Servicio Worker] Obteniendo recurso: '+e.request.url);
+      return r || fetch(e.request).then(function(response) {
+        return caches.open(cacheName).then(function(cache) {
+          console.log('[Servicio Worker] Almacena el nuevo recurso: '+e.request.url);
+          cache.put(e.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});
+ +

Los datos de JavaScript

+ +

Los datos de los juegos están presentes en el directorio data en forma de un objeto JavaScript (games.js):

+ +
var games = [
+    {
+        slug: 'perdido-en-el-ciberespacio',
+        name: 'Perdido en el ciberespacio',
+        author: 'Zosia y Bartek',
+        twitter: 'bartaz',
+        website: '',
+        github: 'github.com/bartaz/lost-in-cyberspace'
+    },
+    {
+        slug: 'vernissage',
+        name: 'Vernissage',
+        author: 'Platane',
+        twitter: 'platane_',
+        website: 'github.com/Platane',
+        github: 'github.com/Platane/js13k-2017'
+    },
+// ...
+    {
+        slug: 'emma-3d',
+        name: 'Emma-3D',
+        author: 'Prateek Roushan',
+        twitter: '',
+        website: '',
+        github: 'github.com/coderprateek/Emma-3D'
+    }
+];
+ +

Cada entrada tiene su propia imagen en el directorio data/img. Este es nuestro contenido, cargado en la sección de contenido con JavaScript.

+ +

Siguiente

+ +

En el próximo artículo veremos con más detalle cómo se almacenan en caché el intérprete de la aplicación y el contenido para su uso sin conexión con la ayuda del servicio worker.

+ +

{{PreviousMenuNext("Web/Progressive_web_apps/Introduction", "Web/Progressive_web_apps/Offline_Service_workers", "Web/Progressive_web_apps")}}

+ +

{{QuickLinksWithSubpages("/es/docs/Web/Progressive_web_apps/")}}

diff --git a/files/es/web/progressive_web_apps/developer_guide/index.html b/files/es/web/progressive_web_apps/developer_guide/index.html new file mode 100644 index 0000000000..79d2859352 --- /dev/null +++ b/files/es/web/progressive_web_apps/developer_guide/index.html @@ -0,0 +1,79 @@ +--- +title: PWA developer guide +slug: Web/Progressive_web_apps/Developer_guide +tags: + - Applications + - Apps + - Developer Guide + - Landing + - NeedsTranslation + - Offline + - PWA + - Persistent + - Progressive web apps + - TopicStub + - Web + - progressive +translation_of: Web/Progressive_web_apps/Developer_guide +--- +

{{draft}}

+ +

In the articles listed here, you'll find guides about every aspect of development specific to the creation of progressive web applications (PWAs). For all other documentation about web development, which generally pertains to PWAs as well, see our primary web development documentation.

+ +

--->>> Titles below are just for the list; give articles good SEO names and feel free to tweak those and this as needed... <<<---

+ +
+
+

Web app basics

+ +
+
Introduction and getting started with PWA development
+
some description
+
Installing and uninstalling web apps
+
An introductory guide to how a web app can be installed on the user's device...
+
Using service workers to run offline
+
description
+
Alerting the user using notifications
+
description
+
Creating a web app from an existing site
+
description
+
+ +

Advanced topics

+ +
+
Pushing data from the server to your web application
+
some description
+
Resource management
+
description
+
Integration with the host device
+
description
+
Security and privacy
+
description
+
Gaming topics for web app developers
+
description
+
+
+ +
+

Polishing web apps

+ +
+
Web API equivalents for common native APIs
+
some description
+
Platform-specific tips and issues
+
description
+
Web application performance guide
+
description
+
Ensuring a good user experience
+
description
+
+ + + +
+
some topic
+
some description
+
+
+
diff --git a/files/es/web/progressive_web_apps/developer_guide/instalar/index.html b/files/es/web/progressive_web_apps/developer_guide/instalar/index.html new file mode 100644 index 0000000000..ef54a3b24c --- /dev/null +++ b/files/es/web/progressive_web_apps/developer_guide/instalar/index.html @@ -0,0 +1,96 @@ +--- +title: Instalar y desinstalar aplicaciones web +slug: Web/Progressive_web_apps/Developer_guide/Instalar +tags: + - Android + - Apps + - Chrome + - Desinstalar + - Firefox + - Guía + - Lanzar + - PWA + - Pantalla de inicio + - Principiante + - Samsung + - Web + - aplicaciones + - aplicaciones web progresivas + - instalar +translation_of: Web/Progressive_web_apps/Developer_guide/Installing +--- +

{{draft}}

+ +

La instalación de aplicaciones web es una función disponible en los navegadores modernos que permite a los usuarios elegir "instalar" fácil y cómodamente una aplicación web en su dispositivo para que puedan acceder a ella de la misma manera que lo harían con cualquier otra aplicación. Dependiendo del dispositivo y las características del sistema operativo y el navegador, esto puede resultar en lo que esencialmente es una aplicación con todas las funciones (por ejemplo, usando WebAPK en Android) o como un acceso directo agregado a la pantalla de tu dispositivo. Esta guía explica cómo se realiza la instalación, qué significa y qué debes hacer como desarrollador para que los usuarios la aprovechen.

+ +

¿Por qué la instalación?

+ +

La opción de instalar una aplicación web es parte de la filosofía {{web.link("/es/docs/Web/Progressive_web_apps", "Aplicación web progresiva")}}, que proporciona a las aplicaciones web las mismas ventajas de experiencia de usuario que las aplicaciones nativas para que puedan ser competitivas. Las aplicaciones instaladas se invocan de manera más conveniente ya que tienen presencia en la pantalla de inicio de un dispositivo o en la lista o barra de aplicaciones. Esto facilita que un usuario utilice un gesto para acceder a una aplicación tocando o haciendo clic en su icono. La aplicación en sí misma, se puede manifestar como en una vista sin bordes (sin el navegador Chrome completo) pero, no obstante, se está ejecutando de manera efectiva como una pestaña dentro del navegador.

+ +

Para los usuarios, la experiencia de una PWA aparentemente nativa es más cómoda y conveniente que un sitio web típico. Al reducir la diferencia de experiencia del usuario entre la aplicación web y las aplicaciones nativas en el dispositivo del usuario, reduce tanto la pérdida de cualquier memoria muscular que tenga relacionada con la interfaz nativa del dispositivo como la sensación de que "algo no va del todo bien" que los usuarios pueden experimentar al cambiar entre aplicaciones nativas y basadas en web.

+ +

¿Qué navegadores admiten la instalación?

+ +

La instalación es compatible con Chrome para Android y Android WebView versión 31 y posteriores, Opera para Android 32 en adelante, Samsung Internet a partir de la versión 4 y Firefox para Android {{web.link("/es/docs/Mozilla/Firefox/Releases/58", "versión 58")}} y posteriores.

+ +

Safari en iOS es un poco diferente. Algunas partes del ecosistema de PWA son compatibles, mientras que otras no. iOS 13 introdujo una experiencia de instalación mucho más comparable, que también se describe aquí.

+ +

La instalación en la experiencia del usuario

+ +

Hemos escrito un sitio web de ejemplo muy simple (ve nuestra demostración en vivo, y también ve el código fuente) que no hace mucho, pero fue desarrollado con el código necesario para permitir su instalación, así como un servicio worker> para permitir su uso sin conexión. El ejemplo muestra una serie de imágenes de zorros. Si tienes un dispositivo compatible con la aplicación web disponible, utilízalo para navegar a nuestra demostración en https://mdn.github.io/pwa-examples/a2hs/. Verás imágenes de zorros, pero lo que es más importante, habrá alguna forma de interfaz de usuario disponible para permitirte instalar el sitio como una aplicación web.

+ +

La interfaz de usuario para esto varía de un navegador a otro, pero la idea general es la misma. Desafortunadamente, no existe un estándar para los iconos y símbolos utilizados para operaciones como esta.

+ +

Firefox para Android

+ +

En un dispositivo Android que usa Firefox, verás un ícono de "inicio" con un ícono más (+) en su interior; este es el ícono "Agregar a la pantalla de inicio" que se muestra para cualquier sitio que tenga las características necesarias en su lugar.

+ +

Una captura de pantalla de un navegador web que muestra el ícono Agregar a la pantalla de inicio en la parte superior

+ +

Al tocar este, se mostrará un pasquín de confirmación; al presionar el botón grande "+ AGREGAR A LA PANTALLA DE INICIO", se completa la acción y se agrega la aplicación a la pantalla de inicio. Ten en cuenta que en Android 8 y versiones posteriores, se mostrará primero un cuadro de diálogo de permiso "Agregar a la pantalla de inicio" a nivel del sistema.

+ +

Una captura de pantalla de Firefox para Android que solicita confirmación antes de instalar una aplicación web

+ + + +

Si tiene Samsung Internet en tu dispositivo móvil, verás un icono diferente.

+ +

Una captura de pantalla del navegador de Internet de Samsung que muestra su icono Agregar a la pantalla de inicio

+ +

Tocar ese ícono debería llevarte al mismo pasquín de confirmación que se muestra en Firefox arriba.

+ +

Google Chrome para Android

+ +

Si tienes Google Chrome para Android disponible, la experiencia es ligeramente diferente; al cargar nuestro sitio, verás un pasquín de instalación emergente que te preguntará si deseas agregar esta aplicación a tu pantalla de inicio.

+ +

Captura de pantalla de un pasquín de Chrome que solicita permiso para instalar la aplicación de muestra Foxes

+ +
+

Nota: Puedes obtener más información sobre los paquínes de instalación de Chrome en el artículo Pasquínes de instalación de aplicaciones web.

+
+ +

Si eliges no agregarlo a tu pantalla de inicio en este momento, los puedes hacer más tarde usando el ícono "Agregar a la pantalla de inicio" en el menú principal de Chrome.

+ +

Safari para iOS/iPhoneOS/iPadOS

+ +

En iOS de Apple (incluidos iPhoneOS y iPadOS), el navegador Safari integrado en el dispositivo tiene cierto soporte para aplicaciones web, incluido el soporte para agregar a la función de pantalla de inicio. Para agregar una aplicación web a la pantalla de inicio (también conocida como lanzador o trampolín), toca el botón para compartir (Icono de compartir cuadrado y flecha desde iOS y macOS) en la parte inferior de la pantalla:

+ +

Captura de pantalla que muestra la ubicación del botón Compartir en Safari en iOS 13

+ +

Esto llama al panel para compartir. Entre las opciones debe estar la opción "Agregar a la pantalla de inicio", a menos que el usuario la haya eliminado específicamente de la lista al editar las opciones mostradas:

+ +

Captura de pantalla del panel para compartir de Safari iOS, que muestra la opción

+ +

Al elegir "Agregar a la pantalla de inicio" aquí se presenta el cuadro de diálogo de confirmación, que no solo confirma que el usuario desea agregar la aplicación a la pantalla de inicio, sino que también le permite personalizar su nombre.

+ +

Una captura de pantalla de iOS Safari que muestra su panel de configuración y confirmación "Agregar a la pantalla de inicio"

+ +

Al hacer clic en "Agregar", la aplicación se incluye en la pantalla de inicio.

+ +

La aplicación web instalada

+ +

Independientemente del navegador y el dispositivo que estés utilizando, cuando eliges agregar la aplicación a tu pantalla de inicio o al iniciador de aplicaciones, aparecerá allí con el mismo aspecto que cualquier aplicación. Normalmente, esto significa que verás el icono de la aplicación junto con un título corto.

+ +

Captura de pantalla de una pantalla de inicio de Android con la aplicación "Foxes" mostrada

+ +

Cuando tocas el icono de la aplicación web en la pantalla de inicio, se abre en un entorno web de pantalla completa, sin la interfaz de usuario del navegador a su alrededor.

diff --git a/files/es/web/progressive_web_apps/index.html b/files/es/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..10a3638497 --- /dev/null +++ b/files/es/web/progressive_web_apps/index.html @@ -0,0 +1,107 @@ +--- +title: Aplicaciones Web Progresivas +slug: Web/Progressive_web_apps +tags: + - Aplicaciones Web + - Aplicaciones web modernas + - Aplicación Web Progresiva + - Aplicación web + - PWA + - aplicación +translation_of: Web/Progressive_web_apps +--- +
{{draft}}
+ +

Logotipo de la comunidad PWALas aplicaciones web progresivas (mejor conocidas como PWAs por «Progressive Web Apps») son aplicaciones web que utilizan APIs y funciones emergentes del navegador web junto a una estrategia tradicional de mejora progresiva para ofrecer una aplicación nativa —como la experiencia del usuario para aplicaciones web multiplataforma. Las aplicaciones web progresivas son un patrón de diseño útil, aunque no son un estándar formalizado. Se puede pensar que PWA es similar a AJAX u otros patrones similares que abarcan un conjunto de atributos de aplicación, incluido el uso de tecnologías y técnicas web específicas. Este conjunto de documentos te dice todo lo que necesitas saber sobre ellas.

+ +

Para poder llamar PWA a una aplicación web, técnicamente hablando debe tener las siguientes características: {{web.link("/es/docs/Web/Security/Secure_Contexts", "Contexto seguro")}} ({{Glossary("HTTPS")}}), uno o más {{web.link("/es/docs/Web/API/Service_Worker_API", "Servicio Workers")}} y un {{web.link("/es/docs/Web/Manifest", "archivo de manifiesto")}}.

+ +
+
{{web.link("/es/docs/Web/Security/Secure_Contexts", "Contexto seguro")}} ({{Glossary("HTTPS")}})
+
La aplicación web se debe servir a través de una red segura. Ser un sitio seguro no solo es una buena práctica, sino que también establece tu aplicación web como un sitio confiable, especialmente si los usuarios necesitan realizar transacciones seguras. La mayoría de las funciones relacionadas con una PWA, como la geolocalización e incluso los servicios workers, solamente están disponibles cuando la aplicación se ha cargado mediante HTTPS.
+
{{web.link("/es/docs/Web/API/Service_Worker_API", "Servicio workers")}}
+
Un servicio worker es un script que permite interceptar y controlar cómo un navegador web maneja tus solicitudes de red y el almacenamiento en caché de activos. Con los servicios worker, los desarrolladores web pueden crear páginas web rápidas y fiables junto con experiencias fuera de línea.
+
{{web.link("/es/docs/Web/Manifest", "El archivo manifest")}}
+
Un archivo {{Glossary("JSON")}} que controla cómo se muestra tu aplicación al usuario y garantiza que las aplicaciones web progresivas sean detectables. Describe el nombre de la aplicación, la URL de inicio, los iconos y todos los demás detalles necesarios para transformar el sitio web en un formato similar al de una aplicación.
+
+ +

Ventajas de PWA

+ +

Las PWA deben ser detectables, instalables, enlazables, independientes de la red, progresivas, reconectables, responsivas y seguras. Para obtener más información sobre lo que esto significa, lee {{web.link("/es/docs/Web/Progressive_web_apps/Advantages", "Ventajas de las aplicaciones web progresivas")}}.

+ +

Para saber cómo implementar PWA, lee la {{web.link("/es/docs/Web/Progressive_web_apps/Developer_guide", "guía para desarrolladores de PWA")}}.

+ +

Documentación

+ +

<-- La lista automática temporal a continuación se reemplazará pronto -->

+ +

{{LandingPageListSubpages}}

+ +
+

Todo lo que se encuentra debajo de este punto es un remanente de la versión anterior de esta página y se renovará a medida que se revise el resto del contenido.

+
+ +

Guías del núcleo de PWA

+ +

Las siguientes guías te muestran lo que debes hacer para implementar una PWA, examinando un ejemplo simple y mostrándote cómo funcionan todas las piezas.

+ +
    +
  1. {{web.link("/es/docs/Web/Progressive_web_apps/Introduction", "Introducción a las aplicaciones web progresivas")}}
    2. +
  2. {{web.link("/es/docs/Web/Progressive_web_apps/App_structure", "Estructura de la aplicación web progresiva")}}
    3. +
  3. {{web.link("/es/docs/Web/Progressive_web_apps/Offline_Service_workers", "Hacer que las PWAs funcionen sin conexión con el servicio de workers")}}
    4. +
  4. {{web.link("/es/docs/Web/Progressive_web_apps/Installable_PWAs", "Cómo hacer que las PWAs se puedan instalar")}}
    5. +
  5. {{web.link("/es/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Cómo hacer que las PWAs puedan volver a interactuar usando Notificaciones y Push")}}
    6. +
  6. {{web.link("/es/docs/Web/Progressive_web_apps/Loading", "Carga progresiva")}}
    7. +
+ +
+
+

Guías tecnológicas

+ +
    +
  • {{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Almacenamiento del lado del cliente")}} — una extensa guía que muestra cómo y cuándo utilizar el almacenamiento web, IndexedDB y el servicio workers.
    • +
  • {{web.link("/es/docs/Web/API/Service_Worker_API/Using_Service_Workers", "Uso del servicio workers")}} — una guía más detallada que cubre la API del servicio workers.
    • +
  • {{web.link("/es/docs/Web/API/IndexedDB_API/Using_IndexedDB", "Uso de IndexedDB")}} — los fundamentos de IndexedDB, explicados en detalle.
    • +
  • {{web.link("/es/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API", "Uso de la API de almacenamiento web")}} — la API de almacenamiento web simplificada.
    • +
  • Aplicaciones web de carga instantánea con una arquitectura de intérprete de aplicaciones — una guía para usar el patrón de codificación de intérprete de App para crear aplicaciones que se cargan rápidamente.
    • +
  • {{web.link("/es/docs/Web/API/Push_API/Using_the_Push_API", "Uso de la API Push")}} — aprende los conceptos básicos de la API Web Push.
    • +
  • {{web.link("/es/docs/Web/API/Notifications_API/Using_the_Notifications_API", "Uso de la API de notificaciones")}} — notificaciones web en pocas palabras.
    • +
  • {{web.link("/es/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks", "Los componentes básicos del diseño responsivo")}} — aprende los conceptos básicos del diseño responsivo, un tema esencial para el diseño de aplicaciones modernas.
    • +
  • {{web.link("/es/docs/Web/Apps/Modern/Responsive/Mobile_first", "Primero móvil")}} — a menudo, al crear diseños de aplicaciones adaptables, tiene sentido crear el diseño móvil como predeterminado y construir diseños más anchos en la parte superior.
    • +
  • {{web.link("/es/docs/Web/Apps/Progressive/Add_to_home_screen", "Guía para agregar la pantalla de inicio")}} — aprende cómo tus aplicaciones pueden aprovechar agregar la pantalla de inicio (A2HS).
    • +
+
+ +
+

Herramientas

+ +
    +
  • localForage — una biblioteca de JavaScript sencilla y agradable para almacenar datos en el lado del cliente de manera realmente simple, usa IndexedDB y recurre a Web SQL/Web Storage si es necesario.
    • +
  • ServiceWorkerWare — un microframework tipo Express para facilitar el desarrollo del Servicio Worker.
    • +
  • oghliner — no solo es una plantilla, sino una herramienta para implementar aplicaciones web sin conexión para Páginas de GitHub.
    • +
  • sw-precache — un módulo de node para generar código del servicio worker que precargará recursos específicos.
    • +
  • workbox: sucesor espiritual de "sw-precache" con estrategias de almacenamiento en caché más avanzadas y sencillas precargas.
    • +
  • upup: un diminuto script que garantiza que tu sitio siempre esté disponible para tus usuarios.
    • +
  • El libro de recetas para servicios worker: una serie de excelentes recetas de servicios worker que muestran cómo implementar una aplicación sin conexión, además de otros muchos concejos.
    • +
  • Extensión PWA de VS Code: una colección de todos los fragmentos de código esenciales que necesitas para crear aplicaciones web progresivas correctamente allí en tu entorno de VS Code.
    • +
+
+
+ + + +
{{QuickLinksWithSubpages("/es/docs/Web/Progressive_web_apps/")}}
diff --git a/files/es/web/progressive_web_apps/installable_pwas/index.html b/files/es/web/progressive_web_apps/installable_pwas/index.html new file mode 100644 index 0000000000..8994574904 --- /dev/null +++ b/files/es/web/progressive_web_apps/installable_pwas/index.html @@ -0,0 +1,130 @@ +--- +title: Cómo hacer PWAs instalables +slug: Web/Progressive_web_apps/Installable_PWAs +tags: + - Instalable + - PWAs + - aapi + - agregar a pantalla de inicio + - aplicaciones web progresivas + - js13kGames + - progresiva +translation_of: Web/Progressive_web_apps/Installable_PWAs +--- +
{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}
+ +

En el último artículo, leímos cómo la aplicación de ejemplo, js13kPWA, funciona sin conexión gracias a su {{web.link("/es/docs/Web/API/Service_Worker_API", "servicio worker")}}, pero podemos ir aún más lejos y permitir que los usuarios instalen la aplicación web en los navegadores móviles y de escritorio que lo admitan. Los usuarios pueden iniciar la aplicación web instalada como si fuera una aplicación nativa. Este artículo explica cómo lograr esto usando el manifiesto de la aplicación web.

+ +

Estas tecnologías permiten que la aplicación se inicie directamente desde la pantalla de inicio del dispositivo, en lugar de que el usuario tenga que abrir el navegador y luego navegar al sitio utilizando un marcador o escribiendo la URL. Tu aplicación web se puede sentar junto a aplicaciones nativas como ciudadanos de primera clase. Esto facilita el acceso a la aplicación web; Además, puedes especificar que la aplicación se inicie en modo de pantalla completa o independiente, eliminando así la interfaz de usuario predeterminada del navegador que de otro modo estaría presente, creando una sensación aún más fluida y similar a la nativa.

+ +

Requisitos

+ +

Para que el sitio web sea instalable, necesitas lo siguiente:

+ + + +
+

Actualmente, solo los navegadores basados en Chromium tal como Chrome, Edge y Samsung Internet requieren el servicio worker. Si desarrollas tu aplicación con Firefox, ten en cuenta que necesitarás un servicio worker para que sea compatible con los navegadores basados ​​en Chromium.

+
+ +

El archivo de manifiesto

+ +

El elemento clave es un archivo de manifiesto web, que enumera toda la información sobre el sitio web en formato JSON.

+ +

Suele residir en el directorio raíz de una aplicación web. Contiene información útil, como el título de la aplicación, rutas a iconos de diferentes tamaños que se pueden usar para representar la aplicación en un sistema operativo (como un icono en la pantalla de inicio, una entrada en el menú Inicio o un icono en el escritorio) y un color de fondo para usar en las pantallas de carga o de presentación. Esta información es necesaria para que el navegador presente la aplicación web correctamente durante el proceso de instalación, así como dentro de la interfaz de inicio de la aplicación del dispositivo, como la pantalla de inicio de un dispositivo móvil.

+ +

El archivo js13kpwa.webmanifest de la aplicación web js13kPWA se incluye en el bloque {{HTMLElement("head")}} del archivo index.html de la aplicación web usando la siguiente línea de código:

+ +
<link rel="manifest" href="js13kpwa.webmanifest">
+ +
+

Hay algunos tipos comunes de archivos de manifiesto que se han utilizado en el pasado: manifest.webapp era popular en los manifiestos de aplicaciones de Firefox OS, y muchos usan manifest.json para manifestar aplicaciones web ya que el contenido está organizado en una estructura JSON. Sin embargo, el formato de archivo .webmanifest se menciona explícitamente en la especificación del manifiesto W3C, por lo tanto ese es el que usaremos aquí.

+
+ +

El contenido del archivo se ve así:

+ +
{
+  "name": "js13kGames Progressive Web App",
+  "short_name": "js13kPWA",
+  "description": "Aplicación web progresiva que enumera los juegos enviados a la categoría del marco A en la competencia js13kGames del 2017.",
+  "icons": [
+    {
+      "src": "icons/icon-32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    // ...
+    {
+      "src": "icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/pwa-examples/js13kpwa/index.html",
+  "display": "fullscreen",
+  "theme_color": "#B12A34",
+  "background_color": "#B12A34"
+}
+
+ +

La mayoría de los campos se explican por sí mismos, pero para estar seguros de que estamos en la misma página:

+ + + +

Un manifiesto web mínimo debe tener al menos un name y un campo icons con al menos un icono definido; ese icono debe tener al menos los subcampos src, sizes y type también. Más allá de eso, todo es opcional, aunque se recomiendan los campos description, short_name y start_url. Incluso, hay más campos que puedes usar de los que se enumeran anteriormente; asegúrate de consultar la {{web.link("/es/docs/Web/Manifest", "referencia del manifiesto de la aplicación web")}} para obtener más detalles.

+ +

Agregar a la pantalla inicial

+ +

"Agregar a la pantalla de inicio" (o aapi para abreviar) es una función implementada por los navegadores móviles que toma la información que se encuentra en el manifiesto de una aplicación web y la usa para representar la aplicación en la pantalla de inicio del dispositivo con un icono y un nombre. Esto solo funciona si la aplicación cumple con todos los requisitos necesarios, como se describió anteriormente.

+ +

Cuando el usuario visita la PWA con un navegador móvil compatible, debe mostrar una notificación (como un pasquín o un cuadro de diálogo) que indique que es posible instalar la aplicación como una PWA.

+ +

Agregar a la ventana emergente de la pantalla de inicio de js13kPWA.

+ +

Una vez que el usuario indica que desea continuar con la instalación, se muestra el pasquín de instalación. Ese pasquín es creado automáticamente por el navegador, basado en la información del archivo de manifiesto. Por ejemplo, el mensaje incluye el nombre y el icono de la aplicación.

+ +

Pancarta de instalación de js13kPWA.

+ +

Si el usuario hace clic en el botón, hay un paso final que muestra cómo se verá la aplicación y permite que el usuario elija si definitivamente desea agregar la aplicación.

+ +

Agregar a la ventana emergente de la pantalla de inicio de js13kPWA.

+ +

Cuando se confirme, la aplicación se instalará en la pantalla de inicio.

+ +

Pantalla de inicio

+ +

Ahora el usuario puede iniciar y utilizar la aplicación web como cualquier otra aplicación en su dispositivo. Dependiendo del dispositivo y el sistema operativo, el icono de la aplicación web puede tener una insignia con un pequeño icono que indica que se trata de una aplicación web. En la captura de pantalla anterior, por ejemplo, la aplicación tiene un pequeño icono de Firefox, lo cual indica que es una aplicación web que usa el entorno de ejecución de Firefox.

+ +

Pantalla de bienvenida

+ +

En algunos navegadores, también se genera una pantalla de bienvenida a partir de la información del manifiesto, que se muestra cuando se inicia la PWA y mientras se carga.

+ +

Pantalla de bienvenida

+ +

El icono y los colores del tema y fondo se utilizan para crear esta pantalla.

+ +

Resumen

+ +

En este artículo, aprendimos cómo podemos hacer que las PWAs se puedan instalar con un manifiesto web correctamente configurado, y cómo el usuario puede luego instalar la PWA con la función "agregar a la pantalla de inicio" de su navegador.

+ +

Para obtener más información sobre aapi, asegúrate de leer nuestra {{web.link("/es/docs/Web/Apps/Progressive/Add_to_home_screen", "guía para agregar a la pantalla de inicio")}}. La compatibilidad con el navegador se limita actualmente a Firefox para Android 58+, Mobile Chrome y Android Webview 31+, y Opera para Android 32+, pero esto debería mejorar en un próximo futuro.

+ +

Ahora pasemos a la última pieza del rompecabezas de PWA: usar notificaciones automáticas para compartir anuncios con el usuario y ayudarlo a volver a interactuar con tu aplicación.

+ +

{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}

+ +

{{QuickLinksWithSubpages("/es/docs/Web/Progressive_web_apps/")}}

diff --git a/files/es/web/progressive_web_apps/introduction/index.html b/files/es/web/progressive_web_apps/introduction/index.html new file mode 100644 index 0000000000..266c602c8c --- /dev/null +++ b/files/es/web/progressive_web_apps/introduction/index.html @@ -0,0 +1,169 @@ +--- +title: Introducción a aplicaciones web progresivas +slug: Web/Progressive_web_apps/Introduction +tags: + - Aplicaciones web prograsivas + - Guía + - Intermedio + - Intruducción + - PWA + - Servicio Worker + - aplicaciones + - js13kGames + - manifiesto web + - progresiva +translation_of: Web/Progressive_web_apps/Introduction +--- +
{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}
+ +

Este articulo provee una introducción a las Aplicaciones web progresivas (PWAs), explica qué son, y las ventajas que brindan sobre las aplicaciones web convencionales.

+ +

¿Qué es una aplicación web progresiva?

+ +
El término "Aplicación web progresiva" no es un nombre formal u oficial. Solo es una abreviatura utilizada inicialmente por Google para el concepto de crear una aplicación flexible y adaptable utilizando solo tecnologías web.
+ +

Las PWA son aplicaciones web desarrolladas con una serie de tecnologías específicas y patrones estándar que les permiten aprovechar las funciones de las aplicaciones nativas y web. Por ejemplo, las aplicaciones web son más fáciles de detectar que las aplicaciones nativas; es mucho más fácil y rápido visitar un sitio web que instalar una aplicación, y también puedes compartir aplicaciones web simplemente enviando un enlace.

+ +

Por otro lado, las aplicaciones nativas están mejor integradas con el sistema operativo y, por lo tanto, ofrecen una experiencia más fluida para los usuarios. Puedes instalar una aplicación nativa para que funcione sin conexión, y a los usuarios les encanta tocar sus íconos para acceder fácilmente a sus aplicaciones favoritas, en lugar de navegar a través de un navegador.

+ +

Las PWA brindan la capacidad de crear aplicaciones web que pueden disfrutar de estas mismas ventajas.

+ +

No es un concepto completamente nuevo; estas ideas se han revisado muchas veces en la plataforma web con varios enfoques en el pasado. La mejora progresiva y el diseño adaptable ya te permiten crear sitios web compatibles con dispositivos móviles.

+ +

Sin embargo, las PWA brindan todo esto y más sin perder ninguna de las características existentes que hacen que la web sea excelente.

+ +

¿Qué hace que una aplicación sea una PWA?

+ +

Como dijimos anteriormente, las PWA no se crean con una sola tecnología. Representan una nueva filosofía para la creación de aplicaciones web, que incluye algunos patrones específicos, API y otras características. A primera vista, no es tan obvio si una aplicación web es una PWA o no. Una aplicación se podría considerar una PWA cuando cumple con ciertos requisitos o implementa un conjunto de características determinadas — funciona sin conexión, es instalable, es fácil de sincronizar, puede enviar notificaciones automáticas, etc.

+ +

Además, existen herramientas para medir qué tan completa (como porcentaje) es una aplicación web, como Lighthouse. Al implementar varias ventajas tecnológicas, podemos hacer que una aplicación sea más progresiva, y así terminar con una puntuación de Lighthouse más alta. Pero este es solo un indicador aproximado.

+ +

Hay algunos principios clave que una aplicación web debe tratar de observar para ser identificada como PWA. Estos deben ser:

+ + + +

Ofrecer estas funciones y hacer uso de todas las {{anch("Ventajas_de_las_aplicaciones_web", "Ventajas que ofrecen las aplicaciones web")}} puede crear una oferta atractiva y altamente flexible para tus usuarios y clientes.

+ +

¿Vale la pena hacer todo eso?

+ +

¡Absolutamente! Con un esfuerzo relativamente pequeño para implementar las características principales de las PWAs, los beneficios son enormes. Por ejemplo:

+ + + +

Historias de éxito

+ +

Hay muchas historias de éxito de empresas que probaron la ruta PWA, optaron por una experiencia de sitio web mejorada en lugar de una aplicación nativa y, como resultado, obtuvieron importantes beneficios medibles. El sitio web Estadísticas PWA comparte muchos estudios de casos que indican estos beneficios.

+ +

La historia de éxito más conocida probablemente es la de Flipkart Lite. El sitio de comercio electrónico más grande de la India se reconstruyó como una aplicación web progresiva en 2015, lo que resultó en un aumento del 70% en las conversiones. La PWA AliExpress también ha obtenido resultados mucho mejores que la web o la aplicación nativa, con un aumento del 104% en las tasas de conversión para los nuevos usuarios. Dado el aumento de sus ganancias y la cantidad relativamente baja de trabajo requerida para la conversión de estas aplicaciones a PWA, la ventaja es clara.

+ +

Las puestas en marcha emergentes en etapa temprana como couponmoto también han comenzado a usar aplicaciones web progresivas para impulsar una mayor participación de los consumidores, lo que demuestra que pueden ayudar tanto a pequeñas como a grandes empresas para (re)involucrar a los usuarios de manera más eficaz.

+ +

Puedes consultar la lista en pwa.rocks para obtener más ejemplos. Vale la pena mencionar en particular la página hnpwa.com, que muestra una implementación de ejemplo del sitio web de Hacker News (en lugar de la aplicación habitual TodoMVC), en la que puedes ver el uso de varios marcos de desarrollo de la interfaz de usuario web.

+ +

Incluso puedes generar PWA en línea utilizando el sitio web PWABuilder.

+ +

Para obtener información específica sobre el servicio worker y la inserción, asegúrate de consultar el Libro de recetas del servicio worker, una colección de recetas que utilizan los servicios worker en sitios modernos.

+ +

Vale la pena probar un enfoque de PWA, para que puedas ver por ti mismo si funciona para tu aplicación.

+ +

Ventajas de las aplicaciones web

+ +

Una aplicación web progresiva totalmente capaz debería proporcionar todas las siguientes ventajas al usuario.

+ +

Reconocible

+ +

DetectabilidadEl objetivo final es que las aplicaciones web tengan una mejor representación en los motores de búsqueda, sean más fáciles de exponer, catalogar y clasificar, y tener metadatos utilizables por los navegadores para brindarles capacidades especiales.

+ +

Algunas de las capacidades ya se han habilitado en ciertas plataformas basadas en web mediante tecnologías patentadas como Open Graph, que proporciona un formato para especificar metadatos similares en el bloque {{HTMLElement("head")}} de {{Glossary("HTML")}} con etiquetas {{HTMLElement("meta")}}.

+ +

El estándar web relevante aquí es el {{web.link("/es/docs/Web/Manifest", "manifiesto de la aplicación web")}}, que define las características de una aplicación, como el nombre, el icono, la pantalla de presentación y los colores del tema en un archivo de manifiesto con formato {{Glossary("JSON")}}. Esto es para usar en contextos como listas de aplicaciones y pantallas de inicio de dispositivos.

+ +

Instalable

+ +

Instalabilidad

+ +

Una parte fundamental de la experiencia de la aplicación web es que los usuarios tengan iconos de aplicaciones en su pantalla de inicio y los puedan tocar para abrir aplicaciones en su propio contenedor nativo que se sienta bien integrado con la plataforma subyacente.

+ +

Las aplicaciones web modernas pueden hacer que esta aplicación nativa se sienta a través de las propiedades establecidas dentro del manifiesto de la aplicación web y mediante una función disponible en los navegadores de teléfonos inteligentes modernos llamada {{web.link("/es/docs/Web/Progressive_web_apps/Developer_guide/Installing", "instalación de la aplicación web")}}.

+ +

Enlazable

+ +

Enlazable

+ +

Una de las características más poderosas de la web es la capacidad de vincularse a una aplicación en una URL específica sin la necesidad de una tienda de aplicaciones o un proceso de instalación complejo. Así ha sido siempre.

+ +

Independiente de la red

+ +

Independencia de la red

+ +

Las aplicaciones web modernas pueden funcionar cuando hay mala (o incluso inexistente) conectividad con la red. Las ideas básicas detrás de la independencia de la red son poder:

+ + + +

Esto se consigue mediante una combinación de tecnologías: el {{web.link("/es/docs/Web/API/Service_Worker_API", "servicio Workers")}} para controlar las solicitudes de página (por ejemplo, almacenarlas sin conexión), la {{web.link("/es/docs/Web/API/Cache", "API de caché")}} para almacenar respuestas a solicitudes de red sin conexión (muy útil para almacenar activos del sitio) y tecnologías de almacenamiento de datos secundarios como {{web.link("/es/docs/Web/API/Web_Storage_API", "Almacenamiento Web")}} y {{web.link("/es/docs/Web/API/IndexedDB_API", "IndexedDB")}} para almacenar datos de aplicaciones sin conexión.

+ +

Compatibilidad de mejora progresiva

+ +

Mejora progresiva

+ +

Se pueden desarrollar aplicaciones web modernas para proporcionar una experiencia excelente a los navegadores totalmente compatibles y una experiencia aceptable (aunque no tan brillante) a los navegadores menos capaces. Hemos estado haciendo esto durante años con las mejores prácticas, como la mejora progresiva. Al utilizar {{Glossary("Progressive_Enhancement", "Mejora progresiva")}}, las PWAs se utilizan en varios navegadores. Esto significa que los desarrolladores deben tener en cuenta las diferencias en la implementación de algunas características y tecnologías PWA entre diferentes implementaciones de navegadores.

+ +

Reconectable

+ +

Reconectable

+ +

Una de las principales ventajas de las plataformas nativas es la facilidad con la que los usuarios pueden volver a interactuar con las actualizaciones y el contenido nuevo, incluso cuando no están mirando la aplicación o usando sus dispositivos. Las aplicaciones web modernas ahora también pueden hacer esto, utilizando nuevas tecnologías como Servicio Workers para controlar páginas, la {{web.link("/es/docs/Web/API/Push_API", "API Web Push")}} para enviar actualizaciones. directamente del servidor a la aplicación a través de un servicio workers y la {{web.link("/es/docs/Web/API/Notifications_API", "API de notificaciones")}} para generar notificaciones del sistema para ayudar a involucrar a los usuarios cuando no están utilizando activamente su navegador web.

+ +

Adaptable

+ +

Adaptable

+ +

Las aplicaciones web adaptables utilizan tecnologías como {{web.link("/es/docs/Web/CSS/Media_Queries", "consultas de medios")}} y {{web.link("/es/docs/Glossary/Viewport", "viewport")}} para asegurarte de que tu IU se ajuste a cualquier factor de forma: computadora de escritorio, dispositivo móvil, tableta o lo que venga a continuación.

+ +

Segura

+ +

Segura

+ +

Captura de pantalla que muestra una gran cantidad de resultados al buscar "Messenger" al intentar encontrar Facebook Messenger. ¿Cuál es el correcto?La plataforma web proporciona un mecanismo de entrega seguro que evita espionaje y, al mismo tiempo, garantiza que el contenido no haya sido manipulado, siempre que aproveche {{Glossary("HTTPS")}} y desarrolles tus aplicaciones pensando en la seguridad.

+ +

También es fácil para los usuarios asegurarse de que están instalando la aplicación correcta, porque su URL coincidirá con el dominio de tu sitio. Esto es muy diferente de las aplicaciones en las tiendas de aplicaciones, que pueden tener varias aplicaciones con nombres similares, algunas de las cuales incluso pueden estar basadas en su propio sitio, lo que aumenta la confusión. Las aplicaciones web eliminan esa confusión y garantizan que los usuarios obtengan la mejor experiencia posible.

+ +

Compatibilidad con el navegador

+ +

Como se mencionó anteriormente, las PWAs no dependen de una sola API, sino que utilizan varias tecnologías para lograr el objetivo de brindar la mejor experiencia web posible.

+ +

El ingrediente clave requerido para las PWAs es la asistencia de {{web.link("/es/docs/Web/API/Service_Worker_API", "servicio workers")}}. Afortunadamente, los servicios de workers ahora son compatibles con los principales navegadores en computadoras de escritorio y dispositivos móviles.

+ +

Otras características como {{web.link("/es/docs/Web/Manifest", "manifiesto de App Web")}}, {{web.link("/es/docs/Web/API/Push_API", "Push")}}, {{web.link("/es/docs/Web/API/Notifications_API", "Notificaciones")}} y la funcionalidad {{web.link("/es/docs/Web/Progressive_web_apps/Add_to_home_screen", "Agregar a la pantalla de inicio")}} también tienen un amplio soporte. Actualmente, Safari tiene soporte limitado para el manifiesto de aplicaciones web y Agregar a la pantalla de inicio y no admite notificaciones push web. Sin embargo, otros navegadores importantes admiten todas estas funciones.

+ +

Por encima de todo, debes seguir la regla de mejora progresiva: usa tecnologías que mejoren la apariencia y la utilidad de tu aplicación cuando estén disponibles, pero que sigan ofreciendo la funcionalidad básica de tu aplicación cuando esas funciones no estén disponibles. Presentar un sitio web confiable con un buen rendimiento es una consecuencia del uso de estas mejoras; esto, a su vez, significa crear aplicaciones web que sigan las mejores prácticas. De esta manera, todos podrán usar la aplicación, pero aquellos con navegadores modernos se beneficiarán aún más de las funciones de PWA.

+ +

Una aplicación de ejemplo

+ +

En esta serie de artículos, examinaremos el código fuente de un sitio web súper simple que enumera información sobre juegos enviados a la categoría A-Frame en la Competición js13kGames 2017. No tienes que pensar en cuál es el contenido real del sitio web; el punto principal es aprender a utilizar las funciones de PWA en sus propios proyectos.

+ +

Puedes ver esta aplicación en acción en línea, y el código fuente está disponible en GitHub. Examinaremos este código detenidamente a lo largo de esta serie de artículos.

+ +

Por ahora, ve a la segunda parte de esta serie, donde verás la estructura de la aplicación de ejemplo.

+ +

{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}

+ +
{{QuickLinksWithSubpages("/es/docs/Web/Progressive_web_apps/")}}
diff --git a/files/es/web/progressive_web_apps/loading/index.html b/files/es/web/progressive_web_apps/loading/index.html new file mode 100644 index 0000000000..bc44773494 --- /dev/null +++ b/files/es/web/progressive_web_apps/loading/index.html @@ -0,0 +1,155 @@ +--- +title: Carga progresiva +slug: Web/Progressive_web_apps/Loading +tags: + - Cargar + - PWAs + - aplicaciones web progresivas + - js13kGames + - progresiva +translation_of: Web/Progressive_web_apps/Loading +--- +
{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}}
+ +

En artículos anteriores cubrimos las API que nos ayudan a convertir nuestro ejemplo de js13kPWA en una aplicación web progresiva: {{web.link("/es/docs/Web/Progressive_web_apps/Offline_Service_workers", "El servicio workers")}}, {{web.link("/es/docs/Web/Progressive_web_apps/Installable_PWAs", "Manifiestos web")}}, {{web.link("/es/docs/Web/Progressive_web_apps/Re-engagementable_Notifications_Push", "Notificaciones y Push")}}. En este artículo iremos aún más allá y mejoraremos el rendimiento de la aplicación cargando progresivamente sus recursos.

+ +

Primera imagen significativa

+ +

Es importante entregar algo significativo al usuario lo antes posible: cuanto más espere a que se cargue la página, mayor será la posibilidad de que se vaya antes de esperar a que todo termine. Deberíamos poder mostrarles al menos la vista básica de la página que quieren ver, con marcadores de posición en los lugares donde eventualmente se cargará más contenido.

+ +

Esto se podría lograr mediante la carga progresiva, también conocida como carga diferida. Se trata de aplazar la carga de recursos tanto como sea posible (HTML, CSS, JavaScript) y solo cargar inmediatamente los que realmente se necesitan para la primera experiencia.

+ +

Agrupar versus dividir

+ +

Muchos visitantes no pasarán por todas las páginas de un sitio web, sin embargo, el enfoque habitual es agrupar todas las funciones que tenemos en un archivo grande. Un archivo bundle.js puede tener muchos megabytes, y un solo paquete style.css puede contener de todo, desde definiciones básicas de estructura CSS hasta todos los estilos posibles de cada versión del sitio: móvil, tableta, escritorio, solo impresión, etc.

+ +

Es más rápido cargar toda esa información como un archivo en lugar de muchos archivos pequeños, pero si el usuario no necesita todo al principio, podríamos cargar solo lo que es crucial y luego gestionar otros recursos cuando sea necesario.

+ +

Recursos que bloquean el renderizado

+ +

La agrupación es un problema, porque el navegador tiene que cargar HTML, CSS y JavaScript antes de poder pintar sus resultados renderizados en la pantalla. Durante los pocos segundos entre el acceso inicial al sitio web y la finalización de la carga, el usuario ve una página en blanco, lo cual es una mala experiencia.

+ +

Para solucionarlo, podemos, por ejemplo, agregar defer a los archivos JavaScript:

+ +
<script src="app.js" defer></script>
+
+ +

Se descargarán y ejecutarán después que el documento en sí haya sido procesado, por lo que no bloqueará la representación de la estructura HTML. También podemos dividir archivos css y agregarles tipos de medios:

+ +
<link rel="stylesheet" href="style.css">
+<link rel="stylesheet" href="print.css" media="print">
+
+ +

Esto le indicará al navegador que los cargue solo cuando se cumpla la condición.

+ +

En nuestra aplicación de demostración js13kPWA, el CSS es lo suficientemente simple como para dejarlo todo en un solo archivo sin reglas específicas sobre cómo cargarlos. Podríamos ir aún más lejos y mover todo desde style.css a la etiqueta <style> en el <head> del index.html: esto mejoraría aún más el rendimiento, pero para la legibilidad del ejemplo también omitiremos este enfoque.

+ +

Imágenes

+ +

Además de JavaScript y CSS, es probable que los sitios web contengan varias imágenes. Cuando incluyes elementos {{HTMLElement("img")}} en tu HTML, todas las imágenes a las que se hace referencia se buscarán y descargarán durante el acceso inicial al sitio web. No es inusual tener megabytes de datos de imágenes para descargar antes de anunciar que el sitio está listo, pero esto nuevamente crea una mala percepción del rendimiento. No necesitamos todas las imágenes en la mejor calidad posible al comienzo de la visualización del sitio.

+ +

Esto se puede optimizar. En primer lugar, debes utilizar herramientas o servicios similares a TinyPNG, que reducirán el tamaño del archivo de tus imágenes sin alterar demasiado la calidad. Si has superado ese punto, puede empezar a pensar en optimizar la carga de imágenes mediante JavaScript. Explicaremos esto a continuación.

+ +

Marcador de posición de imagen

+ +

En lugar de tener todas las capturas de pantalla de los juegos referenciados en los atributos del elemento <img> src, que obligarán al navegador a descargarlos automáticamente, podemos hacerlo de forma selectiva a través de JavaScript. En su lugar, la aplicación js13kPWA usa una imagen de marcador de posición, que es pequeña y liviana, mientras que las rutas finales a las imágenes de destino se almacenan en los atributos data-src:

+ +
<img src='data/img/placeholder.png' data-src='data/img/SLUG.jpg' alt='NAME'>
+
+ +

Esas imágenes se cargarán mediante JavaScript después que el sitio termine de construir la estructura HTML. La imagen del marcador de posición se escala de la misma manera que las imágenes originales, por lo que ocupará el mismo espacio y no hará que el diseño se vuelva a pintar a medida que se cargan las imágenes.

+ +

Cargar a través de JavaScript

+ +

El archivo app.js procesa los atributos data-src así:

+ +
let imagesToLoad = document.querySelectorAll('img[data-src]');
+const loadImages = (image) => {
+  image.setAttribute('src', image.getAttribute('data-src'));
+  image.onload = () => {
+    image.removeAttribute('data-src');
+  };
+};
+ +

La variable imagesToLoad contiene referencias a todas las imágenes, mientras que la función loadImages mueve la ruta de data-src a src. Cuando cada imagen está realmente cargada, eliminamos su atributo data-src porque ya no es necesario. Luego recorremos cada imagen y la cargamos:

+ +
imagesToLoad.forEach((img) => {
+  loadImages(img);
+});
+ +

Desenfoque en CSS

+ +

Para que todo el proceso sea más atractivo visualmente, el marcador de posición se difumina en CSS.

+ +

Captura de pantalla de imágenes de marcador de posición en la aplicación js13kPWA.

+ +

Renderizamos las imágenes con un desenfoque al principio, por lo que se puede lograr una transición hacia la nitidez:

+ +
article img[data-src] {
+  filter: blur(0.2em);
+}
+
+article img {
+  filter: blur(0em);
+  transition: filter 0.5s;
+}
+ +

Esto eliminará el efecto de desenfoque en medio segundo, el cual se ve lo suficientemente bien para el efecto de "carga".

+ +

Carga bajo demanda

+ +

El mecanismo de carga de imágenes explicado en la sección anterior funciona bien: carga las imágenes después de renderizar la estructura HTML y aplica un agradable efecto de transición en el proceso. El problema es que todavía carga todas las imágenes simultáneamente, aunque el usuario solo verá las dos o tres primeras al cargar la página.

+ +

Este problema se puede resolver con la nueva {{web.link("/es/docs/Web/API/Intersection_Observer_API", "API observador de intersecciones")}}; con esto nos podemos asegurar de que las imágenes se carguen solo cuando aparezcan en la ventana gráfica.

+ +

Observador de intersecciones

+ +

Esta es una mejora progresiva del ejemplo de uso anterior: {{web.link("/es/docs/Web/API/Intersection_Observer_API", "Observador de intersección")}} cargará las imágenes destino solo cuando el usuario se desplaza hacia abajo, lo cual hace que se exhiban en la ventana gráfica.

+ +

Así es como se ve el código relevante:

+ +
if('IntersectionObserver' in window) {
+  const observer = new IntersectionObserver((items, observer) => {
+    items.forEach((item) => {
+      if(item.isIntersecting) {
+        loadImages(item.target);
+        observer.unobserve(item.target);
+      }
+    });
+  });
+  imagesToLoad.forEach((img) => {
+    observer.observe(img);
+  });
+} else {
+  imagesToLoad.forEach((img) => {
+    loadImages(img);
+  });
+}
+ +

Si se admite el objeto {{DOMxRef("IntersectionObserver")}}, la aplicación crea una nueva instancia del mismo. La función pasada como parámetro está manejando el caso cuando uno o más elementos se cruzan con el observador (es decir, aparecen dentro de la ventana gráfica). Podemos iterar sobre cada caso y reaccionar en consecuencia: cuando una imagen es visible, cargamos la imagen correcta y dejamos de observarla porque ya no necesitamos observarla.

+ +

Reiteremos nuestra mención anterior de la mejora progresiva: el código está escrito para que la aplicación funcione tanto si Intersection Observer es compatible como si no. Si no es así, simplemente cargamos las imágenes usando el enfoque más básico cubierto anteriormente.

+ +

Mejoras

+ +

Recuerda que hay muchas formas de optimizar los tiempos de carga, y este ejemplo explora solo uno de los enfoques. Puedes intentar hacer que tus aplicaciones sean más a prueba de balas haciéndolas funcionar sin JavaScript, ya sea utilizando {{HTMLElement("noscript")}} para mostrar la imagen con el src final ya asignado, o envolviendo Etiquetas <img> con elementos {{HTMLElement("a")}} que apuntan a las imágenes destino, para que el usuario pueda hacer clic y acceder a ellas cuando lo desee.

+ +

No lo haremos porque la aplicación en sí depende de JavaScript; sin él, la lista de juegos ni siquiera se cargaría y el código del servicio worker no se ejecutaría.

+ +

Podríamos reescribir el proceso de carga para cargar no solo las imágenes, sino los elementos completos que consisten en descripciones completas y enlaces. Funcionaría como un desplazamiento infinito: cargar los elementos de la lista solo cuando el usuario desplaza la página hacia abajo. De esa manera, la estructura HTML inicial sería mínima, el tiempo de carga sería aún menor y tendríamos beneficios de rendimiento aún mayores.

+ +

Conclusión

+ +

Menos archivos para cargar inicialmente, archivos más pequeños divididos en módulos, uso de marcadores de posición y carga de más contenido bajo demanda: esto ayudará a lograr tiempos de carga inicial más rápidos, lo que brinda beneficios al creador de la aplicación y ofrece una experiencia más fluida para el usuario.

+ +

Recuerda el enfoque de mejora progresiva: ofrece un producto utilizable sin importar el dispositivo o la plataforma, pero asegúrate de enriquecer la experiencia a quienes utilizan navegadores modernos.

+ +

Pensamientos finales

+ +

Eso es todo por esta serie de tutoriales: revisamos el código fuente de la aplicación de ejemplo js13kPWA y aprendimos sobre el uso de funciones de aplicaciones web progresivas, incluida una {{web.link("/es/docs/Web/Progressive_web_apps/Introduction", "Introducción")}}, {{web.link("/es/docs/Web/Progressive_web_apps/App_structure", "estructura PWA")}}, {{web.link("/es/docs/Web/Progressive_web_apps/Offline_Service_workers", "disponibilidad sin conexión con servicio workers")}}, {{web.link("/es/docs/Web/Progressive_web_apps/Installable_PWAs", "PWAs instalables")}}, y finalmente notificaciones. También explicamos el push con la ayuda del Libro de recetas para el servicio workers. Y en este artículo, hemos analizado el concepto de carga progresiva, incluido un interesante ejemplo que hace uso de la {{web.link("/es/docs/Web/API/Intersection_Observer_API", "API de Intersection Observer")}}.

+ +

No dudes en experimentar con el código, mejorar tu aplicación existente con funciones de PWA o crear algo completamente nuevo por tu cuenta. Las PWAs ofrecen una gran ventaja sobre las aplicaciones web habituales.

+ +

{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}}

+ +

{{QuickLinksWithSubpages("/es/docs/Web/Progressive_web_apps/")}}

diff --git a/files/es/web/progressive_web_apps/offline_service_workers/index.html b/files/es/web/progressive_web_apps/offline_service_workers/index.html new file mode 100644 index 0000000000..d7349b1a8a --- /dev/null +++ b/files/es/web/progressive_web_apps/offline_service_workers/index.html @@ -0,0 +1,208 @@ +--- +title: Hacer que las PWAs trabajen desconectadas con servicio workers +slug: Web/Progressive_web_apps/Offline_Service_workers +tags: + - Desconectada + - PWAs + - Servicio workers + - aplicaciones web progresivas + - js13kGames + - progresiva +translation_of: Web/Progressive_web_apps/Offline_Service_workers +--- +
{{PreviousMenuNext("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps/Installable_PWAs", "Web/Progressive_web_apps")}}
+ +

Ahora que hemos visto cómo se ve la estructura de js13kPWA y hemos visto el intérprete básico en funcionamiento, veamos cómo se implementan las capacidades sin conexión con el Servicio Worker. En este artículo, analizamos cómo se usa en nuestro ejemplo de js13kPWA (ve el código fuente también). Examinamos cómo agregar funcionalidad fuera de línea.

+ +

El servicio workers explicado

+ +

El servicio workers son un delegado virtual entre el navegador y la red. Finalmente, solucionan problemas con los que los desarrolladores de aplicaciones para el usuario han luchado durante años, en particular, cómo almacenar correctamente en caché los activos de un sitio web y ponerlos a disposición cuando el dispositivo del usuario está desconectado.

+ +

Se ejecutan en un hilo separado del código JavaScript principal de nuestra página y no tienen acceso a la estructura DOM. Esto introduce un enfoque diferente al de la programación web tradicional — la API no bloquea y puede enviar y recibir comunicación entre diferentes contextos. Puede darle a un servicio worker algo en lo que trabajar y recibir el resultado cuando esté listo utilizando un enfoque basado en una {{JSxRef("Objetos_globales/Promise", "promesa")}}.

+ +

Pueden hacer mucho más que "solo" ofrecer capacidades sin conexión, incluido el manejo de notificaciones, la realización de cálculos pesados​en un hilo separado, etc. El servicio workers es bastante poderoso, ya que pueden tomar el control de las solicitudes de red, modificarlas, entregar respuestas personalizadas recuperadas de la caché o sintetizar respuestas por completo.

+ +

Seguridad

+ +

Debido a que son tan poderosos, los Servicios Workers solo se pueden ejecutar en contextos seguros (es decir, HTTPS). Si deseas experimentar primero antes de enviar tu código a producción, siempre puedes probar en un anfitrión local o configurar las páginas de GitHub — ambas admiten HTTPS.

+ +

Desconectado primero

+ +

El patrón "desconectado primero" o "primero caché" es la estrategia más popular para entregar contenido al usuario. Si un recurso está almacenado en caché y disponible sin conexión, devuélvelo primero antes de intentar descargarlo del servidor. Si aún no está en la caché, descárgalo y almacénalo para uso futuro.

+ +

"Progresiva" en PWA

+ +

Cuando se implementa correctamente como una mejora progresiva, el servicio workers puede beneficiar a los usuarios que tienen navegadores modernos que admiten la API al brindar soporte fuera de línea, pero no romperán nada para aquellos que usan navegadores heredados.

+ +

El servicio workers en la aplicación js13kPWA

+ +

Suficiente teoría, ¡veamos algo de código real!

+ +

Registrar el servicio worker

+ +

Comenzaremos mirando el código que registra un nuevo Servicio Worker, en el archivo app.js:

+ +

Nota: Usamos la sintaxis de las funciones flecha de ES6 en la implementación del servicio worker

+ +
if('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('./pwa-examples/js13kpwa/sw.js');
+};
+ +

Si la API del servicio worker es compatible con el navegador, se registra en el sitio mediante el método {{DOMxRef("ServiceWorkerContainer.register()")}}. Su contenido reside en el archivo sw.js y se puede ejecutar después de que el registro sea exitoso. Es la única parte del código de servicio worker que se encuentra dentro del archivo app.js; todo lo demás que sea específico de servicio worker se escribe en el archivo sw.js.

+ +

Ciclo de vida de un servicio worker

+ +

Cuando se completa el registro, el archivo sw.js se descarga automáticamente, luego se instala y finalmente se activa.

+ +

Instalación

+ +

La API nos permite agregar escuchas de eventos para los eventos clave que nos interesan; el primero es el evento install:

+ +
self.addEventListener('install', (e) => {
+    console.log('[Service Worker] Install');
+});
+ +

En el escucha de install, podemos iniciar la caché y agregarle archivos para su uso sin conexión. Nuestra aplicación js13kPWA hace exactamente eso.

+ +

Primero, se crea una variable para almacenar el nombre de la caché y los archivos del intérprete de la aplicación se enumeran en un arreglo.

+ +
var cacheName = 'js13kPWA-v1';
+var appShellFiles = [
+  '/pwa-examples/js13kpwa/',
+  '/pwa-examples/js13kpwa/index.html',
+  '/pwa-examples/js13kpwa/app.js',
+  '/pwa-examples/js13kpwa/style.css',
+  '/pwa-examples/js13kpwa/fonts/graduate.eot',
+  '/pwa-examples/js13kpwa/fonts/graduate.ttf',
+  '/pwa-examples/js13kpwa/fonts/graduate.woff',
+  '/pwa-examples/js13kpwa/favicon.ico',
+  '/pwa-examples/js13kpwa/img/js13kgames.png',
+  '/pwa-examples/js13kpwa/img/bg.png',
+  '/pwa-examples/js13kpwa/icons/icon-32.png',
+  '/pwa-examples/js13kpwa/icons/icon-64.png',
+  '/pwa-examples/js13kpwa/icons/icon-96.png',
+  '/pwa-examples/js13kpwa/icons/icon-128.png',
+  '/pwa-examples/js13kpwa/icons/icon-168.png',
+  '/pwa-examples/js13kpwa/icons/icon-192.png',
+  '/pwa-examples/js13kpwa/icons/icon-256.png',
+  '/pwa-examples/js13kpwa/icons/icon-512.png'
+];
+ +

A continuación, los enlaces a las imágenes que se cargarán junto con el contenido del archivo data/games.js se generan en el segundo arreglo. Después de eso, ambos arreglos se fusionan usando la función {{JSxRef("Array.prototype.concat()")}}.

+ +
var gamesImages = [];
+for(var i=0; i<games.length; i++) {
+  gamesImages.push('data/img/'+games[i].slug+'.jpg');
+}
+var contentToCache = appShellFiles.concat(gamesImages);
+ +

Entonces podemos manejar el evento install en sí mismo:

+ +
self.addEventListener('install', (e) => {
+  console.log('[Service Worker] Install');
+  e.waitUntil(
+    caches.open(cacheName).then((cache) => {
+          console.log('[Servicio Worker] Almacena todo en caché: contenido e intérprete de la aplicación');
+      return cache.addAll(contentToCache);
+    })
+  );
+});
+ +

Aquí hay dos cosas que necesitan una explicación: qué hace {{DOMxRef("ExtendableEvent.waitUntil")}} y qué es el objeto {{DOMxRef("Caches", "caches")}}.

+ +

El servicio worker no se instala hasta que se ejecuta el código dentro de waitUntil. Este devuelve una promesa — este enfoque es necesario porque la instalación puede llevar algún tiempo, por lo que tenemos que esperar a que finalice.

+ +

caches es un objeto {{DOMxRef("CacheStorage")}} especial disponible en el ámbito del servicio worker dado para permitir guardar datos, guardar en el {{web.link("/es/docs/Web/API/Web_Storage_API", "almacenamiento web")}} no funcionará porque el almacenamiento web es síncrono. Con el servicio workers, usamos la API de Cache en su lugar.

+ +

Aquí, abrimos una caché con un nombre dado, luego agregamos a la caché todos los archivos que nuestra aplicación usa, para que estén disponibles la próxima vez que se cargue (identificado por la URL de la solicitud).

+ +

Activación

+ +

También hay un evento activate, que se usa de la misma manera que install. Este evento generalmente se usa para eliminar cualquier archivo que ya no sea necesario y limpiar después la aplicación en general. No es necesario que hagamos eso en nuestra aplicación, así que lo omitiremos.

+ +

Responder a las recuperaciones

+ +

También tenemos un evento fetch a nuestra disposición, que se activa cada vez que se activa una solicitud HTTP desde nuestra aplicación. Esto es muy útil, ya que nos permite interceptar solicitudes y reaccionar con respuestas personalizadas. Aquí hay un sencillo ejemplo de uso:

+ +
self.addEventListener('fetch', (e) => {
+    console.log('[Servicio Worker] Recurso obtenido ' + e.request.url);
+});
+ +

La respuesta puede ser cualquier cosa que queramos: el archivo solicitado, su copia en caché o un fragmento de código JavaScript que hará algo específico; las posibilidades son infinitas.

+ +

En nuestra aplicación de ejemplo, servimos contenido de la caché en lugar de la red siempre que el recurso realmente esté en la caché. Hacemos esto tanto si la aplicación está en línea como si está fuera de línea. Si el archivo no está en la caché, la aplicación primero lo agrega allí antes de servirlo:

+ +
self.addEventListener('fetch', (e) => {
+  e.respondWith(
+    caches.match(e.request).then((r) => {
+          console.log('[Servicio Worker] Obteniendo recurso: '+e.request.url);
+      return r || fetch(e.request).then((response) => {
+                return caches.open(cacheName).then((cache) => {
+          console.log('[Servicio Worker] Almacena el nuevo recurso: '+e.request.url);
+          cache.put(e.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});
+ +

Aquí, respondemos al evento fetch con una función que intenta encontrar el recurso en la caché y devolver la respuesta si está allí. Si no es así, usamos otra solicitud de recuperación para obtenerla de la red, luego almacenamos la respuesta en la caché para que esté disponible allí la próxima vez que se solicite.

+ +

El método {{DOMxRef("FetchEvent.respondWith")}} toma el control; esta es la parte que funciona como un servidor delegado entre la aplicación y la red. Esto nos permite responder a cada solicitud con cualquier cosa que queramos: preparada por el servicio worker, tomada de la caché o modificada si es necesario.

+ +

¡Eso es! Nuestra aplicación almacena en caché sus recursos al instalarlos y los sirve con la recuperación de la caché, por lo tanto, funciona incluso si el usuario está desconectado. También almacena en caché contenido nuevo cada vez que se agrega.

+ +

Actualizaciones

+ +

Todavía hay un punto que cubrir: ¿cómo se actualiza un servicio worker cuando hay disponible una nueva versión de la aplicación que contiene nuevos activos? El número de versión en el nombre de la caché es clave para esto:

+ +
var cacheName = 'js13kPWA-v1';
+ +

Cuando esto se actualice a v2, podemos agregar todos nuestros archivos (incluidos nuestros archivos nuevos) a una nueva caché:

+ +
contentToCache.push('/pwa-examples/js13kpwa/icons/icon-32.png');
+
+// ...
+
+self.addEventListener('install', (e) => {
+  e.waitUntil(
+    caches.open('js13kPWA-v2').then((cache) => {
+      return cache.addAll(contentToCache);
+    })
+  );
+});
+ +

Se instala un nuevo servicio worker en segundo plano y el anterior (v1) funciona correctamente hasta que no hay páginas que lo utilicen; el nuevo servicio worker se activa y se hace cargo de la administración de la página desde el anterior.

+ +

Limpiar la caché

+ +

¿Recuerdas el evento active que omitimos?, se puede usar para borrar la antigua caché que ya no necesitamos:

+ +
self.addEventListener('activate', (e) => {
+  e.waitUntil(
+    caches.keys().then((keyList) => {
+          return Promise.all(keyList.map((key) => {
+        if(key !== cacheName) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});
+ +

Esto asegura que solo tengamos los archivos que necesitamos en la caché, por lo que no dejamos basura; el espacio de caché disponible en el navegador es limitado, por lo que es una buena idea limpiarlo nosotros mismos después.

+ +

Otros casos de uso

+ +

Servir archivos desde la caché no es la única característica que ofrece el servicio worker. Si tienes que hacer cálculos pesados, los puedes descargar del hilo principal y hacerlos en el worker, y recibir el resultado tan pronto como estén disponibles. En cuanto al rendimiento, puedes obtener recursos que no se necesitan en este momento, pero que podrían serlo en un futuro cercano, por lo que la aplicación será más rápida cuando realmente los necesite.

+ +

Resumen

+ +

En este artículo, analizamos cómo puedes hacer que tu PWA funcione sin conexión con el servicio workers. Asegúrate de consultar nuestra documentación adicional si deseas obtener más información sobre los conceptos detrás de la {{web.link("/es/docs/Web/API/Service_Worker_API", "API de Service Worker")}} y cómo usarla con más detalle.

+ +

El servicio workers también se utilizan cuando se trata de {{web.link("/es/docs/Web/API/Push_API", "notificaciones push")}}; esto se explicará en un artículo posterior.

+ +

{{PreviousMenuNext("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps/Installable_PWAs", "Web/Progressive_web_apps")}}

+ +
{{QuickLinksWithSubpages("/es/docs/Web/Progressive_web_apps/")}}
diff --git a/files/es/web/progressive_web_apps/re-engageable_notifications_push/index.html b/files/es/web/progressive_web_apps/re-engageable_notifications_push/index.html new file mode 100644 index 0000000000..0c03dfb151 --- /dev/null +++ b/files/es/web/progressive_web_apps/re-engageable_notifications_push/index.html @@ -0,0 +1,251 @@ +--- +title: >- + Cómo hacer que las PWAs se puedan volver a conectar usando Notificaciones y + Push +slug: Web/Progressive_web_apps/Re-engageable_Notifications_Push +tags: + - Notificaciones + - PWAs + - Push + - aplicaciones web progresivas + - js13kGames + - progresiva +translation_of: Web/Progressive_web_apps/Re-engageable_Notifications_Push +--- +
{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}
+ +

Tener la capacidad de almacenar en caché el contenido de una aplicación para que funcione sin conexión es una gran característica. Permitir que el usuario instale la aplicación web en su pantalla de inicio es aún mejor. Pero en lugar de depender solo de las acciones del usuario, podemos hacer más, utilizando mensajes push y notificaciones para volver a interactuar automáticamente y entregar contenido nuevo siempre que esté disponible.

+ +

Dos APIs, un objetivo

+ +

{{web.link("/es/docs/Web/API/Push_API", "API Push")}} y {{web.link("/es/docs/Web/API/Notifications_API", "API de notificaciones")}} son dos APIs independientes, pero funcionan bien juntas cuando deseas proporcionar una funcionalidad atractiva en tu aplicación. Push se utiliza para entregar contenido nuevo desde el servidor a la aplicación sin ninguna intervención del lado del cliente, y su operación es manejada por el servicio worker de la aplicación. El servicio worker puede utilizar las notificaciones para mostrar nueva información al usuario, o al menos alertarlo cuando algo se haya actualizado.

+ +

Funcionan fuera de la ventana del navegador, al igual que el servicio worker, por lo que se pueden enviar actualizaciones y se pueden mostrar notificaciones cuando la página de la aplicación está desenfocada o incluso cerrada.

+ +

Notificaciones

+ +

Comencemos con las notificaciones: pueden funcionar sin push, pero son muy útiles cuando se combinan con ellas. Para empezar, veámoslo de forma aislada.

+ +

Pedir permiso

+ +

Para mostrar una notificación, primero debes solicitar permiso. Sin embargo, en lugar de mostrar la notificación de inmediato, la mejor práctica dicta que deberíamos mostrar la ventana emergente cuando el usuario la solicite haciendo clic en un botón:

+ +
var button = document.getElementById("notifications");
+button.addEventListener('click', function(e) {
+    Notification.requestPermission().then(function(result) {
+        if(result === 'granted') {
+            randomNotification();
+        }
+    });
+});
+ +

Esto muestra una ventana emergente usando el propio servicio de notificaciones del sistema operativo:

+ +

Notificación de js13kPWA.

+ +

Cuando el usuario confirma recibir notificaciones, la aplicación las puede mostrar. El resultado de la acción del usuario puede ser predeterminada, otorgada o denegada. La opción predeterminada se elige cuando el usuario no hace una elección, y las otras dos se establecen cuando el usuario hace clic en sí o no, respectivamente.

+ +

Cuando se acepta, el permiso funciona tanto para notificaciones como para push.

+ +

Crea una notificación

+ +

La aplicación de ejemplo crea una notificación a partir de los datos disponibles: se elige un juego al azar y el elegido alimenta la notificación con el contenido — establece el nombre del juego como título, menciona al autor en el cuerpo y muestra la imagen como un icono:

+ +
function randomNotification() {
+    var randomItem = Math.floor(Math.random()*games.length);
+    var notifTitle = games[randomItem].name;
+    var notifBody = 'Creado por '+games[randomItem].author+'.';
+    var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
+    var options = {
+        body: notifBody,
+        icon: notifImg
+    }
+    var notif = new Notification(notifTitle, options);
+    setTimeout(randomNotification, 30000);
+}
+ +

Se crea una nueva notificación aleatoria cada 30 segundos hasta que se vuelve demasiado molesta y el usuario la desactiva. (En una aplicación real, las notificaciones deberían ser mucho menos frecuentes y más útiles). La ventaja de la API de notificaciones es que utiliza la funcionalidad de notificación del sistema operativo. Esto significa que las notificaciones se pueden mostrar al usuario incluso cuando no están mirando la aplicación web, y las notificaciones son similares a las que muestran las aplicaciones nativas.

+ +

Push

+ +

Push es más complicado que las notificaciones: necesitamos suscribirnos a un servidor que luego enviará los datos a la aplicación. El servicio worker de la aplicación recibirá datos push del servidor, que luego se pueden mostrar usando el sistema de notificaciones u otro mecanismo si lo deseas.

+ +

La tecnología aún se encuentra en una etapa muy temprana; algunos ejemplos de uso utilizan la plataforma de mensajería en la nube de Google, pero se están reescribiendo para admitir IDVAP (Identificación voluntaria de la aplicación), que ofrece una capa adicional de seguridad para tu aplicación. Puedes examinar los ejemplos del libro de recetas del servicio workers, intenta configurar un servidor de mensajería push usando Firebase, o crea tu propio servidor (utilizando Node.js, por ejemplo).

+ +

Como se mencionó anteriormente, para poder recibir mensajes push, debes tener un servicio worker, cuyos conceptos básicos ya se explican en {{web.link("/es/docs/Web/Apps/Progressive/Offline_Service_workers", "Cómo hacer que las PWAs funcionen sin conexión con el servicio workers")}}. Dentro del servicio workers, se crea un mecanismo de suscripción del servicio push.

+ +
registration.pushManager.getSubscription() .then( /* ... */ );
+ +

Una vez que el usuario está suscrito, puede recibir notificaciones automáticas del servidor.

+ +

Desde el lado del servidor, todo el proceso tiene que estar encriptado con claves públicas y privadas por razones de seguridad — permitir que todos envíen mensajes push sin seguridad usando tu aplicación sería una idea terrible. Consulta la página de prueba de encriptación de datos Push en la Web para obtener información detallada sobre cómo proteger el servidor. El servidor almacena toda la información recibida cuando el usuario se suscribió, por lo que los mensajes se pueden enviar más tarde cuando sea necesario.

+ +

Para recibir mensajes push, podemos escuchar el evento {{event("push")}} en el archivo Service Worker:

+ +
self.addEventListener('push', function(e) { /* ... */ });
+ +

Los datos se pueden recuperar y luego mostrar como una notificación al usuario inmediatamente. Esto, por ejemplo, se puede usar para recordarle algo al usuario o para informarle sobre contenido nuevo disponible en la aplicación.

+ +

Ejemplo push

+ +

Push necesita que la parte del servidor funcione, por lo que no podemos incluirla en el ejemplo js13kPWA alojado en las páginas de GitHub, ya que solo ofrece alojamiento de archivos estáticos. Todo se explica en el Libro de recetas para servicios worker; consulta el Demo de carga push.

+ +

Esta demostración consta de tres archivos:

+ + + +

Exploremos todos estos

+ +

index.js

+ +

El archivo index.js comienza registrando el servicio worker:

+ +
navigator.serviceWorker.register('service-worker.js')
+.then(function(registration) {
+  return registration.pushManager.getSubscription()
+  .then(async function(subscription) {
+      // parte de registro
+  });
+})
+.then(function(subscription) {
+    // parte de la suscripción
+});
+ +

Es un poco más complicado que el servicio worker que vimos en la demostración de js13kPWA. En este caso particular, después de registrarse, usamos el objeto de registro para suscribirnos y luego usamos el objeto de suscripción resultante para completar todo el proceso.

+ +

En la parte de registro, el código se ve así:

+ +
if(subscription) {
+    return subscription;
+}
+ +

Si el usuario ya se ha suscrito, devolvemos el objeto de suscripción y pasamos a la parte de suscripción. Si no, iniciamos una nueva suscripción:

+ +
const response = await fetch('./vapidPublicKey');
+const vapidPublicKey = await response.text();
+const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);
+ +

La aplicación obtiene la clave pública del servidor y convierte la respuesta en texto; luego se debe convertir a un Uint8Array (para admitir Chrome). Para obtener más información sobre las claves IDVAP, puedes leer Envío de notificaciones WebPush identificadas por IDVAP a través de la publicación de blog del servicio Push de Mozilla.

+ +

La aplicación ahora puede usar {{DOMxRef("PushManager")}} para suscribir al nuevo usuario. Hay dos opciones pasadas al método {{DOMxRef("PushManager.subscribe()")}} — la primera es userVisibleOnly: true, lo cual significa que todas las notificaciones enviadas al usuario serán visibles para ellos, y el segundo es applicationServerKey, que contiene nuestra clave IDVAP adquirida y convertida con éxito.

+ +
return registration.pushManager.subscribe({
+    userVisibleOnly: true,
+    applicationServerKey: convertedVapidKey
+});
+ +

Ahora pasemos a la parte de la suscripción: la aplicación primero envía los detalles de la suscripción como JSON al servidor mediante Fetch.

+ +
fetch('./register', {
+    method: 'post',
+    headers: {
+        'Content-type': 'application/json'
+    },
+    body: JSON.stringify({
+        subscription: subscription
+    }),
+});
+ +

Luego, se define la función {{DOMxRef("onclick", "GlobalEventHandlers.onclick")}} en el botón Suscribirse:

+ +
document.getElementById('doIt').onclick = function() {
+    const payload = document.getElementById('notification-payload').value;
+    const delay = document.getElementById('notification-delay').value;
+    const ttl = document.getElementById('notification-ttl').value;
+
+    fetch('./sendNotification', {
+        method: 'post',
+        headers: {
+            'Content-type': 'application/json'
+        },
+        body: JSON.stringify({
+            subscription: subscription,
+            payload: payload,
+            delay: delay,
+            ttl: ttl,
+        }),
+    });
+};
+ +

Cuando se hace clic en el botón, fetch solicita al servidor que envíe la notificación con los parámetros dados: payload es el texto que se mostrará en la notificación, delay define un retraso en segundos hasta que se muestra la notificación, y ttl es la configuración de tiempo de vida que mantiene la notificación disponible en el servidor durante un período de tiempo específico, también definido en segundos.

+ +

Ahora, en el siguiente archivo JavaScript.

+ +

server.js

+ +

La parte del servidor está escrita en Node.js y se debe alojar en un lugar adecuado, que es un tema de un artículo completamente separado. Aquí solo proporcionaremos una descripción general de alto nivel.

+ +

El módulo web-push se utiliza para configurar las claves IDVAP y, opcionalmente, generarlas si aún no están disponibles.

+ +
const webPush = require('web-push');
+
+if (!process.env.VAPID_PUBLIC_KEY || !process.env.VAPID_PRIVATE_KEY) {
+  console.log("Debes configurar las variables de entorno VAPID_PUBLIC_KEY y " +
+    "VAPID_PRIVATE_KEY. Puedes utilizar las siguientes: ");
+  console.log(webPush.generateVAPIDKeys());
+  return;
+}
+
+webPush.setVapidDetails(
+  'https://serviceworke.rs/',
+  process.env.VAPID_PUBLIC_KEY,
+  process.env.VAPID_PRIVATE_KEY
+);
+
+ +

A continuación, un módulo define y exporta todas las rutas que una aplicación necesita manejar: obtener la clave pública IDVAP, registrarse y luego enviar notificaciones. Puedes ver las variables del archivo index.js que se está utilizando: payload, delay y ttl.

+ +
module.exports = function(app, route) {
+  app.get(route + 'vapidPublicKey', function(req, res) {
+    res.send(process.env.VAPID_PUBLIC_KEY);
+  });
+
+  app.post(route + 'register', function(req, res) {
+
+    res.sendStatus(201);
+  });
+
+  app.post(route + 'sendNotification', function(req, res) {
+    const subscription = req.body.subscription;
+    const payload = req.body.payload;
+    const options = {
+      TTL: req.body.ttl
+    };
+
+    setTimeout(function() {
+      webPush.sendNotification(subscription, payload, options)
+      .then(function() {
+        res.sendStatus(201);
+      })
+      .catch(function(error) {
+        console.log(error);
+        res.sendStatus(500);
+      });
+    }, req.body.delay * 1000);
+  });
+};
+ +

service-worker.js

+ +

El último archivo que veremos es el del servicio worker:

+ +
self.addEventListener('push', function(event) {
+    const payload = event.data ? event.data.text() : 'no payload';
+    event.waitUntil(
+        self.registration.showNotification('ServiceWorker Cookbook', {
+            body: payload,
+        })
+    );
+});
+ +

Todo lo que hace es agregar un escucha para el evento {{Event("push")}}, crear la variable de carga útil que consiste en el texto tomado de los datos (o crear una cadena para usar si los datos están vacíos), y luego esperar hasta la notificación se muestra al usuario.

+ +

No dudes en explorar el resto de los ejemplos en el Libro de recetas para el servicio workers si deseas saber cómo se manejan: el código fuente completo está disponible en GitHub. Hay una gran colección de ejemplos de uso que muestran el uso general, pero también la inserción web, las estrategias de almacenamiento en caché, el rendimiento, el trabajo sin conexión y más.

+ +

{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}

+ +
{{QuickLinksWithSubpages("/es/docs/Web/Progressive_web_apps/")}}
diff --git a/files/es/web/progressive_web_apps/ventajas/index.html b/files/es/web/progressive_web_apps/ventajas/index.html new file mode 100644 index 0000000000..2268f23321 --- /dev/null +++ b/files/es/web/progressive_web_apps/ventajas/index.html @@ -0,0 +1,62 @@ +--- +title: Ventajas de una aplicación web progresiva (AWP) +slug: Web/Progressive_web_apps/Ventajas +tags: + - AWP + - aplicaciones web progresivas + - conceptos + - ventajas +translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications +--- +

Las Aplicaciones Web Progresivas deben tener todas las ventajas enumeradas en las siguientes secciones a continuación.

+ + + +

Reconocible

+ +

El objetivo final es que las aplicaciones web deben tener una mejor representación en los motores de búsqueda, ser más fáciles de exponer, catalogar y clasificar, y tener metadatos que los navegadores puedan utilizar para darles capacidades especiales.

+ +

Algunas de las capacidades ya se han habilitado en ciertas plataformas basadas en la web mediante tecnologías patentadas como Open Graph, que proporciona un formato para especificar metadatos similares en el <head> de HTML usando metaetiquetas.

+ +

El estándar web relevante aquí es el Manifiesto de aplicación web, que define las características de una aplicación, como el nombre, el icono, la pantalla de presentación y los colores del tema en un archivo de manifiesto con formato JSON. Esto es para usar en contextos como listados de aplicaciones y pantallas de inicio de dispositivos.

+ + + +

Instalable

+ +

Una parte central de la experiencia de aplicaciones es que los usuarios tengan iconos de aplicaciones en su pantalla de inicio, y ser capaz de pulsar para abrir aplicaciones en su propio contenedor nativo que se siente bien integrado con la plataforma subyacente.

+ +

Las aplicaciones web modernas pueden tener esta sensación de aplicación nativa a través de las propiedades establecidas dentro del manifiesto de la aplicación web, y a través de una función disponible en los navegadores de teléfonos inteligentes modernos llamada Añadir a la página de inicio.

+ +

Enlazable

+ +

Una de las características más potentes de la Web es ser capaz de enlazar a una aplicación en una URL específica. No necesita tienda de aplicaciones, ningún proceso de instalación complejo. Así es como siempre ha sido.

+ +

Independencia de la red

+ +

Las aplicaciones web modernas pueden funcionar cuando la red no es confiable, o incluso inexistente. Las ideas básicas detrás de la independencia de la red son:

+ + + +

Esto se logra mediante una combinación de tecnologías: Service Workers para controlar las solicitudes de página (por ejemplo, almacenarlas sin conexión), la Cache API para almacenar respuestas a solicitudes de red fuera de línea (muy útil para almacenar recursos del sitio) y tecnologías de almacenamiento de datos del lado del cliente como Web Storage y IndexedDB para almacenar datos de la aplicación sin conexión.

+ +

Progresiva

+ +

Las aplicaciones web modernas se pueden desarrollar para proporcionar una experiencia súper genial a los navegadores totalmente capaces, y una experiencia aceptable (aunque no tan brillante) para los navegadores menos capaces. Hemos estado haciendo esto durante años con las mejores prácticas como mejora progresiva.

+ +

Reconectable

+ +

Una de las principales ventajas de las plataformas nativas es la facilidad con la que los usuarios pueden volver a participar mediante actualizaciones y contenido nuevo, incluso cuando no están mirando la aplicación o utilizando sus dispositivos. Las aplicaciones web modernas ahora también pueden hacer esto, utilizando nuevas tecnologías como Service Workers para controlar páginas, el Web Push API para enviar actualizaciones directamente del servidor a la aplicación a través de un service worker, y la API de notificaciones para generar notificaciones del sistema para ayudar a atraer a los usuarios cuando no están en el navegador.

+ +

Adaptable

+ +

Las aplicaciones web adaptables usan tecnologías como consultas de media y viewport para asegurarse de que sus interfaces se ajusten a cualquier factor de forma: escritorio, móvil, tableta o lo que sea que venga después.

+ +

Seguro

+ +

La plataforma web proporciona un mecanismo de entrega seguro que evita la intromisión y garantiza que el contenido no haya sido alterado, siempre que aproveche de HTTPS y desarrolle sus aplicaciones teniendo en cuenta la seguridad. Además, puede verificar la verdadera naturaleza de una AWP confirmando que está en la URL correcta, mientras que las aplicaciones en las tiendas de aplicaciones a menudo pueden parecer una cosa, pero ser otra (ejemplo).

-- cgit v1.2.3-54-g00ecf