Ionic com aparência de aplicação nativa

Desenvolvimentos recentes no mundo híbrido estão obscurecendo as linhas entre híbrido e nativo.

Agora você pode usar transições nativas e rolagem nativa, juntamente com uma estrutura rápida como o Ionic . Em muitos casos, é impossível distinguir entre híbrido e nativo, pois muitos aplicativos totalmente nativos usam WebViews.

O interessante é que os aplicativos híbridos estão melhorando a uma velocidade vertiginosa e nunca foi um momento melhor para estar nesse campo. Existem quatro coisas que podem melhorar drasticamente seus aplicativos e fazê-los parecer mais nativos. Vamos vê-los agora.

1. Transições nativas

Este é um divisor de águas total. Agora você pode usar transições de slides nativas em seus aplicativos híbridos, graças a este plug-in do Cordova.

As transições iônicas incorporadas funcionam muito bem, mas ocasionalmente podem ficar instáveis. As transições nativas funcionam perfeitamente todas as vezes e são tão suaves quanto a manteiga.

Para habilitá-los em seu aplicativo Ionic, você pode usar este plugin npm de Julien Renaux . Você deve seguir as instruções nessa página para instalar, mas aqui está uma rápida descrição.


npm install ionic-native-transitions –save


cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.4.2

(Se você não usar o npm, poderá fazer o download do arquivo javascript manualmente e vinculá-lo em index.html)

Em seguida, adicione ‘transições iônicas-nativas’ como uma dependência:

angular.module(‘yourApp’, [
‘ionic-native-transitions’
])

Em seguida, adicione ‘transições nativas’ aos seus links:


Next

Eu os adicionei aos links nos meus modelos de lista e no botão Voltar. Para o botão Voltar, você deseja que ele deslize na direção oposta, para poder usar uma opção embutida.

ocê também pode definir algumas opções padrão. Eu fiz algumas experiências, acho que estas são boas opções padrão em um aplicativo Ionic:


.config(function($ionicNativeTransitionsProvider){
$ionicNativeTransitionsProvider.setOptions({
“duration” : 300,
“androiddelay” : 100, // Longer delay better for older androids
// “fixedPixelsTop” : 64, // looks OK on iOS
});
})

A duração padrão de 400 é muito lenta; para corresponder a outras animações iônicas, deve ser em torno de 300. Os dispositivos Android mais antigos não lidam muito bem com a transição; portanto, é necessário adicionar um atraso maior para que a nova exibição seja atualizada. 100 funciona bem, embora eu tenha apenas alguns dispositivos Android para testar. Você pode usar fixedPixelsTop se não quiser que sua barra de ferramentas deslize. Na verdade, eu gosto mais disso na configuração padrão 0, porque as animações Ionic slide / fade padrão dos títulos das páginas não funcionam com transições nativas.

Também há transições para deslizar para cima e para baixo, uma gaveta, ondulação da página e muito mais. Eu posso ver a maioria das animações javascript do Ionic sendo substituídas por animações nativas, mas pode demorar um pouco até que isso aconteça.

Existem outras opções que você pode explorar na documentação do plugin .

2. Rolagem nativa

Remova instantaneamente o jank scroll.

O Ionic usa a rolagem javascript por padrão, que tende a ficar instável. Se houver muitas imagens, você poderá ver os principais problemas, especialmente no Android.

Para corrigir isso, você pode ativar a rolagem nativa. Ele pode ser ativado globalmente assim:


.config(function($ionicConfigProvider) {
$ionicConfigProvider.scrolling.jsScrolling(false);

// Or for only a single platform, use
// if( ionic.Platform.isAndroid() ) {
// $ionicConfigProvider.scrolling.jsScrolling(false);
// }
}

Você também pode habilitá-lo em uma única exibição adicionando overflow-scroll = ‘true’ na sua tag de conteúdo de íons.

Conforme declarado na postagem do blog , isso tem alguns problemas no iOS. Eles parecem ter corrigido a maioria dos bugs pelo menos no iOS9, tudo funciona incluindo puxar para atualizar e rolagem infinita.

3. Armazenamento em Cache

O Ionic oferece algum cache padrão, mas se você estiver obtendo conteúdo por meio de uma API, precisará de algo mais.

Digamos que um usuário do aplicativo visualize um artigo, feche o aplicativo e depois volte ao mesmo artigo. Não há razão para fazer outra solicitação HTTP para obter o artigo pela segunda vez, se for apenas conteúdo estático. Em vez disso, armazenamos em cache o artigo no armazenamento, para que, sempre que for visualizado novamente, esteja disponível instantaneamente.

O localStorage nu funciona muito bem até que você precise armazenar e recuperar um grande número de artigos, é aí que entra o cache angular . O cache angular é uma boa biblioteca que facilita o armazenamento e a recuperação de muitos objetos em uma variedade de objetos diferentes. maneiras.

Para instalar, use:

bower install –save angular-cache

ou

npm install –save angular-cache

Adicione-o como uma dependência:


angular.module(‘myApp’, [‘angular-cache’])

Então você pode usá-lo assim:


.controller(‘Posts’, function (CacheFactory) {

if (!CacheFactory.get(‘postCache’)) {
CacheFactory.createCache(‘postCache’);
}
var postCache = CacheFactory.get(‘postCache’);

// Cache a post
postCache.put(id, data);

// Delete from cache
postCache.remove(id);

// Get a post
$scope.post = postCache.get(id);

})

Agora, apenas verificamos se a postagem existe no cache quando um usuário carrega a página; se existir, não precisamos de outra solicitação HTTP.

Para quebrar o cache, podemos adicionar pull para atualizar. Também é possível definir uma expiração em nosso cache, o que pode ser útil para alguns aplicativos.

Existem muitas outras ótimas opções em sua documentação .

4. Crosswalk WebView

O Crosswalk WebView permite um desempenho muito melhor nos aplicativos Android, substituindo o WebView nativo.

A única desvantagem que vi até agora é que ela aumenta o tamanho do aplicativo (adiciona cerca de 20 MB). Se isso não é um problema para você, definitivamente vale a pena usá-lo.

Para instalar:

cordova plugin add cordova-plugin-crosswalk-webview

0 Reviews

Write a Review

Rodrigo Rangel

Read Next

Afinal, o que API

Leave a Reply

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

WhatsApp chat