1. Introdução e configuração
Recursos da Web
Queremos diminuir a lacuna de recursos entre a Web e os nativos e facilitar a criação de ótimas experiências na Web aberta para os desenvolvedores. Acreditamos que todo desenvolvedor deve ter acesso aos recursos de que precisa para ter uma ótima experiência na Web, e estamos comprometidos com uma Web mais eficiente.
No entanto, alguns recursos, como o acesso ao sistema de arquivos e a detecção de inatividade, estão disponíveis para o ambiente nativo, mas não na Web. Esses recursos ausentes significam que alguns tipos de aplicativos não podem ser fornecidos na Web ou são menos úteis.
Vamos projetar e desenvolver esses novos recursos de forma aberta e transparente, usando os processos existentes de padrões de plataforma aberta da Web e, ao mesmo tempo, receber feedback antecipado de desenvolvedores e outros fornecedores de navegadores à medida que iterarmos o design, para garantir um design interoperável.
O que você vai criar
Neste codelab, você vai testar várias APIs da Web que são novas ou estão disponíveis apenas com uma flag. Portanto, este codelab se concentra nas próprias APIs e nos casos de uso que elas desbloqueiam, em vez de na criação de um produto final específico.
O que você vai aprender
Este codelab ensinará a mecânica básica de várias APIs de vanguarda. Essa mecânica ainda não é definitiva, e agradecemos muito seu feedback sobre o fluxo do desenvolvedor.
O que é necessário
Como as APIs apresentadas neste codelab estão bastante modernas, os requisitos de cada uma delas variam. Leia com atenção as informações de compatibilidade no início de cada seção.
Como abordar o codelab
O codelab não é necessariamente para ser abordado em sequência. Cada seção representa uma API independente, então fique à vontade para escolher o que mais lhe interessa.
2. API Badging
O objetivo da API Badging é trazer a coisas que acontecem em segundo plano. Para simplificar a demonstração deste codelab, vamos usar a API para trazer atenção a algo que está acontecendo em primeiro plano. Assim, é possível fazer a transferência mental das coisas que acontecem em segundo plano.
Instalar o Airhorner
Para que essa API funcione, você precisa de um PWA instalado na tela inicial. A primeira etapa é instalar um PWA, como o infame e mundialmente famoso airhorner.com. Clique no botão Instalar no canto superior direito ou use o menu de três pontos para instalar manualmente.
Uma solicitação de confirmação vai aparecer. Clique em Instalar.
Agora você tem um novo ícone na base do seu sistema operacional. Clique nele para iniciar o PWA. Ele terá a própria janela do app e será executado no modo independente.
|
|
Como definir um selo
Agora que você tem um PWA instalado, precisa de alguns dados numéricos (os selos só podem conter números) para serem mostrados em um selo. Uma coisa simples a contar no Air Horner é, suspiro, o número de vezes que ele foi tocado. Na verdade, com o app Airhorner instalado, tente tocar a buzina e verifique o crachá. Sempre que você toca, conta um número.
Então, como isso funciona? Basicamente, o código é este:
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});
Soa a buzina algumas vezes e verifique o ícone do PWA: ele é atualizado todas as vezes. solteiro. tempo de resposta. os sons das buzinas de aeródromo. Simples assim.
Remover um selo
O contador vai até 99 e, em seguida, começa de novo. Também é possível redefini-la manualmente. Abra a guia do Console do DevTools, cole a linha abaixo e pressione Enter.
navigator.setExperimentalAppBadge(0);
Como alternativa, também é possível remover o selo explicitamente apagando-o, conforme mostrado no snippet a seguir. O ícone do PWA deve estar novamente com a aparência do início, claro e sem um selo.
navigator.clearExperimentalAppBadge();
Feedback
O que você achou desta API? Responda brevemente a esta pesquisa para nos ajudar:
Essa API foi intuitiva?
Você conseguiu executar o exemplo?
Quer compartilhar algo mais? Estava faltando algum recurso? Deixe seu feedback rápido nesta pesquisa. Obrigada!
3. API Native File System
A API Native File System permite que os desenvolvedores criem aplicativos da Web avançados que interagem com arquivos no dispositivo local do usuário. Depois que um usuário concede acesso a um app da Web, essa API permite que esses apps leiam ou salvem alterações diretamente em arquivos e pastas no dispositivo do usuário.
Como ler um arquivo
A mensagem "Hello, world" da API Native File System é ler um arquivo local e obter o conteúdo do arquivo. Crie um arquivo .txt simples e insira texto. Em seguida, acesse qualquer site seguro (ou seja, um site disponibilizado por HTTPS), como example.com, e abra o console do DevTools. Cole o snippet de código abaixo no console. Como a API Native File System requer um gesto do usuário, anexamos um gerenciador de clique duplo ao documento. Precisaremos do identificador do arquivo mais tarde, então nós apenas o tornamos uma variável global.
document.ondblclick = async () => {
window.handle = await window.chooseFileSystemEntries();
const file = await handle.getFile();
document.body.textContent = await file.text();
};
Ao clicar duas vezes em qualquer lugar da página example.com, um seletor de arquivos será exibido.
Selecione o arquivo .txt que você criou antes. O conteúdo do arquivo vai substituir o conteúdo body real de example.com.
Como salvar um arquivo
A seguir, vamos fazer algumas alterações. Portanto, vamos tornar o body editável colando o snippet de código abaixo. Agora, você pode editar o texto como se o navegador fosse um editor de texto.
document.body.contentEditable = true;
Agora, queremos gravar essas mudanças de volta no arquivo original. Portanto, precisamos de um gravador no identificador do arquivo, que podemos conseguir colando o snippet abaixo no console. Mais uma vez, precisamos de um gesto do usuário, então desta vez esperamos um clique no documento principal.
document.onclick = async () => {
const writer = await handle.createWriter();
await writer.truncate(0);
await writer.write(0, document.body.textContent);
await writer.close();
};
Quando você clica (e não clica duas vezes) no documento, uma solicitação de permissão é exibida. Quando você concede permissão, o conteúdo do arquivo será o que você editou antes no body. Verifique as alterações abrindo o arquivo em um editor diferente (ou inicie o processo novamente clicando duas vezes no documento e reabrindo o arquivo).
Parabéns! Você acabou de criar o menor editor de texto do mundo [citation needed].
Feedback
O que você achou desta API? Responda brevemente a esta pesquisa para nos ajudar:
Essa API foi intuitiva?
Você conseguiu executar o exemplo?
Quer compartilhar algo mais? Estava faltando algum recurso? Deixe seu feedback rápido nesta pesquisa. Obrigada!
4. API Shape Detection
A API Shape Detection oferece acesso a detectores de forma acelerados (por exemplo, para rostos humanos) e funciona com imagens estáticas e/ou feeds de imagens ao vivo. Os sistemas operacionais têm detectores de recursos eficientes e altamente otimizados, como o FaceDetector do Android. A API Shape Detection abre essas implementações nativas e as expõe por meio de um conjunto de interfaces JavaScript.
Atualmente, os recursos compatíveis são: detecção facial pela interface FaceDetector, detecção de código de barras pela interface BarcodeDetector e detecção de texto (reconhecimento óptico de caracteres) pela interface TextDetector.
Detecção facial
Um recurso fascinante da API Shape Detection é a detecção facial. Para testar, precisamos de uma página com rostos. Esta página com o rosto do autor é um bom começo. Ele será parecido com a captura de tela abaixo. Em um navegador compatível, a caixa de limite do rosto e os pontos de referência do rosto serão reconhecidos.
Você pode notar que pouco código foi necessário para remixar ou editar o projeto Glitch, principalmente o arquivo script.js.
Se você quiser ser totalmente dinâmico e não apenas trabalhar com o rosto do autor, acesse esta página de resultados da Pesquisa Google cheia de rostos em uma guia privada ou no modo visitante. Nessa página, abra as Ferramentas para desenvolvedores do Chrome clicando com o botão direito do mouse em qualquer lugar e selecione Inspecionar. Depois, na guia "Console", cole o snippet abaixo. O código destacará os rostos detectados com uma caixa vermelha semitransparente.
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const faces = await new FaceDetector().detect(img);
faces.forEach(face => {
const div = document.createElement('div');
const box = face.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left + left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
img.before(div);
});
} catch(e) {
console.error(e);
}
});
Há algumas mensagens de DOMException, e nem todas as imagens estão sendo processadas. Isso ocorre porque as imagens acima da dobra são inline como URIs de dados e podem ser acessadas, enquanto as imagens abaixo da dobra vêm de um domínio diferente que não está configurado para oferecer suporte ao CORS. Para a demonstração, não precisamos nos preocupar com isso.
Detecção de pontos de referência facial
Além de mostrar rostos, o macOS também oferece suporte à detecção de pontos de referência faciais. Para testar a detecção de pontos de referência de rostos, cole o snippet a seguir no console. Lembrete: o alinhamento dos pontos de referência não é perfeito devido ao site crbug.com/914348 (link em inglês), mas você pode conferir o rumo que ela está tomando e o poder desse recurso.
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const faces = await new FaceDetector().detect(img);
faces.forEach(face => {
const div = document.createElement('div');
const box = face.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left + left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
img.before(div);
const landmarkSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
landmarkSVG.style.position = 'absolute';
landmarkSVG.classList.add('landmarks');
landmarkSVG.setAttribute('viewBox', `0 0 ${img.width} ${img.height}`);
landmarkSVG.style.width = `${img.width}px`;
landmarkSVG.style.height = `${img.height}px`;
face.landmarks.map((landmark) => {
landmarkSVG.innerHTML += `<polygon class="landmark-${landmark.type}" points="${
landmark.locations.map((point) => {
return `${scaleX * point.x},${scaleY * point.y} `;
}).join(' ')
}" /></svg>`;
});
div.before(landmarkSVG);
});
} catch(e) {
console.error(e);
}
});
Detecção de código de barras
O segundo recurso da API Shape Detection é a detecção de códigos de barras. Assim como antes, precisamos de uma página com códigos de barras, como este. Ao abrir em um navegador, você verá os diversos códigos QR decifrados. Remixe ou edite o projeto Glitch, principalmente o arquivo script.js, para conferir como isso é feito.
Se você quiser algo mais dinâmico, podemos usar novamente a Pesquisa de imagens do Google. Desta vez, no seu navegador, acesse esta página de resultados da Pesquisa Google em uma guia privada ou no modo visitante. Agora cole o snippet abaixo na guia do console do Chrome DevTools. Após alguns instantes, os códigos de barras reconhecidos serão anotados com o valor bruto e o tipo de código de barras.
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const barcodes = await new BarcodeDetector().detect(img);
barcodes.forEach(barcode => {
const div = document.createElement('div');
const box = barcode.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left - left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
div.style.color = 'black';
div.style.fontSize = '14px';
div.textContent = `${barcode.rawValue}`;
img.before(div);
});
} catch(e) {
console.error(e);
}
});
Detecção de texto
O recurso final da API Shape Detection é a detecção de texto. Agora você já sabe o que fazer: precisamos de uma página com imagens que contenham texto, como esta, com resultados de digitalização do Google Livros. Nos navegadores compatíveis, você verá o texto reconhecido e uma caixa delimitadora ao redor dos trechos. Remixe ou edite o projeto Glitch, principalmente o arquivo script.js, para conferir como isso é feito.
Para testar isso de forma dinâmica, acesse esta página de resultados da pesquisa em uma guia privada ou no modo visitante. Agora cole o snippet abaixo na guia do console do Chrome DevTools. Aguarde um pouco, e parte do texto será reconhecida.
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const texts = await new TextDetector().detect(img);
texts.forEach(text => {
const div = document.createElement('div');
const box = text.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left - left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
div.style.color = 'black';
div.style.fontSize = '14px';
div.innerHTML = text.rawValue;
img.before(div);
});
} catch(e) {
console.error(e);
}
});
Feedback
O que você achou desta API? Responda brevemente a esta pesquisa para nos ajudar:
Essa API foi intuitiva?
Você conseguiu executar o exemplo?
Quer compartilhar algo mais? Estava faltando algum recurso? Deixe seu feedback rápido nesta pesquisa. Obrigada!
5. API Web Share Target
A API Web Share Target permite que aplicativos da Web instalados sejam registrados no sistema operacional subjacente como um alvo de compartilhamento para receber conteúdo compartilhado da API Web Share ou de eventos do sistema, como o botão de compartilhamento no nível do sistema operacional.
Instalar um PWA para compartilhamento
Para começar, você precisa de um PWA para compartilhamento. Desta vez, o Airhorner não fará o trabalho, mas o app de demonstração Web Share Target ajudará você. Instale o app na tela inicial do dispositivo.
Compartilhar algo com o PWA
Em seguida, você precisa de algo para compartilhar, como uma foto do Google Fotos. Use o botão "Compartilhar" e selecione o PWA do mural como alvo de compartilhamento.
Ao tocar no ícone do app, você acessa o PWA do mural e a foto aparece bem ali.
Então, como isso funciona? Para descobrir, consulte o manifesto do app da Web do PWA do Scrapbook. A configuração para fazer a API Web Share Target funcionar está na propriedade "share_target" do manifesto que, no campo "action", aponta para um URL decorado com parâmetros listados em "params".
Em seguida, a parte de compartilhamento preenche esse modelo de URL adequadamente (facilitado por uma ação de compartilhamento ou controlado programaticamente pelo desenvolvedor usando a API Web Share) para que o destinatário possa extrair os parâmetros e fazer algo com eles, como exibi-los.
{
"action": "/_share-target",
"enctype": "multipart/form-data",
"method": "POST",
"params": {
"files": [{
"name": "media",
"accept": ["audio/*", "image/*", "video/*"]
}]
}
}
Feedback
O que você achou desta API? Responda brevemente a esta pesquisa para nos ajudar:
Essa API foi intuitiva?
Você conseguiu executar o exemplo?
Quer compartilhar algo mais? Estava faltando algum recurso? Deixe seu feedback rápido nesta pesquisa. Obrigada!
6. API Wake Lock
Para evitar o consumo da bateria, a maioria dos dispositivos entra no modo de suspensão rapidamente quando é deixado ocioso. Embora isso não seja um problema na maioria das vezes, alguns aplicativos precisam manter a tela ou o dispositivo ativado para concluir seu trabalho. A API Wake Lock fornece uma maneira de impedir que o dispositivo escureça e bloqueie a tela ou impedir que o dispositivo entre no modo de suspensão. Esse recurso possibilita novas experiências que, até agora, exigiam um app nativo.
Configurar um protetor de tela
Para testar a API Wake Lock, primeiro verifique se o dispositivo está em modo de suspensão. Portanto, no painel de preferências do seu sistema operacional, ative um protetor de tela de sua escolha e verifique se ele é iniciado após um minuto. Para garantir que ele funcione, deixe o dispositivo em paz durante esse período (é, isso é doloroso). As capturas de tela abaixo mostram o macOS, mas você pode testar isso em um dispositivo móvel Android ou em qualquer plataforma de computador compatível.
Definir um wake lock de tela
Agora que você sabe que o protetor de tela está funcionando, use um wake lock do tipo "screen" para evitar que ele faça o trabalho. Acesse o app de demonstração do Wake Lock e clique no botão Ativar
screen Caixa de seleção Wake Lock.
A partir desse momento, um wake lock fica ativo. Se você for paciente o suficiente para deixar o dispositivo intacto por um minuto, vai perceber que o protetor de tela realmente não iniciou.
Então, como isso funciona? Para saber mais, acesse o projeto Glitch (link em inglês) no app de demonstração do Wake Lock e confira script.js. A essência do código está no snippet abaixo. Abra uma nova guia (ou use uma que você tenha aberto) e cole o código abaixo em um console das Ferramentas para desenvolvedores do Chrome. Ao clicar na janela, você verá um wake lock ativo por exatamente 10 segundos (consulte os registros do console), e o protetor de tela não será iniciado.
if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {
let wakeLock = null;
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request('screen');
wakeLock.addEventListener('release', () => {
console.log('Wake Lock was released');
});
console.log('Wake Lock is active');
} catch (e) {
console.error(`${e.name}, ${e.message}`);
}
};
requestWakeLock();
window.setTimeout(() => {
wakeLock.release();
}, 10 * 1000);
}
Feedback
O que você achou desta API? Responda brevemente a esta pesquisa para nos ajudar:
Essa API foi intuitiva?
Você conseguiu executar o exemplo?
Quer compartilhar algo mais? Estava faltando algum recurso? Deixe seu feedback rápido nesta pesquisa. Obrigada!
7. API Contact Picker
Uma API com a qual estamos muito animados é a API Contact Picker. Ela permite que um app da Web acesse os contatos por meio do gerenciador de contatos nativo do dispositivo. Assim, seu app da Web terá acesso aos contatos nomes, endereços de e-mail e números de telefone. Você pode especificar se quer apenas um ou vários contatos e se quer todos os campos ou apenas um subconjunto de nomes, endereços de e-mail e números de telefone.
Considerações sobre privacidade
Quando o seletor abrir, escolha os contatos que você quer compartilhar. Observe que não existe uma opção que é deliberada: queremos que o compartilhamento seja uma decisão consciente. Da mesma forma, o acesso não é contínuo, mas uma decisão única.
Como acessar contatos
Acessar os contatos é uma tarefa simples. Antes de abrir o seletor, especifique quais campos você quer usar (name, email e telephone) e se quer acessar vários contatos ou apenas um. Para testar a API em um dispositivo Android, abra o aplicativo de demonstração. A seção relevante do código-fonte é essencialmente o snippet abaixo:
getContactsButton.addEventListener('click', async () => {
const contacts = await navigator.contacts.select(
['name', 'email'],
{multiple: true});
if (!contacts.length) {
// No contacts were selected, or picker couldn't be opened.
return;
}
console.log(contacts);
});
8. API Async Clipboard
Copiar e colar texto
Até agora, não havia uma maneira de copiar e colar imagens para a área de transferência do sistema de forma programática. Recentemente, adicionamos suporte a imagens à API Async Clipboard,
Agora você pode copiar e colar as imagens. A novidade é que você também pode gravar imagens para a área de transferência. Já faz algum tempo que a API da área de transferência assíncrona oferece suporte para copiar e colar de texto. Você pode copiar texto para a área de transferência chamando Navigator.clipboard.writeText() e, mais tarde, colar o texto chamando Navigator.clipboard.readText().
Como copiar e colar imagens
Agora você também pode gravar imagens para a área de transferência. Para que isso funcione, você precisa dos dados da imagem como um blob que você passa para o construtor do item da área de transferência. Por fim, você pode copiar esse item da área de transferência chamando navigator.clipboard.write().
// Copy: Writing image to the clipboard
try {
const imgURL = 'https://developers.google.com/web/updates/images/generic/file.png';
const data = await fetch(imgURL);
const blob = await data.blob();
await navigator.clipboard.write([
new ClipboardItem(Object.defineProperty({}, blob.type, {
value: blob,
enumerable: true
}))
]);
console.log('Image copied.');
} catch(e) {
console.error(e, e.message);
}
Colar a imagem de volta da área de transferência parece bastante complicado, mas consiste apenas em recuperar o blob do item da área de transferência. Como pode haver vários, é necessário percorrê-los até chegar ao que você quer. Por motivos de segurança, no momento isso é limitado a imagens PNG, mas mais formatos de imagem podem ser compatíveis no futuro.
async function getClipboardContents() {
try {
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
try {
for (const type of clipboardItem.types) {
const blob = await clipboardItem.getType(type);
console.log(URL.createObjectURL(blob));
}
} catch (e) {
console.error(e, e.message);
}
}
} catch (e) {
console.error(e, e.message);
}
}
É possível conferir essa API em ação em um app de demonstração. Os snippets relevantes do código-fonte estão incorporados acima. A cópia de imagens para a área de transferência pode ser feita sem permissão, mas você precisa conceder acesso para colar itens da área de transferência.
Depois de conceder acesso, você pode ler a imagem da área de transferência e colá-la no aplicativo:
9. Parabéns!
Parabéns, você chegou ao fim do codelab. Mais uma vez, isso é um lembrete de que a maioria das APIs ainda está em fluxo e sendo ativamente trabalhada. Por isso, a equipe agradece seu feedback, porque só a interação com pessoas como você vai nos ajudar a usar as APIs corretamente.
Consulte também nossa página inicial sobre recursos com frequência. Vamos mantê-lo atualizado e ele tem ponteiros para todos os artigos detalhados sobre as APIs em que trabalhamos. Continue arrasando!
Tom e toda a equipe de recursos 🐡