Acompanhar pedidos do iFood fora da aba usando Document Picture-in-Picture

Eu normalmente faço pedidos pelo aplicativo do iFood, mas, como passo boa parte do tempo trabalhando no computador, costumo abrir o acompanhamento pelo navegador e deixar por ali.

O problema é que a experiência web não funciona muito bem para esse caso.

Quando a página do pedido deixa de ficar em primeiro plano, o acompanhamento pode parar de atualizar como eu esperava. Na prática, eu precisava voltar para a aba periodicamente ou pegar o celular para conferir o andamento.

Era um problema pequeno, mas suficientemente irritante para eu acabar criando uma extensão para resolver.

Nasceu daí o iFood PiP.

GitHub:
https://github.com/luannsr12/ifood-pip

Chrome Web Store:
https://chromewebstore.google.com/detail/gkmphecdhlchhmdjfmpjlomoiflhhjbj

A ideia

Em vez de simplesmente manter a aba do iFood aberta, a extensão cria uma pequena janela independente usando Document Picture-in-Picture.

Essa janela permanece por cima de outros programas, não apenas de outras abas do navegador.

Então posso continuar usando VS Code, terminal, navegador ou qualquer outro programa enquanto o pedido continua visível.

A interface mostra, dependendo da etapa:

• estabelecimento;
• status atual;
• previsão de entrega;
• progresso do pedido;
• entregador;
• veículo;
• código de entrega;
• distância;
• estimativa de chegada.

A janela não é um espelhamento da página original. A interface é construída pela própria extensão.

Document Picture-in-Picture

O Picture-in-Picture tradicional é muito associado a vídeo.

Mas navegadores Chromium também possuem a Document Picture-in-Picture API, que permite abrir uma janela PiP contendo HTML arbitrário.

Isso possibilita algo assim:

const pipWindow = await documentPictureInPicture.requestWindow({
  width: 420,
  height: 560
});

A partir daí, posso montar uma interface normalmente:

pipWindow.document.body.appendChild(container);

Isso foi particularmente interessante para esse projeto porque a janela continua independente da aba original e pode permanecer visível sobre outros aplicativos.

Atualizando o pedido

A parte mais interessante para mim não era abrir a janela.

Era continuar recebendo os dados.

A extensão roda somente nas páginas de pedido:

{
  "matches": [
    "https://www.ifood.com.br/pedido/*"
  ]
}

Ela observa as informações que a própria página utiliza para acompanhar o pedido e reaproveita os dados necessários para continuar consultando os serviços do iFood enquanto a mini janela estiver aberta.

Ou seja, não existe um backend meu no meio.

O fluxo simplificado ficou assim:

Página do pedido
      │
      ├── informações da sessão
      │
      ├── dados do pedido
      │
      ▼
Extensão
      │
      ├── atualização periódica
      │
      ▼
Serviços do próprio iFood
      │
      ▼
Mini janela PiP

A extensão não envia o pedido para um servidor meu, não possui telemetria e não depende de uma API intermediária.

Tudo acontece no navegador.

Manifest V3

A extensão está em Manifest V3 e tentei manter o escopo de acesso o menor possível.

Ela não solicita acesso genérico a todas as páginas visitadas pelo usuário.

O content script é limitado ao caminho de acompanhamento do iFood.

Também não utilizo código remoto. Todo o JavaScript executado pela extensão faz parte do pacote enviado às lojas.

Privacidade

Esse foi um ponto que preferi deixar explícito desde o começo.

A extensão processa informações do pedido porque, obviamente, precisa delas para mostrar o acompanhamento.

Mas esses dados permanecem no navegador.

Não existe:

• servidor do desenvolvedor recebendo pedidos;
• analytics;
• publicidade;
• criação de conta;
• banco de dados externo.

A única preferência persistida pela extensão é o idioma escolhido.

A política completa está aqui:

https://github.com/luannsr12/ifood-pip/blob/main/PRIVACY.md

Um detalhe que gostei no projeto

O projeto começou simplesmente como:

"Por que eu preciso ficar voltando para essa aba?"

E acabou sendo uma boa oportunidade para mexer com uma API do Chromium que eu conhecia, mas nunca tinha usado em algo realmente útil.

Document Picture-in-Picture abre algumas possibilidades interessantes porque permite transformar partes específicas de aplicações web em pequenas interfaces independentes.

Não acho que faça sentido colocar qualquer coisa em PiP.

Nesse caso específico fez sentido porque o conteúdo:

1. muda frequentemente;
2. é relevante durante um intervalo curto;
3. precisa permanecer visível;
4. não merece ocupar uma janela inteira.

A combinação encaixou bem.

Código aberto

O projeto está sob licença Apache 2.0.

Quem quiser olhar a implementação, sugerir melhorias ou simplesmente ver como usei Document Picture-in-Picture:

https://github.com/luannsr12/ifood-pip

A extensão já está publicada na Chrome Web Store e a versão para Microsoft Edge também foi enviada para análise.