Apple agregó unas 13 funciones nuevas de WebKit en Safari 11.1 y macOS 10.13.4, que se enviaron la semana pasada. La compañía detalló los cambios de WebKit en el lanzamiento en una publicación detallada en el blog de WebKit, que se incluye a continuación.
API de Service Worker
La API Service Worker habilita los scripts que se ejecutan en segundo plano para manejar el procesamiento generalizado de las páginas web. Los scripts de Service Worker comúnmente funcionan con otras API complementarias, como la API de caché, también incluida en esta versión, para almacenar solicitudes de recuperación y respuestas que mejoran el rendimiento de la red o brindan una experiencia fuera de línea. La implementación de WebKit respeta la privacidad del usuario al dividir a los Trabajadores del servicio según el origen del documento de nivel superior para ayudar a evitar el seguimiento entre sitios.
Lea la publicación del blog “Trabajadores en su servicio” para obtener más detalles sobre la implementación de WebKit para los trabajadores del servicio.
API de solicitud de pago para Apple Pay
WebKit agregó soporte para la API de solicitud de pago para realizar transacciones de Apple Pay. Esto permite a los comerciantes ofrecer métodos de pago en varios navegadores utilizando una API estándar, lo que reduce en gran medida el esfuerzo de admitir pagos seguros en diferentes navegadores y plataformas.
Consulte Presentación de la API de solicitud de pago para Apple Pay para obtener más detalles.
API de baliza
Beacon API programa solicitudes asincrónicas para enviar antes de que se descargue la página y las completa sin una solicitud de bloqueo. Esto es útil para enviar datos de diagnóstico sobre la aplicación web sin afectar el rendimiento de carga de la página percibida.
Consulte la especificación Beacon para obtener más información.
Actualizaciones de API de carga de directorio y portapapeles
La API del Portapapeles tiene una serie de mejoras que se centran en una implementación modernizada de la API DataTransfer. Agrega soporte para dataTransfer.items, lectura y escritura de contenido HTML y tipos MIME personalizados, y corrigió una serie de errores, como copiar y pegar imágenes desde aplicaciones nativas. WebKit también agregó soporte para cargar directorios usando DataTransfer.webkitGetAsEntry () y input.webkitdirectory, lo que permite la interoperabilidad con otros navegadores. Los usuarios ahora pueden cargar un directorio completo en el almacenamiento en la nube y servicios de intercambio de archivos como iCloud o Dropbox.
Obtenga más información sobre las mejoras de la API del portapapeles y la API de carga de directorios.
Video como activos de imagen
Los formatos de imágenes animadas son muy populares, pero se convierten fácilmente en archivos de gran tamaño y con un uso intensivo del ancho de banda. Para abordar el impacto en el rendimiento, WebKit en Safari ahora admite la carga de video MP4 codificado en H.264 con una etiqueta HTML. Esto permite a los autores de contenido reemplazar archivos GIF animados que son mucho más grandes que los archivos de video H.264 y requieren más potencia de procesamiento para mostrarse. Más allá de las ganancias de rendimiento, este cambio también permite a los autores de contenido web usar videos como una imagen de fondo CSS.
Alguna información detallada sobre este cambio está disponible en la publicación del blog Evolución de : Gif sin GIF de Colin Bendell.
fuente-pantalla
Los autores de la página tienen más control sobre el comportamiento de carga de fuentes utilizando el descriptor de visualización de fuentes recientemente compatible. El nuevo comportamiento predeterminado de WebKit mostrará texto invisible durante hasta 3 segundos antes de cambiar a una fuente instalada hasta que la fuente deseada termine de descargarse. Al usar la visualización de fuentes, el autor de la página puede usar el valor de intercambio para mostrar inmediatamente una fuente instalada hasta que se descargue la fuente web especificada. Existe un comportamiento alternativo para mostrar una fuente instalada hasta por 3 segundos y si la fuente deseada no se carga en ese tiempo, nunca se mostrará. Finalmente, el comportamiento opcional usará la fuente si está disponible en la caché del navegador. Si no está allí, omite su uso. Estos proporcionan un amplio conjunto de comportamientos para que los desarrolladores web controlen la experiencia de carga y visualización que mejor se adapte al diseño de su contenido web.
Encuentre más detalles en la especificación de nivel 4 del módulo de fuentes CSS.
HTMLImageElement.decode ()
Los autores de contenido a veces necesitan una imagen cargada y completamente decodificada que esté disponible de inmediato. Cargar y decodificar imágenes grandes o muchas imágenes puede hacer que el rendimiento de la página se vea afectado. La nueva función HTMLImageElement.decode () comienza asincrónicamente a decodificar una imagen y devuelve una Promesa que se resuelve cuando la imagen decodificada está disponible. Con él, los desarrolladores ahora tienen control sobre cuándo se decodifican las imágenes cargadas, sin atar el hilo principal.
Oyentes pasivos de eventos
Para evitar causar un rendimiento deficiente de desplazamiento al adjuntar controladores de eventos a eventos touchstart, touchmove o wheel, los desarrolladores pueden especificar su detector de eventos como pasivo si el detector no llama a preventDefault (). Esto permite que Safari continúe proporcionando un desplazamiento de alto rendimiento sin esperar a que finalice el oyente de eventos.
Se pueden encontrar más detalles sobre los escuchas de eventos pasivos en la especificación DOM.
Lienzo fuera de pantalla
La API Offscreen Canvas ofrece un mecanismo para pre-renderizar un lienzo fuera de la pantalla antes de convertirlo en un lienzo visible. Este enfoque ofrece ganancias de rendimiento significativas para escenas especialmente complejas.
Obtenga más información sobre la API de lienzo fuera de pantalla.
API de acceso al almacenamiento
La nueva API de Storage Access proporciona una solución para permitir que las incrustaciones de terceros soliciten acceso a sus cookies de origen cuando el usuario interactúa con ellas en un mundo con Intelligent Tracking Prevention. Esto brinda a los proveedores de contenido la flexibilidad de proporcionar contenido incrustado, al tiempo que ofrece a los usuarios transparencia sobre con quién comparten su información.
Obtenga más información sobre Storage Access API en el blog de WebKit.
Integridad de los subrecursos
WebKit ha agregado soporte para Subresource Integrity que permite a los sitios web validar la integridad de los recursos y rechazarlos si algo ha cambiado fuera del control del propietario del sitio. Una verificación de integridad compara un hash proporcionado por el autor del contenido web en un atributo de integridad en un elemento
Web Inspector ha perfeccionado el diseño de varias herramientas existentes y también agrega una nueva herramienta útil para inspeccionar elementos HTML Canvas. La nueva pestaña Lienzo permite a los desarrolladores web comprender los cambios en los fotogramas grabados de las animaciones del lienzo.
La barra lateral de Estilos en la pestaña Elementos se modificó para usar un modelo diferente, pero familiar, para editar reglas, propiedades y valores de estilo. También presenta mejoras en la navegación entre diferentes vistas de estilo.
Finalmente, se rediseñó la pestaña Red, mejorando tanto la línea de tiempo de carga de recursos como la navegación a los detalles de red de cada recurso, como vistas previas de contenido, encabezados, cookies, tamaño y detalles de tiempo.
