Blog fellyph cintra - Media Queries and PWA

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.

Como utilizar media query em uma Progressive web apps
Como utilizar media query em uma Progressive web apps

O que é uma progressive web apps?

Se você ainda não ouviu falar sobre Progressive web apps ou aplicações webs 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 minicurso:

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

Como configurar a exibição de uma progressive web app?

Voltando ao tema principal, quando construímos a nossa PWA utilizamos o manifest.json, arquivo responsável por configurar a 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

Como adicionar media query em diferentes formatos?

Como vimos anteriormente existem várias maneiras de exibir a nossa PWA, mas como podemos incluir condições no nosso CSS para saber quando estamos num formato especial para Progressive web apps ou no formato tradicional na Web?

Para isso fazemos o uso de media query para estilização do nosso conteúdo.

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 na aplicação, pois os elementos de navegação do browser são removidos.

Com isso o usuário pode ficar preso na 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 a nossa aplicação.

Atualmente temos um seletor para display-mode em media queries, com isso podemos implementar media queries para diferentes modos, mas lembrando que a media query precisa seguir o parâmetro definido no 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 a nossa PWA é feito por meta tags dentro do 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) {
 
}Code language: JavaScript (javascript)

Media query para iOS

Mas o código acima pode perder a 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 o seu guia de interface.

Por exemplo, Android geralmente exibe os seus itens 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 do nosso media query o “@supports” com ele podemos realizar filtros através de recursos suportada pelo navegador, por exemplo, suporte a display grid podemos utilizar o seguinte código:

@supports (display: grid) {
  div {
    display: grid;
  }
}Code language: CSS (css)

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 */
  }
}Code language: CSS (css)

Com o código acima cobrimos os principais casos para PWA, em breve estarei a postar 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.


Publicado

em

por

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *