의견 : 오늘날의 웹 애플리케이션은 이미 매우 복잡하며 현재 개발로 인해 점점 더 복잡해 지지만 치명적인 결함이 있으며 인터넷 링크와 분리 될 수 없습니다. 따라서 API가 HTML에 추가됩니다. 로컬 스토리지 메커니즘을 사용 하여이 문제를 잘 해결하고 오프라인 웹 응용 프로그램의 길을 닦습니다.
머리말
오늘날 웹 응용 프로그램은 이미 매우 복잡하며 현재 개발로 인해 점점 더 복잡해 지지만 치명적인 결함이 있으며 인터넷 링크와 분리 될 수 없습니다. 따라서 API가 HTML에 추가됩니다.
오프라인 웹 애플리케이션의 길을 열어주는 로컬 스토리지 메커니즘 으로이 문제를 잘 해결합니다.
브라우저 캐시의 로컬 캐시
로컬 캐시는 전체 웹 애플리케이션을 제공하는 데 사용됩니다.
브라우저 캐시에는 단일 웹 페이지 만 제공 </p> <p> 모든 웹 페이지에 웹 페이지 캐시가 있습니다.
로컬 캐시는 캐시에 지정한 페이지 만 캐시합니다 </p> <p> 웹 페이지 캐시 캐시는 웹 사이트에서 어떤 페이지와 리소스가 캐시되는지 알지 못하기 때문에 신뢰할 수없고 안전하지 않습니다.
로컬 캐시는 캐시 된 컨텐츠를 제어합니다
매니페스트 파일
웹 응용 프로그램의 로컬 캐시는 각 페이지의 매니페스트 파일을 통해 관리됩니다. Manifest는 캐시해야 할 파일의 이름과 경로를 캐시해야하고 매니페스트 형태로 캐시 할 필요가없는 간단한 텍스트입니다.
각 페이지 또는 전체 응용 프로그램에 매니페스트를 지정할 수 있습니다. 예를 들어 Hello.htm으로 설정했습니다.
캐시가 나타납니다
은닉처:
기타 .html
Hellow.js
이미지/myphoto.jpg
회로망:
notoffline.asp
*
폴백 :
online.js locale.js
은닉처:
Newhellow.html
Newhellow.js
Manifest 파일에서 첫 번째 줄은 브라우저에 텍스트 기능, 즉 로컬 캐시에 리소스 파일을 설정하려면 브라우저에 캐시 매니페스트 여야합니다.
실제로 오프라인 웹 애플리케이션을 실행할 때 서버가 MIME 유형 텍스트/캐시 관리를 지원할 수 있도록 서버를 구성해야합니다.
소스 파일을 지정할 때 리소스 파일은 캐시, 네트워크 및 폴백의 세 가지 범주로 나눌 수 있습니다.
페이지에 매니페스트 파일이 있으면 브라우저는 페이지를 로컬로 자동으로 캐시합니다 </p> <p> 네트워크 범주는 캐시되지 않은 명시 적 리소스 파일입니다. 이 파일은 서버 측 링크를 설정 하더라만 액세스 할 수 있습니다. 이 예에서 와일드 카드 문자 *는 기록되지 않은 문자가 캐시되지 않았 음을 나타냅니다. 첫 번째 리소스 파일은 온라인으로 액세스 할 때 사용할 수있는 리소스 파일이며 두 번째는 온라인으로 액세스 할 때 사용할 수없는 로컬 캐시 파일입니다.
브라우저 및 서버 상호 작용 프로세스
오프라인 웹 응용 프로그램으로 작업 할 때 브라우저와 서버 간의 상호 작용을 이해해야합니다.
예를 들어, index.htm이 홈페이지로 사용되면 홈페이지는 index.manifest를 사용합니다.
Cache Index.htm, hello.js, hello.jpg 파일의 첫 번째 액세스 프로세스는 다음과 같습니다.
브라우저 요청 URL
서버는 index.htm 홈페이지로 돌아갑니다
브라우저는 index.htm 웹 페이지를 구문 분석하고 페이지의 모든 리소스 파일을 요청합니다.
서버는 리소스 파일을 반환합니다
브라우저는 매니페스트 파일을 처리하고 매니페스트에 캐시 해야하는 파일을 요청합니다. 요청이 이루어 지더라도 다시 요청합니다.
서버는 캐시 해야하는 파일을 반환합니다.
브라우저는 로컬 캐시를 업데이트하고, 리소스 파일을 저장하고, 이벤트를 트리거하여 로컬 캐시에 업데이트를 알리도록 통지합니다 </p> <p> URL을 다시 열십시오.
URL을 요청하십시오
브라우저는 페이지가 캐시되었음을 발견하므로 로컬 캐시 파일을 사용합니다.
파일 파일
서버와 같은 브라우저는 매니페스트 파일을 요청합니다
서버는 304를 반환하여 매니페스트 파일이 변경되지 않았 음을 알립니다 (변경되면 다릅니다).
ApplicationCache 객체
이 객체는 로컬 캐시를 나타내며, 이는 로컬 캐시가 업데이트되었음을 알리고 로컬 캐시의 수동 업데이트를 허용하는 데 사용할 수 있습니다.
이전에는 브라우저가 로컬 캐시를 업데이트하고 새 리소스 파일을로드하면 ApplicationCache 객체의 업데이트 레디 이벤트가 트리거되어 수정 된 로컬 캐시에 알리고 사용자에게 페이지를 수동으로 새로 고치도록 촉구합니다.
스왑 캐시
SwapCache 방법은 로컬 캐시 업데이트를 수동으로 수행하는 데 사용됩니다. ApplicationCache 객체의 업데이트 레디 이벤트가 트리거 될 때만 호출 할 수 있습니다.
즉, 리소스 파일이 변경되면이 메소드를 사용하여 업데이트를 수동으로 캐시 할 수 있습니다.