Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

tony_lu

Application Cache html5

Por , em Desenvolvimento frontend

Recommended Posts

tony_lu    1

tony_lu
Postado

Ola pessoal, estou criando um aplicativo em html5, e quando o dispositivo ficar offline eu quero que ao invés de dar erro de conexão, o usuario seja direcionado para uma pagina especifica, tipo offline.html. 

 

Tentei usar o Application Cache, vi em alguns tutoriais (ex: https://diveintohtml5.com.br/offline.html)  mas não esta funcionando, eu fiz dessa forma:


index.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html manifest="cache.appcache">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<h1>ISSO É UM TESTE</h1>
</body>
</html>

offline.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" manifest="example.appcache">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<h1>ESTOU OFFLINE</h1>
</body>
</html>

.htacess 

AddType text/cache-manifest .appcache

cache.appcache 

CACHE MANIFEST
/index.html

FALLBACK:
/ /offline.html

NETWORK:
*

Então resumindo eu criei uma pagina index.html chamando o cache.manifest, o arquivo .htacess conforme solicitado, e a pagina offline que eu gostaria que aparecesse em caso do usuario ficar sem conexão mas enfim não funcionou, alguem pode me ajudar?!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vinicius Cainelli    17

Vinicius Cainelli
Postado

Experimenta remover essas barras:
  

CACHE MANIFEST
# v1 2017-03-09

# This is another comment
index.html
style.css
image1.png

# Use from network if available
NETWORK:
network.html

# Fallback content
FALLBACK:
/ fallback.html



Importante também dizer, é que o application cache está depreciado.
 

Compartilhar este post

Link para o post
Compartilhar em outros sites

tony_lu    1

tony_lu
Postado

Ola Vinicius, assim funcionou o cache:

 

CACHE MANIFEST
# v1 2017-03-09

# This is another comment
index.html

# Use from network if available
NETWORK:
network.html

# Fallback content
FALLBACK:
/ offline.html 

CACHE MANIFEST
# v1 2017-03-09

# This is another comment
index.html

# Use from network if available
NETWORK:
network.html

# Fallback content
FALLBACK:
/ offline.html

mas ainda não consegui fazer funcionar de ir para a pagina offline, sem a conexão, você sabe como posso fazer?

 

Por estar depreciado, sabe se tem problema de mesmo assim eu utilizar? Conhece algum outro recurso semelhante ao   application cache  ??

 

Lembrando que eu preciso de uma solução para navegação em android e ios

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Muda pouca coisa na pratica.

 

As vezes um termo mais feliz para buscar pode ser a nova BuzzWord 'PWA'

 

https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa?hl=pt-br

https://developer.mozilla.org/pt-BR/docs/Web/API/Service_Worker_API/Using_Service_Workers

 

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html

 

https://jakearchibald.github.io/isserviceworkerready/

 

Já testou no iPhone?

 

Qual código você testou?

 

Eu só tenho Android se não te ajudava :pensive:

Compartilhar este post

Link para o post
Compartilhar em outros sites

tony_lu    1

tony_lu
Postado

Gabriel estou com o mesmo problema não tenho o iphone para testar rsrs! Se tiver uma boa alma aqui neste forum que puder testar no iphone e nos falar eu agradeço muito!!!!!!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • Claudia França
      Não mostrar link na barra de enderço ao carregar página.
      Por Claudia França
      Pessoal tudo bem ?
      Tenho o codigo e, preciso que quando um usuário clicar no link  e a nova página carregar, não mostre o que tem na url, mas o conteudo. 
      Pensei em um Js para criar essa máscara mas, até agora não deu certo com as funções que fiz. 
       
            <div id='50' class="tab_content-pag-bnt2">         <div class="bnt-area">              <a href="https://meudomínio.net/drive/s/bK7Xq8hW6kDWXYAdUaMUf26hZabh9T" target="_blank"  class="new-serverbtn-link" > <div class="new-serverbtn"> <div class="new-serverbtn-text">Acessar pasta de episódios</div> <div class="new-serverbtn-icon"><i class="fas fa-chevron-right"></i></div> </div> </a>
    • ro1961santana2009
      Estou implementando um sistema e preciso de ajuda...
      Por ro1961santana2009
      Estou precisando de ajuda. Está seguindo os arquivos em anexo. Tem como centralizar uma (MSG global), do PHP que vem da MODELS, que vai ser apresentada na VIEW.

      Estou Implementando o meu sistema com base no sistema do curso, ao modificar o layout da página de acesso estou enfrentando este problema de centralizar a mensagem que vem da MODELS, para a VIEW.



    • Manoel Cicero
      porque html5 funciona bem no computador, mas no smartphone não?
      Por Manoel Cicero
      bom, estou utilizando um programa que transforma ppt em html5. coloco o arquivo gerado em minha hospedagem, testo, funciona perfeitamente no pc ou notebook, até aí tudo bem!
      mas quando testo no smartphone ai complica!
      o desenvolvedor me indicou limpar o cache, mas, mesmo assim não funciona e o pior de tudo é que, se isso não funcionasse apenas no meu smartphone não seria problema. o problema é que ja testei em alguns outros e o problema se mantem. alguem poderia me ajudar?
      link de teste: http://www.biodidata.com.br/teste/revis.html
      no PC - tudo ok!
      No smartphone --> na imagem que surgir vá em "click para iniciar", em seguida clique na pergunta 2 - a página para!
      limpar o cache não funciona e não queria alterar qualquer coisa no smartphone porque não seria legal para o meu publico fazer alterações no seu celular só pra ver uma coisa que disponibilizo.
      agradeço!
    • Juan Carlos PT
      [AJUDA] ALGUÉM SABE COMO FAZER UM CÓDIGO HTML5 PARA VÍDEOS DE SITES QUE NÃO MOSTRAM O FORMATO?
      Por Juan Carlos PT
      Olá, eu quero poder pegar um vídeo do meu canal na Nimo TV e deixar ele em sites parceiros para fortalecer a minha divulgação. Só que não consigo capturar o código <video></video> do html5 do site na Nimo TV. Eles não mostram o formato do vídeo:
       

      Se alguém souber me ajudar, terei enorme gratidão!
       
      OBS: Perdão se alguém postou algo parecido aqui no site, não vi!

    • danicarla
      Versão para impressão
      Por danicarla
      Olá pessoas,

      Estou tentando fazer uma versão de impressão usando CSS eu queria colocar um cabeçalho e um rodapé em todas as paginas,  O problema é que o conteúdo vem do banco de dados,  e dependendo do tamanho dos parágrafos em algumas vezes o texto acaba ficando em cima do cabeçalho ou do rodapé.. alguém tem alguma idéia de como posso fazer isso?
       
      Meu cód está assim:
       
      header {font-family:Arial;font-size: 22px;color: #000;text-align: center;} footer {font-family:Arial;font-size: 10px; color: #CD090C;text-align: center;} article {font-family:Arial;font-size: 14px; color: #000;text-align: justify;} @page {size: A4;margin: 11mm 17mm 17mm 17mm;} @media print { header {position: fixed;top: 0;} footer {position: fixed;bottom: 0;} article {position: relative;top:40px;} .content-block, p {top:40px;page-break-inside: avoid;} html, body {width: 210mm;height: 297mm;} } E no HTML
       
      <header>CABEÇALHO</header> <article>Conteudo.. texto.. etc..</article> <footer>Texto do Rodapé</footer>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito