Oi Habr.
Testar a Web móvel é um pouco semelhante ao teste da Web da área de trabalho. Por um lado, esses são os mesmos HTML, CSS, JavaScript e outros encantos que estamos acostumados a ver. As mesmas áreas problemáticas e erros típicos. Por outro lado, existem diferenças.
Neste artigo, montei uma pequena lista de verificação dos recursos importantes para testar em um projeto da Web para dispositivos móveis. A lista não afirma estar completa; portanto, complete-a com seus parágrafos nos comentários. Eu ficarei feliz apenas. A única regra é que o item se aplique apenas à Web para dispositivos móveis e não à Web.
Gostaria de começar pelo fato de termos pelo menos duas maneiras de testar projetos da Web para dispositivos móveis. O primeiro é emular um navegador móvel usando o Chrome DevTools (ou outros navegadores em suas ferramentas de desenvolvedor, mas essa é uma maneira menos popular). O segundo é testar em um dispositivo real usando um navegador móvel real.
É possível verificar a maioria das funcionalidades sem um dispositivo, mas ainda não todas. Portanto, dividi as verificações em duas partes grandes - o que verificamos em um PC e o que apenas com um dispositivo móvel na mão.
Chrome DevTools
Portanto, como mencionado acima, o teste móvel pode ser realizado em um PC sem o uso de um dispositivo móvel. O navegador Chrome pode funcionar no modo móvel.
Modo móvel
Para mudar para o modo móvel para visualizar uma página da web, você deve abrir o Chrome DevTools e clicar neste símbolo:
Um aplicativo Web será aberto diante de nós como se estivesse aberto em um dispositivo móvel:
Podemos escolher o tipo de dispositivo da lista, o trabalho com o qual emulamos:
Agente do usuário
É importante lembrar que alguns aplicativos da Web, além do tamanho da tela, também são orientados ao
User Agent . Esse aplicativo no modo móvel pode diferir visualmente do que veremos em um dispositivo real.
Para fazer tudo certo, você precisa configurar adicionalmente as condições de rede no Chrome DevTools, configurando o Mobile User Agent:
Em seguida, recarregue a página e obtenha o resultado desejado.
Limitação da rede
Usando o Chrome, você pode testar o aplicativo na Internet lenta e completamente offline. Para fazer isso, na mesma guia Condições da rede, você pode selecionar o parâmetro de limitação da rede:
Isso é importante se os usuários costumam usar o aplicativo nas condições de Internet ruim, por exemplo, um navegador.
Isso não é tudo que o Chrome DevTools tem. Essa é uma ótima ferramenta para trabalhar com a Web para desktop e para a Web móvel. Existe uma excelente documentação do Google, é
claro em inglês .
Temos um curso on-line de duas semanas no Chrome DevTools em russo. Todas as informações na página de perfil. Seguindo em frente. :)
Testar a Web móvel com o Chrome DevTools tem várias vantagens. É simples, rápido, não requer dispositivos reais e permite identificar os bugs de aplicativos mais óbvios. Mas, infelizmente, nem todos.
Desempenho
A primeira razão pela qual você deve pegar um dispositivo móvel: a necessidade de testar o aplicativo em um dispositivo fraco.
Os aplicativos da web modernos estão sobrecarregados com todos os tipos de animações, cálculos complexos no lado do cliente e assim por diante. Se na área de trabalho tudo isso funcionar de maneira suave e bonita (embora nem sempre seja assim), algumas linhas J da Samsung (por exemplo, J2) podem ter defasagens.
Navegadores móveis
A segunda razão são os navegadores móveis. É sobre os navegadores que estão embutidos no sistema e são padrão. Muitas pessoas as usam e não se preocupam em instalar o Chrome para dispositivos móveis.
Um dos representantes desse navegador é o Samsung Internet Browser. Vale a pena verificar o funcionamento do seu aplicativo da web. Especialmente se não houver estatísticas mostrando "com o que seus usuários estão sentados". Se houver essas estatísticas e afirmar que ninguém visita o aplicativo a partir desses navegadores, provavelmente não será necessário testá-lo. Embora ... e se eles não entrarem porque está quebrado? :)
Vale a pena pensar.
Trabalho em segundo plano
O aplicativo da Web móvel funciona em um navegador móvel, o que é lógico. Ao mesmo tempo, os dispositivos móveis são organizados para que o aplicativo possa estar no modo ativo e em segundo plano. Por exemplo, se mudarmos para outro aplicativo ou recebermos uma chamada.
Agora, suponha que, por algum motivo, nosso usuário tenha movido o navegador com o aplicativo aberto para o segundo plano. E depois voltou. Aqui estão alguns exemplos do que pode estar errado. Por exemplo, temos um aplicativo de bate-papo e todo o histórico de correspondência é perdido. Agora é necessário recarregar a página. Mau? Claro! Ou temos um aplicativo para notebook. O usuário não teve tempo de adicionar algo quando foi interrompido por uma chamada. Voltando, ele descobriu que o que havia escrito foi apagado. Agora você tem que escrever tudo de novo. Ou talvez seja melhor não usar esse aplicativo?
Verifique como as principais funcionalidades do aplicativo funcionam após o segundo plano.
Teclado eletrônico
Na maioria das vezes, os usuários da Web móvel usam um teclado eletrônico para inserir texto. Acontece que, quando aparece, o layout do aplicativo é interrompido. Normalmente, esse problema está relacionado à forma como as proporções da tela são calculadas e como elas afetam esse layout.
Vale a pena prestar atenção especial às páginas do aplicativo em que o usuário precisa preencher muitos dados: a página de registro, alguns questionários e assim por diante.
Orientação da tela
Os aplicativos móveis têm dois tipos de orientação na tela: retrato e paisagem. Você pode ler sobre isso
aqui .
Se "colocarmos o dispositivo de lado", a maioria dos aplicativos móveis será "redesenhada" para as novas proporções da tela. Isso também se aplica a navegadores móveis. Nesse ponto, o layout do nosso aplicativo da web também pode ser interrompido nos locais mais imprevisíveis.
O Chrome DevTools pode emular os dois modos, mas ainda assim o processo de inverter e redesenhar ainda mais o aplicativo Web acontece de maneira diferente do que em um navegador móvel real.
Vale a pena conferir a maneira como nosso aplicativo cuidará do redesenho. E, de preferência, em ambas as direções: de retrato para paisagem e de paisagem para retrato.
Página da Web no aplicativo nativo
Outro caso comum: quando um aplicativo possui uma versão para Web móvel e um aplicativo nativo. Nesse caso, algumas páginas não são transferidas para o aplicativo nativo, mas simplesmente as exibem como um WebView.
O WebView é um componente que permite incorporar páginas da web em um aplicativo. O navegador embutido simplesmente renderiza dentro do aplicativo o que veríamos na Web para dispositivos móveis. Muitas vezes, isso economiza tempo ao desenvolver um aplicativo nativo.
Nesse caso, vale a pena verificar as alterações da Web móvel, não apenas no navegador, mas também dentro de aplicativos nativos. Obviamente, não há como ficar sem um dispositivo móvel.
Processamento de torneira
Diferentemente da Web da área de trabalho, onde há apenas um clique do mouse, em um aplicativo móvel, existem várias maneiras de interagir com a interface: toque, toque, toque e assim por diante. Há muitos lugares para ler sobre isso, por exemplo
aqui .
O Chrome DevTools pode emular algumas dessas ações. Mas, primeiro, nem todos. E, em segundo lugar, o resultado nem sempre é o mesmo durante a emulação e ao usar um dispositivo real.
Mesmo que seu aplicativo da web para celular não seja personalizado para ações especiais, ainda vale a pena verificar a interação da interface com pelo menos um toque. Especialmente lugares como menus ou algum tipo de comutador. A conclusão é que o toque não se enquadra em nenhuma coordenada específica. Atinge uma área inteira. Se seus controles estiverem próximos, o toque pode afetar vários elementos ao mesmo tempo e causar transtornos ao usuário.
Total
Falei sobre os principais recursos do teste de projetos da Web para dispositivos móveis. Se você vier testando o Desktop Web, é provável que essa lista seja útil. Obviamente, isso não é tudo o que poderia ser lembrado em relação a esse problema. Se você deseja complementar a lista, certifique-se de escrever nos comentários as verificações que você faz.
Obrigado pela atenção.