WahtsApp Fix

Motivação do Projeto

O projeto surgiu de uma solicitação do 'Gabarito', administrador do fórum Clube Ceticismo, para resolver o problema de páginas salvas do WhatsApp Web que não exibiam offline o mesmo aspecto de quando carregadas em modo online.

Identificação do Problema

Especificamente, as figuras de emojis introduzidas pelos usuários nas conversas não eram exibidas quando a versão offline de uma destas páginas (previamente salva em disco) era aberta no navegador.

Verificou-se que estas figuras eram carregadas utilizando-se uma técnica conhecida como image sprites, que consiste em juntar vários arquivos de imagens em um único e depois exibir cada figura em particular deste arquivo como background-image de algum elemento da página.

No caso das páginas do WhatsApp Web a figura do emoji inserida pelo usuário é carregada como um background-image de um tipo específico de tag exemplificada abaixo.

O arquivo "d5fceb6532643d0d84ffe09c40c481ecdf59e15a.gif" é uma figura de 1 pixel que serve para criar o box onde a figura de um emoji no image sprites poderá ser carregada como background-image deste box. A posição exata deste emoji no image sprites é referenciada pelo atributo style="background-position: -60px -40px;" e o emoji cuja imagem deve ser exibida aparece no valor do atributo alt: alt="🤷‍♂️".

Por alguma razão, quando uma página destas é salva usando-se a opção de salvar do navegador, a cópia offline não é capaz de carregar o emoji como o background-image desse tipo de tag exemplificado acima.

Talvez porque a referência ao arquivo de image sprites não seja editada corretamente quando códigos JS ou CSS são salvos, talvez porque este próprio arquivo não esteja sendo salvo, ou por qualquer outra falha que não foi exatamente identificada.

Solução

Uma aplicação Java capaz de editar os arquivos HTML salvos, alterando cada uma das tags do tipo da exemplificado acima. Trocando-a por uma tag img que simplesmente insere a imagem do emoji correspondente especificado no atributo alt da tag a ser editada.

Mas onde encontrar os arquivos com as imagens de todos estes emojis e como fazer para identificar o arquivo correto para cada tipo de emoji?

Arquivos de imagem de emojis (no mesmo estilo das utilizadas pelo WhatsApp) puderam ser obtidos na página https://emojipedia.org/whatsapp/2.19.352

E estes são nomeados utilizando-se o nome oficial do emoji seguido de uma string de codepoints em hexadecimal que são os códigos UNICODE que codificam o emoji deste arquivo.

Alguns exemplos de nomes destes arquivos são listados abaixo:

• adult_1f9d1.png
• skull-and-crossbones_2620-fe0f.png
• police-officer_medium-dark-skin-tone_1f46e-1f3fe_1f3fe.png

Portanto a ideia é criar duas classes Java:

- Uma para converter estes nomes de arquivos para apenas a string de codepoints que define o emoji cuja imagem está neste mesmo arquivo.

- E outra capaz de receber a string UTF-8 que identifica o emoji no atributo alt da tag, e convertê-la para string de codepoints igual ao nome do arquivo PNG com a imagem deste emoji.

Por exemplo:

O arquivo "flag-for-brazil_1f1e7-1f1f7.png" seria renomeado para "1f1e7-1f1f7.png"

Mas a tag na página HTML que tenta inserir o emoji da nossa bandeira conterá um atributo alt como este: alt="🇧🇷"

Se o valor deste atributo (que é uma string codificada em UTF-8) puder ser convertido também para "1f1e7-1f1f7", que passou a ser o nome do arquivo PNG com a imagem da bandeira do Brasil, será possível carregar a figura do emoji correspondente editando a tag.

Trocando a tag original para:

Já que através do atributo alt de uma tag o programa vai localizar o arquivo PNG referente ao emoji que a tag está tentando exibir na página.