Social API temp

Referencia del Social API del navegador

https://github.com/mixedpuppy/socialapi-demo contiene una implementación del proveedor de prueba que muestra el uso de muchas de estas APIs. La lectura de esto te ayudará a ilustrar la documentación proporcionada aquí.

Referencia del service worker

Un Service Worker hereda todas las limitaciones y comportamientos que se encuentran en HTML5 Shared Workers. Puede crear XMLHttpRequests, usar WebSockets, recibir mensajes de las ventanas y el navegador, usar IndexedDB, y enviar mensajes a otras ventanas.

El Worker puede utilizar los métodos ononline, onoffline, y navigator.online y las propiedades que están disponibles para todos los Workers para obtener la notificación del estado conectado/desconectado del navegador.

Además de los métodos estándar, los Service Workers tienen acceso a funcionalidades adicionales, todas ellas se implementan utilizando mensajes enviados y recibidos por los "puertos de mensajes" del Worker. Como los puertos de mensajes son inherentemente asíncronos, cualquier mensaje que requiera una respuesta implicará dos mensajes - uno para la solicitud y otro para la respuesta, No todos los mensajes requieren una respuesta - esto hace parte de la especificación del mensaje. Los mensajes que no requieren respuesta son semejantes a un "evento" no solicitado. Si un mensaje requiere una respuesta, la respuesta siempre debe ser enviada al mismo puerto de la solicitud y, en general, el "asunto" de la respuesta será el asunto de la solicitud con "-respuesta" añadido.

Se espera que los Service Workers proporcionen funciones, en un ámbito global, llamadas onconnect y ondisconnect. El navegador invocará onconnect en el momento de inicio, pasando en un evento. El worker debe tener acceso a la propiedad de los puertos de este evento para extraer un puerto de comunicación estable de vuelta al navegador, y mantenerlo para la vida del worker, así:

var apiPort;
var ports = [];
onconnect = function(e) {
    var port = e.ports[0];
    ports.push(port);
    port.onmessage = function (msgEvent)
    {
        var msg = msgEvent.data;
        if (msg.topic == "social.port-closing") {
            if (port == apiPort) {
                apiPort.close();
                apiPort = null;
            }
            return;
        }
        if (msg.topic == "social.initialize") {
            apiPort = port;
            initializeAmbientNotifications();
        }
    }
}

// envía un mensaje a todos los contenidos del proveedor
function broadcast(topic, data) {
  for (var i = 0; i < ports.length; i++) {
    ports[i].postMessage({topic: topic, data: data});
  }
}

 

Cada mensaje tiene un elemento de datos con dos campos, "asunto" y "datos". El asunto identifica qué método o evento se está utilizando, y los datos especifican datos adicionales únicos para el asunto. Todos los métodos y eventos tienen asuntos que comienzan con "social". - Esto significa que los servicios son libres de utilizar asuntos sin prefijo como un detalle de implementación privada (por ejemplo, para la comunicación entre cierto contenido desde el servicio y el servicio del worker)

Mensajes de control enviados a los Service Workers

social.initialize

STATUS: DONE Fx17

Enviado por el navegador durante el arranque. Cuando el JavaScript de un Worker se ha cargado y evaluado correctamente, el navegador enviará un mensaje con este asunto.

social.port-closing

STATUS: DONE Fx17

Enviado por el navegador durante la desconexión de un Worker, cuando un puerto de mensajes del Worker está a punto de cerrarse. Este será el último mensaje que el Worker recibe en el puerto.

Control de las notificaciones del ambiente

social.user-profile

STATUS: DONE Fx17

Enviado por el Worker, para establecer las propiedades para el icono del proveedor y los datos del perfil de usuario utilizadas por el botón de la barra de herramientas. Si falta el retrato del usuario y el nombre de usuario el boton UI indicará un estado desconectado. Al indicar el estado desconectado, el icono de estado establecido por social.ambient-notification será eliminado.

Argumentos:

background OBSOLETO, sustituido por iconURL

String, opcional. Si se proporciona, especifica el valor de CSS para el fondo de la zona. Normalmente, esto sólo propocionará un color de fondo. ACTUALIZACIÓN: la url de los datos se analiza para proporcionar el iconURL. Esto funciona actualmente, sin embargo utilizando iconos muy pequeños produce resultados incorrectos.

iconURL

String, necesario. Si se proporciona, especifica la URL a una imagen de 16x16 pixeles, utilizados para el icono de estado. El iconURL puede ser una url de datos con la imagen codificada para evitar solicitudes http adicionales. (por ejemplo, "data:image/png;base64,...data...")

portrait

String, opcional. Si se proporciona, especifica la URL de una imagen del usuario de 48x48 pixeles. El retrato puede ser una url de datos con la imagen codificada para evitar solicitudes http adicionales.

userName

String, opcional. El nombre de la cuenta se muestra con el retrato en el menú del proveedor.

displayName

String, necesario. Nombre real del usuario que se utiliza para su visualización en varios elementos de la Interfaz de Usuario.

profileURL

String, necesario. URL para la página de perfil de los usuarios registrados. Esta se abrirá en una pestaña normal del navegador cuando el usuario haga clic sobre ella.

social.ambient-notification

STATUS: DONE Fx17

Enviado por el worker, para actualizar o crear un icono de notificación del ambiente. Se envía uno para cada icono. Un usuario debe estar conectado para mostrar los iconos de estado, y debes llamar al social.user-profile antes de llamar al social.ambient-notification para establecer los iconos de estado.

Argumentos:

name

String. Un identificador para el icono. La primera vez que se ve un nombre dado, efectivamente se crea un nuevo ícono. Si el mismo nombre se utiliza en llamadas posteriores, el icono existente se actualiza.

background OBSOLETO, sustituido por iconURL

String, opcional. Si se proporciona, especifica el valor de CSS para el fondo de la zona. Normalmente, esto sólo proporciona un color de fondo. ACTUALIZACIÓN: La url de datos se analiza para proporcionar la iconURL. Esto funciona actualmente, sin embargo, utilizar iconos muy pequeños produce resultados incorrectos.

iconURL

String, opcional. Si se proporciona, especifica la URL a una imagen de 16x16 pixeles, utilizados para el icono de estado. El iconURL puede ser una url de datos con la imagen codificada para evitar solicitudes http adicionales. (por ejemplo, "data:image/png;base64,...data...")

counter

Número, opcional. Especifica un número que se superpondrá sobre el icono, normalmente se utiliza para transmitir el concepto de no leído.

contentPanel

String, opcional. Especifica la URL del contenido que se muestra en el panel emergente del icono.

Control de las notificaciones activas

social.notification-create

STATUS: DONE Fx17

Enviado por el Worker, para crear y mostrar un objeto de notificación. Este solicita que el navegador notifique inmediatamente al usuario de un cambio relevante en el estado. Ver https://developer.mozilla.org/en/DOM/navigator.mozNotification para más detalles. Cuando el usuario hace clic en la notificación, el mensaje social.notification-action se envía al Worker. El título de la notificación siempre será el nombre del proveedor.

NOTA: Queremos aumentar el objeto mozNotification, definido en la documentación, con un campo adicional "tipo". Detalles por determinar. NOTA: No hay manera de permitir duración y no se ha expuesto una forma de "cancelar" una notificación (se supone que es de muy corta duración). ¿Está bien?

Argumentos:

id

String: Un ID para la notificación. Este ID no se muestra, pero se pasa de nuevo a través de un evento social.notification-action si el usuario hace clic en la notificación.

type

String: El tipo string debe ser consistente para cada tipo de notificación. Esto puede ser utilizado por algunos sistemas de notificación para proporcionar el filtrado de notificaciones a nivel de usuario. Un proveedor puede elegir cualquier string para el tipo, pero debe mantener el tipo de string consistente y descriptivo para cada tipo de acción. Por ejemplo, las notificaciones del chat siempre deben tener el mismo tipo de string. las notificaciones sugeridas incluyen:

  • social.providername.chat-request
  • social.providername.friend-request
  • social.providername.activity (por ejemplo, alguien publicó en tu activity stream)

icon

String/null. La URL de una imagen que se coloca en la notificación. Aunque esta pueda ser una URL válida, se recomienda a los desarrolladores usar una URL de datos para minimizar la latencia.

body

String: El cuerpo del mensaje de notificación. Este cuerpo se representa como un hipervínculo y se puede hacer clic sobre él. No soporta el formato HTML.

action

String: Una acción a realizar cuando el usuario haga clic en la notificación. Si no se proporciona, no se puede hacer clic sobre la notificación. Actualmente las únicas acciones soportadas son link, callback y openServiceWindow. Si se define la acción, también debe definirse actionArgs.

actionArgs

Objeto: Un objeto con argumentos para las acciones (arriba). Las acciones y sus actionArgs soportadas son:

  • link
    • toURL: String: url para abrir en una nueva pestaña del navegador.

social.notification-action

STATUS: DONE Fx17

Enviado al worker como respuesta a una notificación de "devolución de llamada", después de que el usuario ha hecho clic en la notificación.

Argumentos:

id

String: el ID de la notificación sobre la que se ha hecho clic.

action

String: La accion enviada en social.notification-create.

actionArgs

Object: Los actionArgs establecidos en social.notification-create.

Control de los enlaces de recomendación

social.user-recommend-prompt

STATUS: DONE Fx17

Enviado por el navegador para solicitar el indicador visual para el elemento de la interfaz "recomendación del usuario". El worker debe responder con una user-recommend-prompt-response.

Tenga en cuenta que normalmente este mensaje sólo se enviará cuando un proveedor se activa y la respuesta se utilizará para todas las URLs. En otras palabras, el proveedor no debe esperar que este mensaje se envíe cada vez que el agente de usuario navega o muestra una nueva URL.

Argumentos:

Ninguno.

social.user-recommend-prompt-response

STATUS: DONE Fx17

El Worker construye y publica una user-recommend-prompt-response en respuesta a un mensaje social.user-recommend-prompt recibido desde el navegador. Ver social.user-recommend-prompt para más detalles.

Argumentos:

images

Objeto. Debe tener 2 string claves, "compartir" y "dejar de compartir", cuyo valor es la direccion URL de una imagen que se establecerá como la propiedad "src" de una imagen contenida en el objetivo del clic hecho por el usuario para la acción "recomendada". El agente de usuario hará un seguimiento de si la página actual se ha compartido - si es así, se mostrará "dejar de compartir" la imagen, de lo contrario, se mostrará "compartir" imagen. Esto puede contener una imagen direccionable en la web o una URL de datos que contenga datos de imagen generados dinámicamente. Se recomienda a los desarrolladores utilizar una URL de datos para minimizar la latencia. Se espera que cada imagen tenga un alto de 16px y un ancho de 16px.

messages

Objeto. Debe tener los siguientes string claves:

  • 'shareTooltip', 'unshareTooltip': Los strings utilizados como la descripción del objetivo cuando se muestra el "compartir" y "dejar de compartir" las imágenes respectivamente.
  • 'sharedLabel', 'unsharedLabel': Los strings que se utilizarán para actualizar un widget de etiqueta después de tomar la acción "compartir" o "dejar de compartir" para reflejar la transición de compartida a no compartida o viceversa. Tenga en cuenta que en Fx17, las etiquetas no son visibles, pero se utiliza como una ayuda de accesibilidad para que un lector de pantalla o similar pueda observar la transición.
  • 'unshareLabel': Un string que se mostrará en el "popup unshare" para reflejar que el elemento ya ha sido compartido. Por ejemplo: "Usted ha compartido previamente este elemento".
  • 'portraitLabel': Un string usado como la etiqueta aria para la imagen de perfil de usuario que se muestra en el "unshare popup". Por ejemplo: "La imagen de tu perfil".
  • 'unshareConfirmLabel': Un string que se utiliza como la etiqueta del botón del "unshare popup" utilizado para realizar el "unshare". Por ejemplo: "Deja de compartirla"
  • 'unshareConfirmAccessKey': Un string que se utiliza como clave de acceso para el botón dejar de compartir. Normalmente, esto debería ser una letra incluída en el string 'unshareConfirmLabel'.
  • 'unshareCancelLabel': Un string que se utiliza como la etiqueta del botón en el "unshare popup" cuando el usuario desea seguir compartiendo el elemento. Por ejmplo: "Cerrar".
  • 'unshareCancelAccessKey': Un string que se utiliza como clave de acceso para el boton cancelar de unshare.

social.user-recommend

Indica que el usuario ha hecho clic en el elemento de la interfaz "recomendación del usuario". El mensaje incluye:

Argumentos:

url

String, necesario. La URL que el usuario está viendo, incluyendo el string de consulta, menos cualquier texto hash, de la raiz del contexto actual de visualización del navegador.

Ninguna respuesta es necesaria, sin embargo, el servicio puede responder en el mismo puerto con un user-recommend-prompt-response, si el objetivo del clic debe cambiar su apariencia.

social.user-unrecommend

Indica que el usuario desea retractarse de su recomendación anterior. El mensaje incluye:

Argumentos:

url

String, necesario. La URL que el usuario está viendo, incluyendo la cadena de consulta, menos cualquier  texto hash, de la raíz del contexto actual de visualización del navegador.


Widgets

SidebarWidget

Si un servicio define un SidebarWidget, el navegador instancia una región de contenido con la URL del SidebarWidget como la ubicación de algunas ventanas del navegador. Estas regiones no se ejecutarán hasta que el Worker se haya cargado completamente. El contenido de estas regiones tiene la API adicional definida en la referencia del Service Content API, arriba.

Las barras laterales pueden encontrarse en el estado visible u oculta.

  • Cuando están visibles, recibirán un rectángulo vertical del espacio de la pantalla en el que se renderizará, este rectángulo es estable a través de los cambios del foco de pestaña y tiene una barra de desplazamiento independiente de la barra de desplazamiento del contenido de la navegación por pestañas.
  • Cuando están ocultas, se elimina completamente una barra lateral de la jerarquía visual. El agente de usuario continuará entregando mensajes a ella, y la barra lateral puede pre-renderizar su DOM para una posterior visualización.

La barra lateral de la ventana sólo será instanciada en las ventanas del navegador que tienen una interfaz de navegación por pestañas completa; las ventanas creadas con window.open que no cuentan con estos elementos de la interfaz, no tendrán una barra lateral.

Cuando se selecciona una pestaña que se renderiza directamente por el navegador sin barra de direcciones, la barra lateral se colocará automáticamente en estado oculta. Cuando el usuario sale de esa pestaña, la barra lateral se hará visible de nuevo. Estas pestañas incluyen la página de administración de complemento, about:permissions, etc.

El estado minimizado/maximizado/oculto del widget de la barra lateral será consistente a través de todas las ventanas del navegador. El estado más recientemente configurado se recuerda y se utiliza en las nuevas ventanas, y se conserva asi se reinicie el navegador.

Mensajes enviados a los Widgets

STATUS: DONE Fx17

socialFrameHide

Evento DOM enviado por el navegador cuando el usuario oculta el contenido de la barra lateral.

socialFrameShow

Evento DOM enviado por el navegador cuando el usuario muestra el contenido de la barra lateral.

Integración del "Panel" del navegador

STATUS: DONE Fx17

Para permitir contenido para colocar una ventana efímera delante del contenido del navegador normal y chrome, se usa la siguiente API:

`navigator.mozSocial.openChatWindow( url, callback)`

En la vuelta del mensaje se recibirá el objeto window del marco del chat.

Serialización del mensaje

Para un mensaje con asunto topic y argmumentos (arg1:val1, arg2:val2), se construye un objeto como este:

{ topic: topic, data: { arg1: val1, arg2: val2 } }

Manifiesto Discovery y Service

Discovery

ESTADO: SIN OBJETIVO

Como un usuario que navega por los sitios web de Firefox puede descubrir nuevos proveedores sociales y ser ofertado para la instalación de esos proveedores. Un sitio web de los proveedores sociales incluiría una etiqueta en la cabecera apuntando a un archivo manifiesto para habilitar este tipo de descubrimiento. Si el usuario tiene almacenadas las credenciales de autenticación en el administrador de contraseñas de Firefox, o si el usuario frecuenta el sitio web, Firefox mostrará una barra de notificación que permite al usuario instalar el servicio.

Activación

STATUS: DONE Fx17

Un proveedor puede activarse mediante el envío de un evento personalizado "ActiveSocialFeature" en el documento. La ubicación del documento se comprueba en una lista blanca integrada y si la ubicación se encuentra, entonces se activa esa función para ese proveedor.

Se recomienda que los proveedores le pidan a sus usuarios hacer clic en un enlace o botón para activar la función, para que el usuario sea consciente de la nueva funcionalidad.

function activate() {
  var event = new CustomEvent("ActivateSocialFeature");
  document.dispatchEvent(event);
}
 

Etiquetas y colaboradores del documento

Colaboradores de esta página: MiguelFRomeroR
Última actualización por: MiguelFRomeroR,