APIs JavaScript que você não conhece

API De Visibilidade Da Página 

Essa é uma API da Web pouco conhecida que fica em quarto lugar em reconhecimento no State of JS Survey. Ele permite que você saiba quando um usuário saiu da página. Para ser mais preciso, a API aciona um evento sempre que o status de visibilidade da página muda, seja quando o usuário minimiza ou maximiza a janela ou alterna a guia.

No passado, você tinha que usar truques para saber se um usuário havia trocado de guia ou minimizado a janela. O mais popular foi usar os eventos do navegador blur e  focus O uso desses eventos resultaria em algo como o seguinte:

window.addEventListener("focus", function () {
    // User is back on the page
    // Do Something
});

window.addEventListener("blur", function () {
    // User left the page
    // Do Something
});

O código anterior funciona, mas não como pretendido. Como o blurevento é acionado quando a página perde o foco, ele pode ser acionado quando o usuário clica na barra de pesquisa, em uma caixa de diálogo de alerta, no console ou na borda da janela. Então, blure focusapenas nos diga se a página está ativa, mas não se o conteúdo da página está oculto ou visível.

CASOS DE USO 

Em geral, queremos usar a API Page Visibility para interromper processos desnecessários quando o usuário não vê a página ou, por outro lado, para realizar ações em segundo plano. Alguns casos específicos podem ser:

• pausar vídeos, carrosséis de imagens ou animações quando o usuário sair da página;
• se a página exibir dados ativos de uma API, interrompa esse comportamento temporariamente enquanto o usuário estiver ausente;
• para enviar análises do usuário.

COMO USÁ-LO?

A API Page Visibility traz duas propriedades e um evento para acessar o status de visibilidade da página:

• document.hidden
  Está disponível globalmente e é somente leitura. Tente evitá-lo, pois agora está obsoleto, mas quando acessado, ele retorna truese a página estiver oculta e falsese estiver visível.
• document.visibilityState
  É a versão atualizada do document.hidden, mas quando acessada, retorna quatro valores possíveis dependendo do status de visibilidade da página: – visible
  A página está visível, ou seja, não está minimizada nem em outra aba. – hidden
  A página não está visível; está minimizado ou em outra guia. – prerender
  Este é o estado inicial de uma página visível durante a pré-renderização. O status de visibilidade de uma página pode começar em prerendere depois mudar para outro estado, mas não pode mudar de outro estado para prerender. – unloaded
  A página está sendo descarregada da memória.
• visibilitychange
  É um evento fornecido pelo documentobjeto que é acionado quando a página visibilityStatemuda.

document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
        // page is visible
    } else {
        // page is hidden
    }
});

Para ver como usar a API de visibilidade de página, vamos usá-la para pausar um vídeo e parar de buscar recursos de uma API quando o usuário sair da página. Para começar, usarei vite.js , que é uma ferramenta incrível para iniciar um novo projeto rapidamente:

npm create vite@latest unknown-web-apis

Quando solicitado a selecionar um framework, selecione vanilla para criar um projeto javascript vanilla. E assim que terminar, vá para a nova pasta, instale os npmpacotes necessários e inicie o servidor do desenvolvedor:

  cd unknown-web-apis
  npm install
  npm run dev

Vá para localhost:3000/ e você verá seu projeto Vite funcionando!

Em primeiro lugar, vamos direcionar para o /main.jsarquivo e excluir todo o clichê. Em segundo lugar, abriremos /index.htmle dentro da #apptag div, adicionaremos um elemento de vídeo com qualquer arquivo de vídeo desejado. Eu usei um Yoshi dançante. 🙂

<div id="app">
    <video controls id="video">
        <source src="./yoshi.mp4" />
    </video>
</div>

De volta a /main.js, adicionaremos um ouvinte de evento ao documentobjeto que está ouvindo o visibilitychangeevento. Podemos então acessar a document.visibilityStatepropriedade para ver quando a página está visível ou oculta.

document.addEventListener("visibilitychange", () => {
    console.log(document.visibilityState);
});

Você pode acessar o console da página e ver a alteração do status de visibilidade da página ao minimizar a janela ou alternar para outra guia. Agora, dentro do ouvinte do evento, podemos verificar a document.visibilityStatepropriedade, pausar o vídeo quando for hidden, e reproduzi-lo quando visible. (Claro, primeiro selecionamos o videoelemento usando document.querySelector().)

const video = document.querySelector("#video");

document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
        video.play();
    } else {
        video.pause();
    }
});

Agora o vídeo para sempre que o usuário sai da página. Outro uso da API de visibilidade de página é parar de buscar recursos desnecessários quando o usuário não vê a página. Para ver isso, escreveremos uma função para buscar constantemente uma cotação aleatória da API do citable.io e pausar esse comportamento quando a página estiver oculta. Primeiramente, criaremos uma nova tag div para armazenar a cotação em /index.html.

<div id="app">
    <video controls id="video">
        <source src="./yoshi.mp4" />
    </video>
    <div id="quote"></div>
</div>

De volta ao /main.js, usaremos a API Fetch para fazer uma chamada para o quotable.ioendpoint https://api.quotable.io/random e inseri-lo no quotediv.

const quote = document.querySelector("#quote");

const getQuote = async () => {
try {
const response = await fetch("https://api.quotable.io/random");
const {content, author, dateAdded} = await response.json();
const parsedQuote = ` <q>${content}</q> <br> <p>- ${author}</p><br> <p>Added on ${dateAdded}</p>`;
quote.innerHTML = parsedQuote;
} catch (error) {
console.error(error);
}
};

getQuote();

Vamos explicar brevemente o que está acontecendo aqui. Primeiro selecionamos o quoteelemento do DOM. Em seguida, declaramos a getQuotefunção, que é uma async função que nos permite usar a await palavra-chave para esperar até buscarmos os dados da API. Os dados buscados estão no formato JSON, então usamos a awaitpalavra-chave mais uma vez para esperar até que os dados sejam analisados ​​em um objeto JavaScript. A quotable.ioAPI nos fornece, entre outras coisas content, as propriedades author, e dateAddedque injetaremos e exibiremos na quotediv. Isso funciona, mas a cotação é buscada apenas uma vez, então podemos usar setInterval()para chamar a função a cada 10 segundos.

const quote = document.querySelector("#quote");

const getQuote = async () => {
try {
const response = await fetch("https://api.quotable.io/random");
const {content, author, dateAdded} = await response.json();
const parsedQuote = ` <q>${content}</q> <br> <p>- ${author}</p><br> <p>Added on ${dateAdded}</p>`;
quote.innerHTML = parsedQuote;
} catch (error) {
console.error(error);
}
};

getQuote();

setInterval(getQuote, 10000);

Se o usuário minimizar a janela ou alternar a guia, a página ainda buscará as aspas, criando uma carga de rede desnecessária. Para resolver isso, podemos verificar se a página está visível antes de buscar uma cotação.

const getQuote = async () => {
    if (document.visibilityState === "visible") {
        try {
            const response = await fetch("https://api.quotable.io/random");
            const {content, author, dateAdded} = await response.json();
            const parsedQuote = `
            <q>${content}</q> <br> 
            <p>- ${author}</p><br> 
            <p>Added on ${dateAdded}</p>`;
            quote.innerHTML = parsedQuote;
        } catch (error) {
            console.error(error);
        }
    }
};

getQuote();

setInterval(getQuote, 10000);

Agora, só buscaremos a cotação se a página estiver visível para o usuário.