Categorias
JavaScript Tutoriais Web

Introdução a Service Worker

Nesse posts vamos falar sobre service worker é um dos recursos chaves dentro das Progressive web Apps vamos entender como ele funciona e o seu ciclo de vida. Para quem ainda não viu, estou gravando uma série sobre PWA em meu canal do youtube, até o momento tenho mais de 12 aulas gravadas também estou adicionando conteúdo complementar no blog.

O que é um service worker?

Nada mais é que o coração das PWAs, não é nenhuma tecnologia especial e sim um arquivo JavaScript que roda em segundo plano em nossa aplicação o que isso significa? Ele não é executado na thread principal da aplicação junto com execução do HTML e CSS, ele não tem acesso ao DOM por exemplo. Isso abre uma porta para recursos rodarem independente do browser por exemplo push notifications e execução de código em segundo plano. Outro recurso extremamente importante é o suporte a experiência offline, dando ao usuários controle sobre a aplicação independente da conectividade.

Pontos importantes sobre Service Worker

  • Precisa estar rodando em HTTPS
  • Ele é uma JavaScript Worker, ele não tem acesso ao DOM
  • Permite controlar como serão feitos os requests a rede
  • Faz o uso intensivo de promises
  • Precisa ser instalado por outro JavaScript
  • Possui um escopo e esse escopo é baseado onde o arquivo do service worker se encontra.

Ciclo de vida

Quando registrado por outro JavaScript, o service worker passa a ter um ciclo de vida independente do conteúdo web em que foi registrado. Ele será movido para outra Thread como mencionamos anteriormente, quando registrado ele irá chamar o evento Install event, se durante o processo de instalação ocorrer um erro na transferência de algum arquivo o processo de instalação irá falhar. mas se tudo ocorrer bem ele irá disparar um segundo evento Active event.

Depois que o Active event é disparado o service worker está pronto para disparar funções em segundo plano e acompanhar os dados que estão sendo transferidos entre aplicação e a rede. Neste momento conseguimos definir estratégia de cache e suporte offline. A imagem abaixo resume os passos que acabamos de comentar.

Ciclo de vida de um service worker

Na imagem acima temos uma definição completa do ciclo de vida de um service worker, com adição a um ponto importante quando adicionamos uma nova versão ela fica em estado de espera, ela só será instalada quando todas as instâncias da nossa aplicação forem finalizadas.

Registrando um Service worker

if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js').then(function(registration) { // service worker registrado com sucesso console.log('ServiceWorker registrado no seguinte escopo: ', registration.scope); }, function(err) { // falha no registro:( console.log('Falha no registro do ServiceWorker: ', err); }); }); }

O código acima será implementado pelo o JavaScript responsável por registrar o nosso Service Worker, na primeira linha verificamos se o nosso browser possui suporte a tecnologia, caso tenha, o registramos com a função com navigator.serviceWorker.register e através de uma promise verificamos se o service worker foi instalado com sucesso. E dentro do nosso sw.js podemos adicionar listener para acompanhar o seu ciclo de vida:

self.addEventListener('install', function(event) { // acompanha a instalação do service worker }); self.addEventListener('activate', function(event) { // acompanha quando o service worker está ativo }); self.addEventListener('fetch', function(event) { // acompanha quando a aplicação faz transferência de arquivos });

Os listeners serão importante para criar um cache, acompanha mensagens e definir estratégias de cache. Para esse post, vamos fechando por aqui, se ainda não segue o meu canal no Youtube, lá estou sempre postando conteúdo sobre PWA: https://www.youtube.com/user/fdangellys

Veja os posts sobre PWA aqui

Veja também o mini curso sobre PWA

Categorias
JavaScript Tutoriais

Badging API

A Badging API é uma das novas APIs criadas para fechar o gap entre aplicações nativas, a badging API foi incluída na versão 73 do Chrome em versão de teste, permite adicionar contador de notificações nos ícones de nossa PWA na barra de tarefas, diferente de push notification badging api é menos intrusiva apenas exibe um balão de notificação sobre o ícone de nossa aplicação, atualmente Window 7+ e MacOS possuem suporte a essa funcionalidade através de token especial para o recurso.

Google iniciou um projeto com foco na inclusão de novas funcionalidades e o mais legal que esse projeto será baseado em requisições feitas pela comunidade para saber mais sobre o projeto acesse o link:
https://developers.google.com/web/updates/capabilities

Casos sugeridos para utilizar a badging API

  • Aplicações de Chat, email e social apps que precisam notificar que o usuário recebeu novas mensagens
  • Aplicações precisa sinalizar que processos que estavam rodando em background foram concluídas
  • Jogos que estão aguardando uma ação do usuário.

Requisitos

  • Chrome 73 ou superior
  • Aplicação precisa estar instalada como PWA

Como utilizar

A partir da versão 73 a Badging API está disponível através de um recurso chamado Origin trials(Versões de avaliação) ele permite testar novas features e dar feedback de usabilidade, praticidade e eficiência. Caso queira saber mais sobre o projeto acesse o link.

Registrando para Versões de avaliações

  1. Requiste um token para sua origin
  2. Adicione o token em sua página, temos dois modos para prover esse recurso em qualquer página de sua versão de teste.
    1. Adicionando uma meta tag origin-trial no cabeçalho de sua aplicação
    2. Se você tiver acesso a configuração do seu servidor, você também pode prover um token em sua página adicionando a propriedade Origin-Trial em seu HTTP header.
    3. Se você quiser testar localmente também pode fazer o uso habilitando a flag #enable-experimental-web-platform-features acessando o endereço chrome://flags
Caso queira utilizar o token você pode essa será a página de requisição

Para esse tutorial vamos utilizar a flag do chrome, atualmente(maio 2019) estamos na versão 74 a previsão do uso definitivo desse recursos será na versão 78. Caso esteja lendo este post com a versão do Chrome 78 ou superior esse passo não será necessário. Mas para quem utiliza versão inferior a 78 vamos habilitar o recurso acessando o endereço chrome://flags:

Para facilitar nossa vida podemos pesquisar por “experimental web” para ir diretamente a flag. Após nossa flag habilitada precisamos reiniciar nosso Chrome para o recurso funcionar em nosso browser.

Agora que habilitamos a flag hora de testar o recurso, a badging API tem duas funções window.ExperimentalBadge.set() para definir o contador e window.ExperimentalBadge.clear() para limpar nosso contador.

Para os nossos testes vamos utilizar como base o projeto que estou desenvolvendo no mini curso de PWA que estou rodando no Youtube.

Inicialmente vamos adicionar dois botões em nossa página:

<button class="badingAPI__add">Add</button> <button class="badingAPI__clean">Clean</button>

Nosso JavaScript ficará da seguinte forma:

const addBadge = document.querySelector('.badingAPI__add'); const cleanBadge = document.querySelector('.badingAPI__clean'); let counterBadge = 0; let bagdeTimer; if (addBadge) { addBadge.addEventListener('click', () => { if (counterBadge === 0) { bagdeTimer = window.setInterval(() => { counterBadge += 1; window.ExperimentalBadge.set(counterBadge); console.log('counter'); }, 1000); } console.log('triggered'); }); if (cleanBadge) { cleanBadge.addEventListener('click', () => { counterBadge = 0; window.ExperimentalBadge.clear(); clearInterval(bagdeTimer); }); } }

No Código acima realizamos uma simulação da atualização das notificações com um setInterval(), quando o usuário clica no botão “add” inicializamos o contador, passamos como parâmetro um número dentro da função set, caso queiramos apenas exibir o balão sem um número, chamamos a função set sem passar nenhum parâmetro. Numa aplicação real atualizamos o contador quando temos uma mensagem não lida ou precisamos completar alguma tarefa.

No macOS podemos ver o contador de notificações funcionando

Para o botão clean, quando o usuário clicar no botão, zeramos o contador e removemos a execução do nosso timer com clearInterval, e para remover a badge do ícone chamamos a função: window.ExperimentalBadge.clear().

Esse recurso está em modo de teste mas em breve será incorporado sem o uso de flag no Chrome para acompanhar o status e conferir mais informações acesse: https://developers.google.com/web/updates/2018/12/badging-api

Esse material faz parte do curso de PWA que estou rodando em meu canal do Youtube, para acompanhar as aulas sigam meu canal ou acessem a página do curso: https://blog.fellyph.com.br/curso-online-progressive-web-apps/

Qualquer dúvida só deixar um comentário e até o próximo post!

Categorias
JavaScript Tutoriais

Web Share API – Level 2

Recentemente fiz um post sobre Web Share API, um dos motivos foi a inclusão de suporte pela plataforma iOS a API na última versão 12.2. Nesse post vamos abordar alguns updates que estarão presentes na versão 75 do Chrome.

Os recentes updates são relevantes para aplicações web progressivas ou PWAs. Em meu canal do Youtube comecei uma série sobre como construir uma PWA, esse post serve como conteúdo complementar, caso queira saber mais sobre PWA assine meu canal:

Voltando ao tópico do post, Web Share API level 2 irá facilitar compartilhamento de arquivos entre apps. Agora aplicações web conseguem compartilhar arquivos entre aplicações web definidas na API.

Web share Target API

Permite definir como uma aplicações disponíveis no card de compartilhamento, este recursos está apenas disponível para plataforma Android como podemos ver na imagem a seguir:

Para habilitar a API precisamos implementar informações extra em nosso manifest.json e preparar nossa PWA interagir com o conteúdo recebido pelo app. Web Share Target API pode ser assunto que podemos abordar com mais detalhes em outro post.

Novo método canShare()

No post anterior sobre Web Share API utilizamos o “navigator.share()” para verificar se temos suporte a API e compartilhar uma url específica. Mas quando se trata de compartilhar um arquivo é mais complicado, mas agora podemos verificar se o sistema operacional suporta o compartilhamento por arquivo com a função canShare():

const shareData = { files: filesArray }; if (navigator.canShare && navigator.canShare(shareData)) { // Compartilhe o conteúdo aqui } else { console.log('Seu sistema operacional não suporta compartilhamento de arquivos'); }

No código acima verificamos se o nosso browser tem suporte a função canShare e na sequência verificamos se o OS suporta compartilhamento de arquivos via Web apps. Agora que temos a verificação que podemos compartilhar nosso arquivo dentro da condicional invocamos nosso a função navigator.share

if (navigator.canShare && navigator.canShare( { files: filesArray } )) { navigator.share({ files: files, title: 'Título do card', text: 'descrição do conteúdo', }) .then(() => console.log('Conteúdo compartilhado com sucesso')) .catch((error) => console.log('Falha no compartilhamento', error)); } else { console.log('Seu sistema operacional não suporta compartilhamento de arquivos'); }

Dependendo da aplicação em que você compartilhe o conteúdo, o título e o texto de descrição pode ser exibido ou não. Exemplo aplicativos de email o título e texto serão exibidos. Já aplicações de edição de images essas informações serão irrelevantes.

Mais posts sobre Progressive web app confira a página da categoria ou deixe um comentário

Categorias
PWA - Progressive web apps

Media queries para Progressive Web Apps

Se você me segue no Twitter já viu que estou criando uma série sobre Progressive Web Apps, neste mini curso estou abordando os principais recursos na construção de um PWA. Para esse post vamos falar sobre um conteúdo complementar como adicionar um estilo específico através media queries para identificar uma PWA.

Se você ainda não ouviu falar sobre Progressive web apps ou aplicações web progressivas, PWA não é uma biblioteca ou framework, mas uma filosofia. Uma definição rápida seria o desenvolvimento de uma aplicação com uso de técnicas e recursos para proporcionar progressivamente uma melhor experiência para o usuário com foco em três pontos:

  • Confiabilidade
  • Velocidade
  • Engajamento

Quer saber mais acesse acompanhe a playlist do mini curso:

Também me siga no youtube para acompanhar mais vídeos

Voltando ao tema principal, quando construímos nossa PWA utilizamos o manifest.json, arquivo responsável por configurar nossa PWA, nome da aplicação(name e short_name), URL de inicialização(start_url), ícones(icons) e modo de exibição(display). O modo de exibição é o ponto chave deste tutorial e ele possui os seguintes modos:

  • fullscreen – como o nome sugere exibe em modo full screen sem nenhum elemento de interface do browser
  • standalone – Exibe como uma aplicação independente do browser, mas dependendo do sistema operacional podendo exibir alguns elementos de controle de navegação, por exemplo, iOS não exibe itens de navegação mas permite o controle de navegação através de gestos.
  • minimal-ui – Esse modo é exibido como uma aplicação independente mas forca a exibição de elementos de navegação
  • browser – Esse modo exibe como um browser convencional

Fullscreen e standalone

Agora que a gente teve uma introdução sobre os modos disponíveis, dois modos precisam de atenção especial fullscreen e standalone eles precisam prover uma navegação dentro da aplicação pois os elementos de navegação do browser são removidos, com isso o usuário pode ficar preso em sua aplicação e isso não é uma boa experiência.

Para isso podemos implementar media query para controlar a exibição controle de navegação ou apenas estilizar nossa aplicação. Atualmente temos um seletor para display-mode dentro de media queries, com isso podemos implementar media queries para diferentes modos, mas lembrando que a media query precisa seguir o parâmetro definido em seu manifest.json.

Media query para desktop e mobile

//media query para o modo de exibicao standalone presente tanto em mobile e desktop 
@media (display-mode: standalone) {
 
}

No código acima temos uma media query para o formato standalone, suportado por PWAs que rodam no desktop ou mobile, mas poderíamos utilizar um dos quatros padrões que vimos anteriores.

Um fato relevante neste momento até a versão 12.2 do iOS não temos suporte ao web app manifest em outras palavras iOS não utiliza o manifest.json, a definição de ícones e títulos para nossa PWA é feito através de meta tags dentro de nosso HTML, e elas apenas suportam o formato standalone.

Caso utilize um formato diferente de standalone precisamos ter duas media queries uma para android e outra para iOS

//media query para MacOS e iiOS
@media (display-mode: standalone) {
 
}

//media query para Android caso definido no manifest.json
@media (display-mode: fullscreen) {
 
}

Media query para iOS

Mas o código acima pode perder sua funcionalidade quando iOS começar a suportar web app manifest, mas caso queiramos ter uma estilização estritamente para iOS, por simples motivo cada sistema operacional tem seu guia de interface, por exemplo, Android geralmente exibe seus items de navegação na base da tela enquanto iOS exibe os elementos de navegação no topo da aplicação.

Com media query podemos incluir mais uma regra dentro de nosso media query o “@supports” com ele podemos realizar filtros através de features suportada pelo browser, por exemplo, suporte a display grid podemos utilizar o seguinte código:

@supports (display: grid) {
  div {
    display: grid;
  }
}

Agora que sabemos desse recurso como podemos implementar essa regra com PWA? Temos algumas features apenas suportada pelo iOS no caso temos “-webkit-overflow-scrolling” presente apenas no safari mobile. Com isso podemos da seguinte forma:

/* 
 - podemos utilizar display mode em: standalone, fullscreen, minimal-ui e browser
*/

@media (display-mode: standalone) {
  /*To das as pwas instaladas desktop e mobile */
}

@media (max-width: 576px) and (display-mode: standalone) {
  /* Filtro para pwas instalada apenas em dispositivos moveis */
  
  @supports (-webkit-overflow-scrolling: touch) {
    /* PWAs instaladas apenas no iOS */
  }
  
  @supports not (-webkit-overflow-scrolling: touch) {
    /* PWAs instaladas em dispositivos não iOS */
  }
}

Com o código acima cobrimos os principais casos para PWA, em breve estarei postando um vídeo sobre esse assunto para seguir o conteúdo dessa série confira os post sobre Progressive web apps. Caso tenha alguma dúvida só deixar um comentário.

Categorias
JavaScript

Web Share api

Web Share API permite o usuário compartilhar conteúdo através do card de compartilhamento nativo do sistema operacional em que está sendo executado, nos dispositivos Android esse suporte surgiu na versão 61 do Chrome em 2017, já para para iOS o suporte foi incluído no Safari em 2019 na versão 12.2 do iOS.

Para fazer a chamada no card nativo de compartilhamento chamamos a função navigator.share() em nosso browser, esse método faz parte da Web Share API, ele dá o controle ao usuário de como ele quer compartilhar esse conteúdo. Seu uso é baseado em Promise, o método aceito um objeto com as informações de título, texto de descrição e url como podemos ver no código abaixo:

if (navigator.share) { navigator.share({ title: 'Blog Fellyph Cintra', text: 'Como compartilhar conteúdo com web share API', url: 'https://blog.fellyph.com.br/', }) .then(() => console.log('Compartilhamento realizado com sucesso')) .catch((error) => console.log('Erro no compartilhamento', error)); }

No exemplo acima, inicialmente utilizamos uma condicional para verificar se o suporte a web share api existe, caso positivo definimos o conteúdo que será compartilhado e adicionamos um then para tomar uma ação caso o compartilhamento seja realizado com sucesso ou catch em caso de error.

Requisitos

Para invocar o card nativos precisamos de alguns requisitos:

  • A URL deve ser servida por HTTPS
  • O método share deve ser invocado por uma resposta do usuário, por exemplo, um evento de click. Você não pode chamar a share API em um evento de page load.
  • Você só pode compartilhar uma URL dentro do escopo da aplicação
  • Sempre verifique se o usuário tem suporte a essa feature antes de chamar o método

Resultado

No lado esquerdo temos o resultado no iOS e a versao Android no lado direito

Na imagem acima temos dois exemplos de como o card de compartilhamento será exibido no Android e iOS. Para a plataforma iOS o recurso está disponível para Chrome e Safari. Vamos finalizamos por aqui caso tenha alguma dúvida só deixar um comentário.