PWA es un nuevo paradigma de aplicaciones web que combina la experiencia de las aplicaciones web y las aplicaciones nativas. PWA puede habilitar el almacenamiento en caché sin conexión, el modo de pantalla completa, los accesos directos de escritorio, etc. de las aplicaciones web, proporcionando una experiencia de usuario similar a las aplicaciones nativas. Además, PWA también puede implementar actualizaciones incrementales a través de la tecnología Service Worker para mejorar el rendimiento de las aplicaciones web.
La ventaja de PWA no es solo que puede proporcionar una experiencia similar a las aplicaciones nativas, sino que, lo que es más importante, puede mejorar el rendimiento de las aplicaciones web a través de una serie de medios técnicos. PWA puede precargar recursos cuando se inicia la aplicación, lo que puede reducir en gran medida el tiempo de inicio de la aplicación. PWA también admite el almacenamiento en caché fuera de línea, lo que permite a los usuarios continuar usando la aplicación sin una conexión de red, lo que mejora la satisfacción del usuario.
PWA también puede usar funciones como notificaciones locales y notificaciones automáticas para que sea más fácil para los usuarios recibir mensajes y recordatorios de aplicaciones, y mejorar la interactividad de las aplicaciones y la retención de usuarios. Además, PWA también admite accesos directos de escritorio y los usuarios pueden iniciar aplicaciones directamente en el escritorio, lo que reduce el tiempo dedicado a buscar aplicaciones y aumenta la frecuencia de uso del usuario.
Al usar PWA, los desarrolladores deben prestar atención a algunos detalles para garantizar el rendimiento y la experiencia del usuario de la aplicación. En primer lugar, es necesario considerar la velocidad de carga de la aplicación para garantizar que la aplicación pueda iniciarse en el menor tiempo posible. En segundo lugar, la estrategia de almacenamiento en caché de la aplicación debe optimizarse para garantizar que los usuarios puedan seguir utilizando la aplicación sin conexión a la red. Finalmente, debe prestar atención a la experiencia del usuario e intentar brindar una experiencia similar a la de las aplicaciones nativas para atraer a más usuarios.
A continuación se muestra una demostración de una aplicación PWA simple, una aplicación de lista de tareas pendientes donde los usuarios pueden agregar y administrar su propia lista de tareas pendientes y marcarlas como hechas cuando sea necesario.
Primero, en el archivo index.html, debemos agregar un enlace al archivo manifest.json y un script de registro de Service Worker:
margen
<!DOCTYPE html>
<html>
<head>
<title>PWA Todo App</title>
<link rel="manifest" href="/manifest.json">
</head>
<body>
<h1>Todo List</h1>
<ul id="todo-list"></ul>
<form>
<input type="text" id="new-todo" placeholder="Add a new todo...">
<button type="submit">Add</button>
</form>
<script src="/sw.js"></script>
<script src="/app.js"></script>
</body>
</html>A continuación, en el archivo manifest.json, podemos definir el nombre, icono, color del tema y otra información de la aplicación:
Intento
{
"name": "PWA Todo App",
"short_name": "Todo App",
"icons": [
{
"src": "/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#3367D6"
}Luego, en el archivo app.js, podemos implementar funciones como agregar, eliminar y marcar como tareas pendientes completadas, mientras usamos IndexedDB para almacenar datos:
JavaScript
const todoList = document.getElementById('todo-list');
const newTodoInput = document.getElementById('new-todo');
let db;
window.addEventListener('load', async () => {
if ('serviceWorker' in navigator) {
try {
await navigator.serviceWorker.register('/sw.js');
} catch (e) {
console.log('SW registration failed');
}
}
const request = indexedDB.open('todo-db', 1);
request.onupgradeneeded = event => {
db = event.target.result;
db.createObjectStore('todos', { keyPath: 'id', autoIncrement: true });
};
request.onsuccess = event => {
db = event.target.result;
loadTodos();
};
async function loadTodos() {
const transaction = db.transaction(['todos'], 'readonly');
const store = transaction.objectStore('todos');
const todos = await store.getAll();
for (const todo of todos) {
addTodoToList(todo);
}
}
function addTodoToList(todo) {
const li = document.createElement('li');
li.dataset.id = todo.id;
li.innerText = todo.title;
if (todo.completed) {
li.classList.add('completed');
}
li.addEventListener('click', event => {
const completed = !li.classList.contains('completed');
updateTodoStatus(todo.id, completed);
li.classList.toggle('completed');
});
todoList.appendChild(li);
}
function addNewTodo() {
const title = newTodoInput.value;
if (title.trim() === '') {
return;
}
const transaction = db.transaction(['todos'], 'readwrite');
const store = transaction.objectStore('todos');
const request = store.add({ title, completed: false });
request.onsuccess = event => {
const todo = { id: event.target.result, title, completed: false };
addTodoToList(todo);
newTodoInput.value = '';
};
}
function deleteTodo(id) {
const transaction = db.transaction(['todos'], 'readwrite');
const store = transaction.objectStore('todos');
store.delete(id);
}
function updateTodoStatus(id, completed) {
const transaction = db.transaction(['todos'], 'readwrite');
const store = transaction.objectStore('todos');
store.get(id).onsuccess = event => {
const todo = event.target.result;
todo.completed = completed;
store.put(todo);
};
}
document.querySelector('form').addEventListener('submit', event => {
event.preventDefault();
addNewTodo();
});
todoList.addEventListener('contextmenu', event => {
event.preventDefault();
const li = event.target.closest('li');
if (li) {
deleteTodo(parseInt(li.dataset.id));
li.remove();
}
});Finalmente, en el archivo sw.js, podemos almacenar en caché los recursos que necesita la aplicación para que aún estén accesibles cuando no esté conectado:
JavaScript
const CACHE_NAME = 'todo-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/app.js',
'/manifest.json',
'/icons/icon-72x72.png',
'/icons/icon-96x96.png',
'/icons/icon-128x128.png',
'/icons/icon-144x144.png',
'/icons/icon-152x152.png',
'/icons/icon-192x192.png',
'/icons/icon-384x384.png',
'/icons/icon-512x512.png'
];
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);
})
);
});Lo anterior es una demostración de una aplicación PWA simple que funciona bien sin conexión y el usuario puede agregarla a la pantalla de inicio como una aplicación nativa.
Expliquemos la lógica del código anterior en detalle:
Primero, definimos la estructura básica y el estilo de la aplicación en index.html, incluido un cuadro de entrada para agregar nuevas tareas y una lista de tareas.
Luego, escribimos la lógica central de la aplicación PWA en app.js, que incluye:
1. Determine si el navegador es compatible con Service Worker y registre sw.js.
JavaScript
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js');
});
}2. Use IndexedDB para almacenar listas de tareas.
JavaScript
const request = indexedDB.open('todo-db', 1);
request.onupgradeneeded = event => {
const db = event.target.result;
const store = db.createObjectStore('todos', { keyPath: 'id', autoIncrement: true });
store.createIndex('completed', 'completed');
};
request.onsuccess = event => {
db = event.target.result;
loadTodos();
};
async function loadTodos() {
const transaction = db.transaction(['todos'], 'readonly');
const store = transaction.objectStore('todos');
const todos = await store.getAll();
for (const todo of todos) {
addTodoToList(todo);
}
}3. Agregue la tarea a la lista de tareas.
JavaScript
function addTodoToList(todo) {
const li = document.createElement('li');
li.dataset.id = todo.id;
li.innerText = todo.title;
if (todo.completed) {
li.classList.add('completed');
}
li.addEventListener('click', event => {
const completed = !li.classList.contains('completed');
updateTodoStatus(todo.id, completed);
li.classList.toggle('completed');
});
todoList.appendChild(li);
}4. Elimine la tarea de la lista de tareas.
JavaScript
function deleteTodo(id) {
const transaction = db.transaction(['todos'], 'readwrite');
const store = transaction.objectStore('todos');
store.delete(id);
}5. Actualice el estado de finalización de la tarea.
JavaScript
function updateTodoStatus(id, completed) {
const transaction = db.transaction(['todos'], 'readwrite');
const store = transaction.objectStore('todos');
store.get(id).onsuccess = event => {
const todo = event.target.result;
todo.completed = completed;
store.put(todo);
};
}6. Use IndexedDB para almacenar nuevas tareas y agregarlas a la lista de tareas.
JavaScript
function addNewTodo() {
const title = newTodoInput.value;
if (title.trim() === '') {
return;
}
const transaction = db.transaction(['todos'], 'readwrite');
const store = transaction.objectStore('todos');
const request = store.add({ title, completed: false });
request.onsuccess = event => {
const todo = { id: event.target.result, title, completed: false };
addTodoToList(todo);
newTodoInput.value = '';
};
}7. Escuche el evento de envío del formulario y llame a la función addNewTodo.
JavaScript
document.querySelector('form').addEventListener('submit', event => {
event.preventDefault();
addNewTodo();
});8. Escuche el evento de clic derecho de la tarea en la lista de tareas y llame a la función deleteTodo.
Finalmente, escribimos la lógica de Service Worker en sw.js, que incluye:
1. Guarde en caché los recursos estáticos de la aplicación.
JavaScript
const cacheName = 'todo-app-cache';
self.addEventListener('install', event => {
event.waitUntil(
caches.open(cacheName).then(cache => {
return cache.addAll([
'/',
'/index.html',
'/app.js',
'/style.css',
'/manifest.json'
]);
})
);
});2. Lea el recurso estático del caché; si no, obténgalo de la red.
JavaScript
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
if (response) {
return response;
}
return fetch(event.request);
})
);
});3. Elimine el caché antiguo y conserve el caché más reciente.
JavaScript
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.filter(name => name !== cacheName).map(name => caches.delete(name))
);
})
);
});Hasta ahora, nuestra solicitud de PWA está completa. Los usuarios pueden usarlo para agregar, completar y eliminar tareas. La aplicación también tiene características de PWA, como el almacenamiento en caché sin conexión y la adición a la pantalla de inicio, lo que mejora en gran medida el rendimiento y la experiencia del usuario de la aplicación.
Si desea experimentar esta aplicación, puede guardar el código anterior localmente y luego abrir el archivo index.html en el navegador.
En resumen, PWA es una tecnología muy prometedora que puede mejorar el rendimiento y la experiencia del usuario de las aplicaciones web. El uso de PWA puede hacer que las aplicaciones web se parezcan más a las aplicaciones nativas, más rápidas, más confiables y más fáciles de usar. En el futuro, PWA se convertirá en una importante dirección de desarrollo de aplicaciones web, trayendo más innovaciones y cambios.
Enlace original: Uso de PWA para mejorar el rendimiento y la experiencia del usuario de las aplicaciones web_Intercambio de tecnología_Frontend Lao Zhao