오프라인 상태에서 브라우저가 캐시 된 이미지를로드합니까?

저는 AngularJS를 사용하고 있으며 SPA를 개발 중입니다. 내 목표는 오프라인으로 제공하는 것이 었습니다. JSON 데이터는 js 변수에 쉽게 저장 될 수 있으며 이미지는 Image 객체에 캐시 될 수 있습니다.오프라인 상태에서 브라우저가 캐시 된 이미지를로드합니까?

이제 한 사람이 오프라인으로 이동하여 콘텐츠를 탐색하려고하면 어떻게 될까요?

1) 오프라인되고, 그것은 이미지 (하나의 캐시 또는 온라인 것)

2의 가장 최근의 버전을 확인할 수 없기 때문에 브라우저가 이미지를로드 할 수 있음) 브라우저는 캐시의 이미지에 대한 참조를 찾습니다. 브라우저가 최신 버전의 온라인 이미지를 확인할 수없는 경우에도 캐시 된 이미지가로드됩니다.

참고 :이 질문은 중복되는 것이 아닙니다.

각도를 사용하고 있다는 사실은 문제가되지 않습니다. 다른 사람들이 다른 프레임 워크를 사용하고 일반적인 해결책을 찾고있을 것입니다.

둘째로, 이러한 대답은 HTML5 및 서비스 근로자를 사용한다고 지적합니다. AngularJS와 관련이없는 것들.

출처

2016-06-06 FrancescoN

우선 사용자가 오프라인 상태 (연결되지 않은 상태) 인 경우 앱을 서버에서로드하는 방법은 무엇입니까? – niksofteng

이 이야기의 시작 부분은 사용자가 온라인 상태이며 내용을 오프라인으로 탐색 할 필요가 있다는 것입니다. 따라서 앱과 데이터를 다운로드하는 데 약간의 시간이 걸립니다. 각 페이지 (무한 스크롤)에 대한 json은 약 15kb이며 이미지는 100kb입니다. – FrancescoN

내가 아는 대부분의 브라우저는 오프라인 상태이거나 "인터넷에 연결되어 있지 않다"라고 말합니다 (iOS에서 비행기 모드를 켜고 빠른 데모를 위해 페이지를 새로 고침). 브라우저에 "캐시"가 아니고 실제로 저장된 페이지 인 모든 콘텐츠를 실제로 다운로드하는 특정 "오프라인 모드"가없는 한 실제 저장 한 페이지 – Krease

불만족스러운,하지만 정직한 대답은 "이 달려있다"입니다. AppCache 또는 ServiceWorker에서 이미지를 나열하여 특정 지침을 사용하지 않으면 브라우저 캐시에 이미지가 표시되거나 표시되지 않을 수 있습니다. 이전 버전의 브라우저에서는 오프라인으로 파일을 열었을 때 HTML 문서와 내용이 표시되었지만 언급 한 것과 같은 기능을 가진 브라우저는 오프라인 상태임을 나타내 더 적극적으로 페이지를 전혀 표시하지 않습니다. 그 이유는 브라우저 제작자가 좋은 경험을 보장 할 수 없기 때문에 이미지를 표시하거나 표시하지 않을 수있는 문서를 표시하는 대신 "오프라인입니다"라는 메시지가 표시되기 때문입니다.

브라우저에 이미지를 오랫동안 캐시하도록 지시 할 수 있습니다. 이럴 경우 표시되는 가능성이 높아집니다. 그러나 AppCache에서 지정하지 않으면 브라우저가 최신 버전을 찾지 못하게하는 명확한 방법은 없습니다 또는 ServiceWorker.

출처

2016-06-15 11:29:10 user30934

클라이언트가 인터넷에 연결되어 있지 않을 때 (오프라인) 사이트 캐싱 기능을 유지하기위한 적절한 대체 방법이 브라우저 캐싱이 아닙니다. 오프라인 사용자에게 자산을 사용할 수 있도록 할 수있는 여러 가지 방법이 있습니다 Makes Angular JS works offline

은 한 번보세요.

출처

2016-06-06 15:26:11

알렉스 존슨의 대답과 함께, Service Workers API을 확인해야 할 것입니다. 이 기술에 대한 좋은 설명이 this Github repo입니다. 또한 아키텍처를 통해 즐거운 오프라인 환경을 지원할 수 있습니다.

출처

2016-06-06 15:28:07

더하기! 공유해 주셔서 감사합니다. 서비스 종사자는 여전히 "실험 기술"로 간주되지만 확실히 조사 할 가치가 있습니다. –

이미지를 base64 인코딩하는 것이 좋습니다. 기본적으로 이미지는 문자열로 바뀝니다. Base64 문자열은 이미지 소스로 사용할 수 있습니다. 이 문자열을 localStorage에 저장하고 오프라인 일 때 읽을 수 있습니다. 이 코드 밖으로

확인 :

<img src="#" class="myImage" /> 
 

 
    <style type="text/css"> 
 
     .myImage { 
 
     content: url('data:image/gif;base64,R0lGODlhEAAQALMPAAAAAIAAAACAAICAAAAAgIAAgACAgMDAwICAgP8AAAD/AP//AAAA//8A/wD//////yH5BAEAAA8ALAAAAAAQABAAQAQ78EkJqp10LaB759sDVh4ZiqVVTqC3om6smVvcAmz74Zioz7zMRmfC/WTAGXI0Ws5gtc+HhXz2fJagJAIAOw=='); 
 
    } 
 
    
 
    </style>

출처

2016-06-06 15:28:30 nixkuroi

좋아, 답변을 읽은 후, 가장 유용한 @Alexjohnson 응답의 조각이었다. 는 "304 안 수정"HTTP 코드를 가지고 서버와 통신에 여전히 필요하기 때문에

네이티브 "오래된"캐싱, 여기에 작동하지 않습니다 Makes Angular JS works offline은 브라우저 캐싱에 대해 뭔가를 말한다.

그러나 나는 this technique을 시도했으며 이상하게 작동합니다. 얘들 아 너 혼자 힘으로 시도해 보라. 이미지가 미리로드 된 후에 오프라인으로 이동하면 이미지가 표시된다. 그리고 다른 요소를 웹 이미지에 대한 참조와 함께 추가하면이 요소가로드되지 않습니다.

페이지를 새로 고침하면 캐시 된 이미지가 표시됩니다.

이 점에 대해 어떻게 생각하십니까? 여기

은 예입니다

<html> 
    <head> 
    </head> 

    <body> 
     <script type="text/javascript"> 
      var my_image1 = new Image(); 
      var my_image2 = new Image(); 
      var images = 2, count_images = 0; 

      // notify the user that the image has been preloaded, and reveal the 
      // button to use the preloaded image 
      function notify() 
      { 
       count_images++; 
       if (count_images == images) { 
        document.getElementById('preloadbutton2').style.display = 'none'; 
        document.getElementById('after_preload').style.display = 'block'; 
       } 
       console.log('finito');  
      } 

      function preload() 
      { 
       my_image1.onload = notify; 
       my_image2.onload = notify; 

       my_image1.src = 'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/47351a35419617.56f6327af207a.gif'; 
       my_image2.src = 'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/2150fb35419617.56f6327b44e47.gif'; 
      } 

      // using only the file name, we can take advantage of the preloaded image 
      function use_preloaded_image() 
      { 
       document.getElementById('offline_1').src = my_image1.src; 
       document.getElementById('offline_2').src = my_image2.src; 
      } 
     </script> 


     <!-- INSTRUCTIONS 

      OPEN THIS FILE IN THE BROWSER WITH ONLINE NETWORK, CLICK ON THE BOTTON TO PUT IMAGES IN CACHE 
      GO OFFLINE AND REALOAD THE PAGE (INSPECT ID DOF THE IMAGES: IMAGES FRO MTHE WEB WON'T BE LOADED, THE ONES CACHED WILL BE SHOWED) 
      RELOAD THE PAGE: AS BEFORE, IMAGES FROM CACHE ARE STILL THERE, THEY'RE VISIBLE 
     --> 



     <!-- IMAGES FROM THE WEB --> 

     <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/5aa12735419617.56f6327ab4f72.gif" width="500px" /> 
     <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/74f16635419617.56f6327adcf75.gif" width="500px" /> 

     <br/> 


     <!-- IMGES PUT IN CACHE ON BUTTON CLICK --> 

     <input type="button" 
      id="preloadbutton2" 
      value="Preload Image" 
      onclick="preload();this.value='Loading. Please wait...'" /> 

     <div id="after_preload" style="display: none"> 
      <input type="button" value="Use Preloaded Image" 
      onclick="use_preloaded_image()" /><br /> 
      <img src="" id="offline_1" width="500px" /> 
      <img src="" id="offline_2" width="500px" /> 

     </div> 

    </body> 
</html>

출처

2016-06-07 11:12:51 FrancescoN

오프라인 상태에서 브라우저가 캐시 된 이미지를로드합니까?

답변

관련 문제