O leão sofre desenvolvendo para Safari.

Como eu resolvi: navegação dentro do app sem abrir o Safari

Ou como dar comportamento “nativo” a um app standalone no iPhone

Estamos desenvolvendo um app standalone pra um grande cliente. Eles queriam um app pra usar com os funcionários de um projeto interno. Prazo: 3 dias! A melhor e mais segura opção foi utilizar um app standalone. Ou seja: um app feito em html com os metas corretos. Utilizamos Vuejs 2 pra ser o wrapper do frontend e Laravel 5.4 pro backend.

Aí tivemos um problema quando o app é utilizado no iPhone (tinha que ser…): ao clicar nos links pra navegar, ele abria o Safari ao invés de ficar dentro do container.

Como resolvemos: um pedaço mágico de javascript no App.vue (componente raiz do Vue):

if ((“standalone” in window.navigator) && window.navigator.standalone) {
var noddy, remotes = false;
  document.addEventListener(‘click’, function(event){
noddy = event.target;
  while(noddy.nodeName !== “A” && noddy.nodeName !== “HTML”){
noddy = noddy.parentNode;
}
  if(‘href’ in noddy && noddy.href.indexOf(‘http’) !== -1 &&   (noddy.href.indexOf(document.location.host) !== -1 || remotes)){
event.preventDefault();
document.location.href = noddy.href;
}
}, false);
}

Ai a navegação funcionou certinha.


Bônus: transição

Outro problema que acabou gerando era que as transições entre as views eram muito secas. Utilizamos então o recurso <transition> do Vue, envelopando o vue-router nela e adicionado umas linhas de CSS:

<div class="container app-content">
<transition name="fade">
<router-view></router-view>
</transition>
</div>

CSS:

.fade-enter-active, .fade-leave-active {
transition-property: opacity;
transition-duration: .25s;
}
.fade-enter-active {
transition-delay: .25s;
}
.fade-enter, .fade-leave-active {
opacity: 0
}

O resultado ficou razoável.

That’s it.


Curtiu? Ajudou? Dá like (ou aplausos, como chamam agora). Escrevi alguma coisa errada? Comenta aí!

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.