Nova mensagem   Limpar mensagens! 

Agora, quando clicamos no botão Nova mensagem , receberemos uma nova notificação no ícone do nosso aplicativo.

Como você pode ver, cada vez que clicamos no botão Nova mensagem , a contagem em nosso emblema GWC (no banco dos réus) aumenta. Quando clicamos no botão Limpar mensagens! , ele é redefinido.

API de acesso ao sistema de arquivos

A API de acesso ao sistema de arquivos permite que os usuários interajam com os arquivos em seus dispositivos locais. Podemos ler e gravar arquivos diretamente no dispositivo de um usuário da mesma forma que editores de texto, IDEs e editores de vídeo fazem. Vamos explorar essa API com mais detalhes.

Em nosso primeiro exemplo, leremos um arquivo do diretório de um usuário e exibiremos o conteúdo dentro de uma tag textarea .

Lendo arquivos

Atualize seu arquivo index.html com o seguinte bloco de código:

  
 
 API de acesso ao sistema de arquivos 
 
 Um editor de texto simples que pode ler e salvar conteúdo em um arquivo. 
   
  Abrir e ler o arquivo   Salvar como   Salvar  
 

A seguir, na pasta scripts , crie um arquivo file-system.js e adicione o seguinte código:

 let fileHandle;
const textarea=document.getElementById ('textarea');
document.getElementById ('open-file-picker'). addEventListener ('click', async ()=> { [fileHandle]=await window.showOpenFilePicker (); //ler um arquivo do sistema de arquivos const file=await fileHandle.getFile (); //lê o conteúdo do texto no arquivo conteúdo const=await file.text (); //atualiza a área de texto com o conteúdo do texto textarea.value=conteúdo;
});

Precisamos manter uma referência ao arquivo selecionado usando a variável fileHandle . Isso nos permitirá salvar as alterações ou realizar outras operações no arquivo.

O método showOpenFilePicker retorna uma matriz de alças que têm todas as propriedades e métodos de que precisamos ao interagir com um arquivo.

Agora podemos testar se nosso arquivo foi lido e exibido corretamente. Vamos criar um arquivo .txt e adicionar algum texto a ele. Faremos isso usando o terminal:

 touch test.txt
echo"Hello World">> test.txt

Agora, volte ao aplicativo GWC para verificar se nosso aplicativo pode carregar o conteúdo do arquivo de texto.

Gravando em arquivos

Outro recurso poderoso da API de acesso ao sistema de arquivos é a capacidade de gravar arquivos em nosso sistema de arquivos. O método createWritable () da API File System Access cria um fluxo que você pode usar para enviar texto, seja Blobs ou um BufferSource . O método createWritable () também solicitará permissão de um usuário antes de gravar no disco.

Em um editor de texto comum, os usuários geralmente têm as opções salvar e salvar como . Enquanto a opção salvar grava alterações no mesmo arquivo, a opção salvar como permite que você grave alterações em um novo arquivo.

Primeiro, exploraremos a funcionalidade salvar como. Quando um usuário clica no botão S ave como , abriremos o seletor de arquivos e permitiremos que o usuário crie um novo arquivo ou documento para salvar suas alterações. Em seguida, escreveremos o conteúdo da área de texto neste arquivo.

Atualizaremos nossos scripts/file-system.js com o seguinte bloco de código:

 const getNewFileHandle=async ()=> { //opções adicionais para o seletor de arquivos usar opções const={ tipos: [ { descrição:"Arquivos de texto", aceitar: { "text/plain": [".txt"], }, }, ], }; const handle=await window.showSaveFilePicker (opções); alça de retorno;
} document.getElementById ("save-as"). addEventListener ("click", async ()=> { const newFileHandle=await getNewFileHandle (); conteúdo const=document.getElementById ('textarea'). valor const gravável=espera newFileHandle.createWritable (); aguarde writable.write (conteúdo); aguarde writable.close ();
});

No método getNewFileHandle () , especificamos o tipo de arquivo que gostaríamos de salvar: um arquivo de texto/txt . Em seguida, exibimos um seletor de arquivos para o usuário, permitindo que ele selecione onde deseja que o arquivo seja salvo. Este método retorna um novo identificador. Podemos então ligar aos métodos neste identificador para salvar o conteúdo da textarea no arquivo.

Vamos testar isso.

Vamos demonstrar a substituição de arquivos usando o botão Salvar . Para essa funcionalidade, precisamos nos certificar de manter uma referência ao fileHandle quando um usuário abre um arquivo. Fazendo isso, podemos facilmente ligar aos métodos no fileHandle para sobrescrever o conteúdo do arquivo.

Atualizaremos nossos scripts/file-system.js com o seguinte bloco de código:

 document.getElementById ("save"). addEventListener ("click", async ()=> { conteúdo const=document.getElementById ('textarea'). valor const gravável=espera fileHandle.createWritable (); aguarde writable.write (conteúdo); aguarde writable.close ();
})

Agora, vamos testar!

Vamos carregar algum conteúdo do arquivo test.txt que criamos anteriormente, atualizá-lo e salvá-lo.

A API Contact Picker

A API final que exploraremos neste artigo é a API do seletor de contatos . Essa funcionalidade é nativa do sistema operacional móvel há muito tempo e, com o Project Fugu, agora podemos acessar a lista de contatos de um usuário na web.

A API Contact Picker está atualmente disponível apenas executando o Chrome 80 ou posterior em um dispositivo Android. Para esta API, escreveremos o código e, em seguida, usaremos ngrok para criar uma URL pública que fará um túnel através de nosso localhost . Fazendo isso, poderemos continuar escrevendo o código em nossa máquina enquanto testamos em nosso dispositivo móvel.

Baixe e instale ngrok em sua máquina para acompanhar esta parte. Inicie o ngrok em localhost: 5500 (ou qualquer porta em que sua extensão de servidor ativa esteja sendo executada).

 ./ngrok http 5500
 

Navegue até o URL fornecido por ngrok em um dispositivo Android para ver nosso aplicativo. Se você não conseguir acessar o aplicativo em seu dispositivo Android, certifique-se de que ngrok esteja sendo executado na mesma porta em que sua extensão VS Code do servidor ao vivo está sendo executada.

Para confirmar, verifique a barra de endereço do navegador. Por exemplo, neste exemplo, o servidor ativo é executado na porta 5500 .

Agora, em seu diretório scripts , crie um arquivo contacts-picker.js . Certifique-se de incluir este script em seu arquivo index.html .

Atualize o arquivo index.html com o seguinte código:

  
 API de seletor de contatos 
 
 Seu navegador não oferece suporte à API Contacts Picker 
 
 Tente novamente em um dispositivo Android com Chrome 80+ 
  Selecione um contato  
 
 Seus contatos serão exibidos nesta página apenas para fins de demonstração e não serão armazenados em nenhum outro lugar. 
 x 
 
 
 

Adicionamos uma classe oculta do Tailwind CSS que oculta a mensagem que aparece por padrão, lendo, “Seu navegador não oferece suporte à API de seletor de contatos”. Removeremos essa classe usando JavaScript se detectarmos que o navegador do usuário é compatível com a API Contacts Picker.

Agora podemos atualizar o arquivo contacts-picker.js com este bloco de código:

 const supported=('contatos'no navegador &&'ContactsManager'na janela);
if (! suportado) { selectContactBtn.classList.add ('oculto') const messages=document.querySelectorAll ('. not-supported-message') messages.forEach ((message)=> message.classList.remove ('oculto'))
}

Se o navegador do usuário não for compatível com a API de seletor de contatos, mostraremos a mensagem.

Vamos continuar atualizando o arquivo contacts-picker.js com o restante do código de que precisamos:

 const selectContactBtn=document.getElementById ('select-contact')
//detalhes que desejamos obter sobre um contato
const props=['nome','email','tel'];
//permite que um usuário selecione vários contatos
const opts={multiple: true};
const ul=document.getElementById ('resultados') selectContactBtn.addEventListener ('click', async ()=> { tentar { contatos const=espera navigator.contacts.select (props, opts); renderResults (contatos); } catch (ex) { //Trate todos os erros aqui. }
}) function renderResults (contatos) { contact.forEach (contact=> { const li=document.createElement ('li') if (contact.name) li.innerHTML +=` Nome : $ {contact.name} 
` if (contact.email) li.innerHTML +=` E-mail : $ {contact.email.join (',')} 
` if (contact.tel) li.innerHTML +=` Tel : $ {contact.tel.join (',')} 
` li.classList.add ('mt-3') ul.appendChild (li) })
}

Temos uma função renderResults que pegará em uma matriz de contatos selecionados pelo usuário e os anexará à nossa tag

para que possam ser exibidos no tela.



Agora, você pode testar a API do seletor de contatos em um dispositivo Android executando o Chrome 80 (novamente, observe que este é o único navegador que oferece suporte à API no momento em que este artigo foi escrito). Consulte a lista atualizada aqui para ver quando chega o suporte para mais navegadores.

Você pode ver a versão ao vivo da demonstração aqui e ver o código-fonte completo, incluindo os estilos que usamos, aqui .

Conclusão

O Projeto Fugu está trabalhando para expandir as possibilidades para desenvolvedores na web. Eventualmente, os desenvolvedores serão capazes de acessar as APIs nativas no dispositivo móvel de um usuário sem precisar saber nada sobre como essas APIs funcionam. Os desenvolvedores também poderão construir facilmente recursos com essas APIs usando as principais linguagens da web com as quais eles já estão familiarizados!

Você pode ver a lista mais atualizada das APIs aqui , bem como quais navegadores suportam quais APIs. Qualquer pessoa pode sugerir quais APIs devem ser adicionadas ao projeto. You can add your suggestions to the list here.

The post Bridging the native app gap with Project Fugu appeared first on LogRocket Blog.

Source link