Oi,

Limpar cache de um aplicativo da web da tela inicial

Dica rápida para algo que esqueci e passei horas fazendo. Talvez isso ajude outras pessoas. Eu me sinto um pouco estúpido por não ter feito isso antes.

Se você estiver criando um site responsivo e, em algum momento, adicioná-lo à sua tela inicial, poderá ter o mesmo problema que eu. É que você continua atualizando o site e quer verificar mais tarde como está indo, mas não consegue atualizar, porque você o está usando com:

Parece tão bonito, mas como você pode limpar o cache, excluir o aplicativo da web não funciona.

Conecte o telefone ao Mac.
Certifique-se de que seu telefone esteja configurado para Configurações-> Safar-> Avançado-> Inspetor da Web-> Ativado
Abra o aplicativo da web na tela inicial
No seu Mac OSX Safari, vá para a guia Develop-> Your iPhone-> Your Site
Pressione CMD + R no console. Isso deve atualizar o aplicativo da web e limpar o cache.

Barra de status branca com texto preto

Adicione isto à sua cabeça

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

No tempo de execução ou carga, adicione isso.

if(window.navigator.standalone) {
    $("meta[name='apple-mobile-web-app-status-bar-style']").remove();
    $('html').addClass('webapp');
}

Você pode querer adicionar a classe webapp também para saber quando ela está nessa visualização, pois você precisa adicionar pixels ao seu cabeçalho para não ficar atrás da barra de status.

Boilerplate Meta setup

Esta é uma configuração geral que usei e é bastante útil.

<meta name="apple-mobile-web-app-title" content="My App">

<!-- iOS 6 & 7 iPad (retina, portrait) -->
<link href="/static/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 & 7 iPad (retina, landscape) -->
<link href="/static/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 iPad (portrait) -->
<link href="/static/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iOS 6 iPad (landscape) -->
<link href="/static/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iOS 6 & 7 iPhone 5 -->
<link href="/static/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 & 7 iPhone (retina) -->
<link href="/static/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 iPhone -->
<link href="/static/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<link rel="apple-touch-icon" href="/static/images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/static/images/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/static/images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/static/images/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/static/images/touch/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/static/images/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/static/images/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/static/images/apple-touch-icon-152x152.png" />




<!-- Global tags -->

<meta charset="<?php bloginfo('charset'); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<link href="//www.google-analytics.com" rel="dns-prefetch">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


<!-- Mobile tags -->


<meta http-equiv="cleartype" content="on">

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">


<link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon" />

<meta name="msapplication-TileImage" content="/static/images/apple-touch-icon-144x144.png">
<meta name="msapplication-TileColor" content="#cccccc">

Gere ícones da apple rapidamente

Eu usei este site e tem sido muito bom.

http://iconifier.net/

Limpar cache de um aplicativo da web da tela inicial

Barra de status branca com texto preto

Boilerplate Meta setup

Gere ícones da apple rapidamente

Related Posts