Los accesos directos a aplicaciones ayudan a los usuarios a iniciar rápidamente tareas comunes o recomendadas dentro de tu aplicación web. El acceso fácil a esas tareas desde cualquier lugar donde se muestre el ícono de la app mejorará la productividad de los usuarios y su interacción con la aplicación web.
A la manera moderna
Cómo definir accesos directos a aplicaciones en el manifiesto de aplicaciones web
Para invocar el menú de accesos directos a aplicaciones, se debe hacer clic con el botón derecho en el ícono de la app en la barra de tareas (Windows) o en el conector (macOS) del escritorio del usuario, o bien si se mantiene presionado el ícono de selector de la app en Android.
El menú de accesos directos a aplicaciones solo se muestra para las apps web progresivas instaladas. Consulta la sección Instalación en nuestro módulo Aprende sobre la AWP para obtener más información sobre los requisitos de instalación.
Cada acceso directo a la app expresa un intent del usuario, cada uno de los cuales está asociado con una URL dentro del alcance de tu app web. La URL se abre cuando un usuario activa el acceso directo a la app.
De manera opcional, los accesos directos a aplicaciones se declaran en el miembro del array shortcuts del manifiesto de la aplicación web. A continuación, se muestra un ejemplo de un posible manifiesto de app web.
{
"name": "Player FM",
"start_url": "https://player.fm?utm_source=homescreen",
"shortcuts": [
{
"name": "Open Play Later",
"short_name": "Play Later",
"description": "View the list of podcasts you saved for later",
"url": "/play-later?utm_source=homescreen",
"icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
},
{
"name": "View Subscriptions",
"short_name": "Subscriptions",
"description": "View the list of podcasts you listen to",
"url": "/subscriptions?utm_source=homescreen",
"icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
}
]
}
El método clásico
Permitir que el usuario arrastre vínculos a la barra de favoritos
Si la aplicación aún no está instalada, puedes sugerirle al usuario que arrastre algunos vínculos desde tu página web y los libere en la barra de favoritos de su navegador. De esa manera, pueden iniciar rápidamente tareas comunes o recomendadas dentro de tu app web.
Lecturas adicionales
Demostración
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="dark light" />
<link rel="manifest" href="manifest.json" />
<title>How to create app shortcuts</title>
<!-- TODO: Devsite - Removed inline handlers -->
<!-- <script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js');
});
}
</script>
<script type="module" src="script.js"></script> -->
</head>
<body>
<h1>How to create app shortcuts</h1>
<ol>
<li>
You can drag these <a href="blue.html">blue page</a> or
<a href="red.html">red page</a> links to the bookmarks bar
and access them later.
</li>
<li>
Install the app by clicking the button below. After the installation,
the button is disabled.
<p>
<button disabled type="button">Install</button>
</p>
</li>
</ol>
</body>
</html>JS
// The install button.
const installButton = document.querySelector('button');
// Only relevant for browsers that support installation.
if ('BeforeInstallPromptEvent' in window) {
// Variable to stash the `BeforeInstallPromptEvent`.
let installEvent = null;
// Function that will be run when the app is installed.
const onInstall = () => {
// Disable the install button.
installButton.disabled = true;
// No longer needed.
installEvent = null;
};
window.addEventListener('beforeinstallprompt', (event) => {
// Do not show the install prompt quite yet.
event.preventDefault();
// Stash the `BeforeInstallPromptEvent` for later.
installEvent = event;
// Enable the install button.
installButton.disabled = false;
});
installButton.addEventListener('click', async () => {
// If there is no stashed `BeforeInstallPromptEvent`, return.
if (!installEvent) {
return;
}
// Use the stashed `BeforeInstallPromptEvent` to prompt the user.
installEvent.prompt();
const result = await installEvent.userChoice;
// If the user installs the app, run `onInstall()`.
if (result.outcome === 'accepted') {
onInstall();
}
});
// The user can decide to ignore the install button
// and just use the browser prompt directly. In this case
// likewise run `onInstall()`.
window.addEventListener('appinstalled', () => {
onInstall();
});
}