Agrupamentos angulares de pré-carregamento quando a boa conectividade de rede é detectada

John Papa Segue 31 de maio · 4 min ler

Os usuários querem aplicativos rápidos. Colocar seus pacotes JavaScript em seu navegador o mais rápido possível e antes que o usuário precise deles pode ter um impacto enorme e positivo na experiência do usuário. Saber como você pode melhorar essa experiência é importante.

Uma forma de melhorar a experiência do usuário com seus aplicativos angulares é decidir estrategicamente quais pacotes serão pré-carregados. Você controla quando os pacotes são carregados e quais pacotes são carregados. É por isso que você deve explorar a possibilidade de escolher um modelo embutido ou criar sua própria estratégia personalizada de pré-carregamento Angular.

Nesta série, exploraremos algumas das suas opções para pré-carregar bundles angulares.

Aqui estão os artigos desta série:

Confira o post de Suguru Inatomi aqui para uma estratégia similar de pré-carregamento de rede .

Verificando uma boa conexão

A estratégia "ciente da rede" usa a API de informações de rede do navegador para detectar a conexão e a velocidade. Se a velocidade se qualificar como boa, então ela pré-carrega os pacotes configuráveis. Se não, deixa-os sozinho.

Você pode verificar a compatibilidade do navegador com a API de informações da rede aqui .

Você pode criar o NetworkAwarePreloadStrategy personalizado criando uma classe que implemente a interface PreloadingStrategy e forneça-a na raiz. Em seguida, você deve implementar a função de preloadpreload e retornar a função load() quando quiser informar ao Angular para pré-carregar a função.

Observe que a função de preloadpreload na classe NetworkAwarePreloadStrategy verifica a propriedade saveData do objeto navigator.connection primeiro. Alguns dispositivos móveis têm uma configuração para "proteção de dados". Quando isso está ativado, essa propriedade será true . Portanto, se o usuário decidiu salvar seus dados, eles o fizeram por opção e não devemos pré-carregar bundles (que consomem dados).

Em seguida, o código verifica se o effectiveType da conexão é uma das velocidades de conexão que você acha que são lentas demais para pré-carregar os bundles. O código abaixo decide que 2g e slow-2g não se qualificam para o pré-carregamento, mas 3g e melhor. Portanto, enquanto o saveData for true e a velocidade da conexão for 3g ou melhor, o bundle será pré-carregado.

 exportação declare var navigator; @Injectable ({providedIn: 'root'}) 
classe de exportação NetworkAwarePreloadStrategy implementa PreloadingStrategy {
preload (route: Route, load: () => Observável <any>): Observável <any> {
retornar this.hasGoodConnection ()? load (): EMPTY;
}
hasGoodConnection (): boolean {
const conn = navigator.connection;
if (conn) {
if (conn.saveData) {
retorna falso; // o modo de salvar dados está ativado, então não pré-carregue
}
const avoidTheseConnections = [
'slow-2g', '2g'
/ *, '3g', '4g' * /
];
const effectiveType = conn.effectiveType || '';
console.log (effectiveType);
if (avoidTheseConnections.includes (effectiveType)) {
retorna falso;
}
}
retorno verdadeiro;
}
}

Definindo a estratégia personalizada NetworkAwarePreload

Então, quando a criação de seu RouterModule , passar as opções do roteador, incluindo a preloadingStrategy ao forRoot() função.

 @NgModule ({ 
importações: [
RouterModule.forRoot (routes, {
preloadingStrategy: NetworkAwarePreloadStrategy
})
]
exportações: [RouterModule]
})
classe de exportação AppRoutingModule {}

Tente

Depois de aplicar essa estratégia, reconstrua e execute seu aplicativo com ng serve . Abra seu navegador, abra suas ferramentas de desenvolvedor e vá para http://localhost:4200 . Ao inspecionar a guia Rede no seu navegador, você provavelmente verá todos os seus pacotes já pré-carregados.

Em seguida, ative a aceleração para velocidades de 2g no navegador e atualize a página. Então as rotas não serão mais pré-carregadas.

Decidindo o que é certo para o seu aplicativo

Agora que você sabe como criar sua própria estratégia de pré-carregamento, como NetworkAwarePreloadStrategy , como avaliar se essa é a estratégia correta para seu aplicativo?

Se os cenários móveis e de largura de banda baixa / baixo de Wi-Fi forem prováveis para os usuários, isso pode ser uma estratégia de pré-carregamento benéfico. Você poderia conversar com seus usuários de negócios (os interessados em seu aplicativo) para descobrir isso, se não tiver certeza.

Você também pode combinar essa estratégia com uma das outras estratégias personalizadas.

No final, a decisão depende de você. Eu recomendo antes de escolher essas opções, ou qualquer estratégia de pré-carregamento, que você teste em várias velocidades de rede sob vários fluxos de trabalho de usuário válidos e comuns. Esses dados ajudarão você a decidir se essa é a estratégia certa para você ou se outra pode ser mais benéfica para os usuários do seu aplicativo.

Recursos

Originalmente publicado em johnpapa.net em 31 de maio de 2019.