1. Introducción a PWA

Una PWA ( 渐进式Web应用程序) es una aplicación web diseñada con mejoras progresivas en mente para brindar una experiencia similar en navegadores compatibles 本机应用程序. PWACombina las ventajas de Weby 本机应用程序puede fácilmente 安装和访问, y tiene una experiencia confiable, rápida y operativa.

Ventajas de las PWA

Confiable: PWA puede ejecutarse en un entorno de red inestable y puede mantener los datos en 离线estado .缓存
Rápido: los PWA pueden 快速加载tener animaciones y transiciones fluidas.
Compacto: PWA 不需要下载或安装, accesible a través de URL, y 可以在桌面或主屏幕上创建快捷方式.
Seguridad: PWA HTTPSse comunica a través del protocolo, lo que puede garantizar la seguridad de los datos del usuario 安全性.

Elementos de las PWA

mejora progresiva

Los PWA están diseñados según un principio 渐进式增强que significa que deben adaptarse a una variedad de dispositivos y situaciones de red diferentes y proporcionar una experiencia de usuario perfecta para todos los usuarios.

Trabajadores de servicios

Service WorkersEs uno de los componentes centrales de PWA, que permite que la aplicación se ejecute en segundo plano para que 缓存se proporcionen los recursos necesarios 离线支持.

Manifiesto de la aplicación web

Web App Manifestes aquel JSON文件que describe la apariencia y el comportamiento de la aplicación. Permite que las aplicaciones se muestren de manera similar a las aplicaciones nativas y brinda un acceso rápido en la pantalla de inicio.

HTTPS

Debido a PWAla necesidad de usar Service Workersy otras tecnologías, HTTPSse deben usar protocolos para una comunicación segura. Esto ayuda a garantizar la confidencialidad e integridad de los datos.

Escenarios de uso de PWA

Los PWA se pueden usar en una variedad de aplicaciones diferentes, que incluyen comercio electrónico, noticias, redes sociales, juegos y más. Independientemente de la aplicación, las PWA pueden proporcionar una mejor experiencia de usuario, aumentar la retención de usuarios y mejorar la visibilidad de la aplicación.

2. Casos prácticos de PWA

A continuación se muestra un ejemplo simple de PWA, le mostraremos cómo convertir una aplicación web simple en una PWA y agregar soporte sin conexión.

1. Crear un manifiesto de aplicación web

Web App Manifestes un JSONarchivo que describe la apariencia y el comportamiento de la aplicación. En este caso, crearemos uno básico Web App Manifestpara que la aplicación pueda agregarse a la pantalla de inicio y ejecutarse en modo de pantalla completa.

{
    
    
  "name": "My PWA App",
  "short_name": "PWA App",
  "icons": [{
    
    
    "src": "/img/icons/icon-72x72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    
    
    "src": "/img/icons/icon-96x96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    
    
    "src": "/img/icons/icon-128x128.png",
    "sizes": "128x128",
    "type": "image/png"
  }, {
    
    
    "src": "/img/icons/icon-144x144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    
    
    "src": "/img/icons/icon-152x152.png",
    "sizes": "152x152",
    "type": "image/png"
  }, {
    
    
    "src": "/img/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }, {
    
    
    "src": "/img/icons/icon-384x384.png",
    "sizes": "384x384",
    "type": "image/png"
  }, {
    
    
    "src": "/img/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000"
}

2. Agregar trabajador de servicio

Service Workeres PWAuno de los componentes principales que permite que las aplicaciones se ejecuten en segundo plano para que 缓存los recursos necesarios estén disponibles 离线支持. En este caso, agregaremos uno simple Service Workerque almacene en caché todas las páginas y las sirva sin conexión.

const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js'
];

self.addEventListener('install', (event) => {
    
    
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', (event) => {
    
    
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
    
    
        if (response) {
    
    
          return response;
        }

        return fetch(event.request);
      })
  );
});

3. Registrar trabajador de servicio

El registro en Webla aplicación Service Workeres tan sencillo como JavaScriptañadir lo siguiente a tu código:

if ('serviceWorker' in navigator) {
    
    
  window.addEventListener('load', () => {
    
    
    navigator.serviceWorker
      .register('/sw.js')
      .then(() => console.log('Service Worker registered'))
      .catch((error) => console.log('Service Worker registration failed:', error));
  });
}

4. Pruebe los PWA

Ahora ha creado un PWA básico y ha agregado soporte sin conexión. Para probar su PWA, agregue la aplicación a su pantalla de inicio y deshabilite las conexiones de red. Luego, abra la aplicación y asegúrese de que todavía esté funcionando.

Resumir

PWA es una aplicación web emergente que combina las ventajas de la web y las aplicaciones nativas para brindar a los usuarios una experiencia confiable, rápida y procesable. Las PWA tienen muchas ventajas, incluida la facilidad de uso, la confiabilidad, una mayor velocidad y una mejor capacidad de descubrimiento. Si está considerando desarrollar una nueva aplicación web, PWA podría ser una buena opción.

Una comprensión simple de PWA

Directorio de artículos