Acople las aplicaciones web instalables en Safari macOS Sonoma — Amit Merchant — Un blog sobre PHP, JavaScript y más

Acople las aplicaciones web instalables en Safari macOS Sonoma — Amit Merchant — Un blog sobre PHP, JavaScript y más

La compatibilidad con la instalación de aplicaciones web, especialmente las aplicaciones web progresivas (PWA), siempre ha estado presente en Chrome, donde una PWA se puede instalar como una aplicación independiente en el escritorio o en el dispositivo móvil.

Entonces, por ejemplo, cuando está instalado en su sistema, se puede acceder a él a través de la base en sistemas basados ​​en macOS/Linux o a través del menú Inicio de Windows.

Esta es una gran característica porque le permite usar la aplicación web como una aplicación independiente sin necesidad de abrir el navegador y navegar a la aplicación web cuando quiera usarla. . Obviamente, la capacidad faltaba en Safari hasta ahora.

Índice
  1. Instalación de aplicaciones web en Safari
  2. Personalización del comportamiento de la instalación
  3. En conclusión

Instalación de aplicaciones web en Safari

A partir de macOS Sonoma, ahora también puede instalar todas las aplicaciones web (no solo las PWA) en Safari. Y cuando lo haga, podrá acceder a él a través del puerto de macOS.

Así es como funcionará.

Una vez en un sitio web, abra el File menú y seleccione el "Agregar al muelle" opción.

Agregar al muelle

Esto le dará una ventana emergente donde puede cambiar el nombre y el icono si lo desea y hacer clic en el "Agregar" botón.

Cambiar nombre e icono

Esto agregará la aplicación web al muelle con su ícono como este.

Icono de la aplicación web en el muelle

Ahora puede iniciar la aplicación web desde el Dock y se abrirá en una ventana independiente que parece una aplicación nativa. La ventana no tendrá ningún elemento de la interfaz de usuario del navegador, como barra de direcciones, pestañas, etc.

Abra la aplicación web en una ventana independiente

Sin embargo, tendrá una barra de herramientas simplificada con botones de navegación y el marco de la ventana se adaptará al color del sitio web o al color del tema del sitio web, si se especifica.

También se podrá acceder a las aplicaciones web instaladas a través de Launchpad y de la búsqueda de Spotlight, como cualquier otra aplicación de Mac.

Personalización del comportamiento de la instalación

Puede personalizar este comportamiento de instalación agregando un archivo de manifiesto de aplicación web a su sitio web.

Puedes crear un manifest.json archivo en la raíz de su sitio web y agregue los metadatos en la aplicación web, luego vincúlelo en el <head> de su sitio web como este.

<link rel="manifest" href="/manifest.json">

Este archivo contendrá metadatos sobre la aplicación web, como su nombre, descripción, icono, etc. que se utilizará al instalar la aplicación web.

Entonces, por ejemplo, si desea que su aplicación web se instale con un nombre personalizado y un modo de visualización, puede agregar el name Y display propiedad en el manifest.json archivo como este.

{
    "name": "Notepad",
    "display": "standalone"
}

También puede configurar la URL de inicio de la aplicación web agregando el start_url propiedad en el manifest.json archivo como este.

{
    "name": "Notepad",
    "display": "standalone",
    "start_url": "https://notepad.js.org/"
}

Esto asegurará que la aplicación web siempre se abra con la URL especificada cuando se inicie desde el Dock.

Puede verificar las otras cosas que puede especificar en el manifest.json en el archivo manifest.json del Bloc de notas.

En conclusión

Tener la capacidad de instalar aplicaciones web en Safari es una gran adición a Safari y, sinceramente, tomó un tiempo. Me alegro de que Apple finalmente haya agregado esta función a Safari para que sea comparable a otros navegadores.

Si quieres conocer otros artículos parecidos a Acople las aplicaciones web instalables en Safari macOS Sonoma — Amit Merchant — Un blog sobre PHP, JavaScript y más puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas