HTML5 오프라인 저장 원리 및 구현 코드 예-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 오프라인 저장 원리 및 구현 코드 예

黄舟

Mar 09, 2017 pm 03:49 PM

서문

HTML5를 사용하면 캐시 매니페스트 파일을 생성하여 웹 애플리케이션의 오프라인 버전을 쉽게 생성할 수 있습니다.

HTML5에는 인터넷 연결 없이 웹 애플리케이션을 캐시하고 액세스할 수 있는 애플리케이션 캐싱이 도입되었습니다. 앱 캐싱은 앱에 세 가지 이점을 제공합니다.

오프라인 검색 – 사용자가 오프라인일 때 앱을 사용할 수 있습니다.

속도 – 캐시된 리소스 로드 더욱 빨라짐

서버 부하 감소 – 브라우저는 서버에서 업데이트되거나 변경된 리소스만 다운로드합니다.

원칙과 환경

위에서 언급했듯이 HTML5의 오프라인 저장은 새로 생성된 .appcache 파일을 기반으로 하며, 이 파일 🎜>저장 리소스를 오프라인으로 저장하면 이러한 리소스가 쿠키처럼 저장됩니다. 나중에 네트워크가 오프라인일 때 브라우저는 오프라인에 저장된 데이터를 통해 페이지를 표시합니다. 解析清单

쿠키와 마찬가지로 HTML5 오프라인 저장에도 서버 환경이 필요합니다.

여기 간단한 도구인 간단한 iis 서버가 있습니다. 이를 프로젝트 업데이트 디렉터리에 넣고 두 번 클릭하여 실행하여 서버 환경을 시뮬레이션합니다. 링크: http://pan.baidu.com/s/1jG86UV0 비밀번호: ja9h

파싱 목록

시작하기 전에 이해해야 합니다

( 즉, manifest 파일) 위의 .appcache을 어떻게 작성하는지 살펴보겠습니다. 解析清单

매니페스트 파일은 캐시된 항목과 캐시되지 않은 항목을 브라우저에 알려주는 간단한 텍스트 파일입니다.
매니페스트 파일은 세 가지 섹션으로 나눌 수 있습니다.

CACHE MANIFEST - 이 제목 아래에 나열된 파일은 첫 번째 다운로드 후 캐시됩니다.

NETWORK - 이 제목 아래에 나열된 파일은 서버에 연결해야 하며 캐시되지 않습니다.

FALLBACK - 이 제목 아래에 나열된 파일은 다음 경우 페이지에 대한 연결이 필요합니다. 대체 페이지 액세스할 수 없음(예: 404 페이지)

온라인일 때 사용자 에이전트는 페이지를 방문할 때마다 매니페스트를 읽습니다. 변경 사항이 발견되면 매니페스트의 모든 리소스가 다시 로드됩니다.

CACHE MANIFEST

첫 번째 줄인 CACHE MANIFEST는 필수입니다.

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

위의 매니페스트 파일에는 CSS 파일, GIF 이미지, 그리고 자바스크립트 파일. 매니페스트 파일이 로드되면 브라우저는 웹 사이트의 루트 디렉터리에서 이 세 파일을 다운로드합니다. 그러면 사용자가 인터넷 연결을 끊을 때마다 이러한 리소스를 계속 사용할 수 있습니다.

NETWORK

와일드카드 "*"를 사용하면 화이트리스트의 공개 상태로 들어갑니다. 이 상태에서는 해당 캐시 영역에 표시되지 않는 모든 URL이 표시됩니다. 기본 HTTP 관련 캐시 헤더 정책에 의해 사용됩니다.

다음 NETWORK 섹션에서는 "login.asp" 파일이 캐시되지 않으며 오프라인에서 사용할 수 없다고 규정합니다.

NETWORK:
login.asp

별표 번호를 사용하여 다른 모든 리소스/파일에 인터넷 연결이 필요함을 나타낼 수 있습니다:

NETWORK:
login.asp

FALLBACK

아래 FALLBACK 하위 섹션에서는 인터넷 연결을 설정할 수 없는 경우 "offline.html"을 지정합니다. /html5/ 디렉터리 대신 사용됩니다. 모든 파일 위치:

ALLBACK:
/html5/ /404.html

참고: 첫 번째 URI는 리소스이고 두 번째 URI는 대체입니다.

캐시 업데이트

앱이 캐시되면 다음 때까지 캐시된 상태로 유지됩니다.

사용자가 브라우저 캐시를 지울 때
매니페스트 파일이 수정되었습니다
프로그램

데모

case/
  |-- index.html
  |
  |-- demo.appcache
  |
  |-- 简易IIS服务器.exe
  |
  `-- image
        |-- HTML5 오프라인 저장 원리 및 구현 코드 예
        `-- HTML5 오프라인 저장 원리 및 구현 코드 예

인덱스에 의해 애플리케이션 캐시가 업데이트되었습니다. html

<!DOCTYPE html>
<html lang="en" manifest="demo.appcache">
<head>
    <meta charset="UTF-8">
    <title>HTML5离线存储</title>
</head>
<body>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/194/8738ce7e829f74e47dc606c927eb8868-0.jpg?x-oss-process=image/resize,p_40"  class="lazy"   alt="">
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/194/8738ce7e829f74e47dc606c927eb8868-0.jpg?x-oss-process=image/resize,p_40"  class="lazy"   alt="">
</body>
</html>

demo.appcache

CACHE MANIFEST
#v01
image/HTML5 오프라인 저장 원리 및 구현 코드 예

NETWORK:
*

FALLBACK:
/

이미지 폴더 저장소

HTML5 오프라인 저장 원리 및 구현 코드 예

그럼 실행해 보세요

한번 해보세요. 简易IIS服务器.exe

iis가 켜진 경우

Alt text

iis가 꺼진 경우(꺼져 있으면 일시정지해도 효과가 표시되지 않음)

Alt text

오프라인에서는

가 성공적으로 표시되었으나, 图片1은 정상적으로 표시되지 않는 것을 볼 수 있습니다. 图片2

이제

과 图片2의 위치를 바꾸고 싶습니다.图片1

Html 부분을 교체

<body>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/194/b5c9ec777498e416b27e71d3c9351b87-4.png?x-oss-process=image/resize,p_40"  class="lazy"   alt="">
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/194/b5c9ec777498e416b27e71d3c9351b87-4.png?x-oss-process=image/resize,p_40"  class="lazy"   alt="">
</body>

이때 문제를 발견했는데, html 수정해야 합니다 왜 사진이 교체되지 않나요?

파일의 demo.appcache에 별표를 쓰지 않았나요? NETWORK 파일만 빼고 나머지는 모두 온라인 모드입니다. 정보를 확인한 결과 매니페스트를 소개하는 페이지가 캐시 목록에 포함되어 있지 않더라도 사용자 에이전트에 의해 계속 캐시된다는 것을 알게 되었습니다. CACHE MANIFEST

그럼

파일을 업데이트할 것이므로 .appcache 헤더의 버전 번호를 변경하겠습니다. 페이지를 새로고침했는데 여전히 응답이 없습니다! 다시 새로고침하세요. 바로 여기 있습니다! 왜? #v02

对于浏览器来说,manifest的加载是要晚于其他资源的. 这就导致check manifest的过程是滞后的.发现manifest改变.所有浏览器的实现都是紧随这做静默更新资源.以保证下次pv,应用到更新.

通过控制台我们能够窥探一二：

第一次刷新，应用程序缓存更新准备事件,
第二次刷新才会看到效果。

缓存立即执行

我们的产品已经更新了用户却要第二次进来才能够看到，这样用户体验也太差了吧，有什么方式能够解决呢？好在html5给javascript提供了相关的API。

API篇幅太多自行查看把，这里我晒下我测试成功的code：

 /*code1,简单粗暴的*/
    applicationCache.onupdateready = function(){
        applicationCache.swapCache();
        location.reload();
    };
    /*code2，缓存公用方法*/
    // var EventUtil = {
    //     addHandler: function(element, type, handler) {
    //         if (element.addEventListener) {
    //             element.addEventListener(type, handler, false);
    //         } else if (element.attachEvent) {
    //             element.attachEvent("on" + type, handler);
    //         } else {
    //             element["on" + type] = handler;
    //         }
    //     }
    // };
    // EventUtil.addHandler(applicationCache, "updateready", function() {      //缓存更新并已下载，要在下次进入页面生效
    //     applicationCache.update();  //检查缓存manifest文件是否更新，ps:页面加载默认检查一次。
    //     applicationCache.swapCache();  //交换到新的缓存项中，交换了要下次进入页面才生效
    //     location.reload();              //重新载入页面
    // });

code1一般用在页面加载时直接触发，而code2的方式可后期检查更新。

注意事项

站点离线存储的容量限制是5M
如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
引用manifest的html必须与manifest文件同源，在同一个域下
在manifest中使用的相对路径，相对参照物为manifest文件
CACHE MANIFEST字符串应在第一行，且必不可少
系统会自动缓存引用清单文件的 HTML 文件
manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
FALLBACK中的资源必须和manifest文件同源
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
当manifest文件发生改变时，资源请求本身也会触发更新

위 내용은 HTML5 오프라인 저장 원리 및 구현 코드 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML의 H5 태그는 무엇입니까?May 09, 2025 am 12:11 AM

HTML의 H5 태그는 작은 타이틀 또는 하위 타이틀을 태그하는 데 사용되는 5 레벨 타이틀입니다. 1) H5 태그는 컨텐츠 계층을 개선하고 가독성과 SEO를 개선하는 데 도움이됩니다. 2) CSS와 결합하여 스타일을 사용자 정의하여 시각적 효과를 향상시킬 수 있습니다. 3) 학대를 피하고 논리적 컨텐츠 구조를 보장하기 위해 H5 태그를 합리적으로 사용하십시오.

H5 코드 : 웹 구조에 대한 초보자 안내서May 08, 2025 am 12:15 AM

HTML5에서 웹 사이트를 구축하는 방법에는 다음이 포함됩니다. 1. 의미 태그를 사용하여 웹 페이지 구조를 정의하는 등; 2. 멀티미디어 컨텐츠, 사용 및 태그를 포함; 3. 양식 검증 및 로컬 스토리지와 같은 고급 기능을 적용하십시오. 이 단계를 통해 명확한 구조와 풍부한 기능을 갖춘 최신 웹 페이지를 만들 수 있습니다.

H5 코드 구조 : 가독성을위한 컨텐츠 구성May 07, 2025 am 12:06 AM

합리적인 H5 코드 구조를 사용하면 페이지가 많은 컨텐츠 중에서 눈에 띄게 나타납니다. 1) 구조를 명확하게하기 위해 컨텐츠를 구성하려면 시맨틱 레이블 등을 사용하십시오. 2) Flexbox 또는 그리드와 같은 CSS 레이아웃을 통해 다른 장치에 대한 페이지의 렌더링 효과를 제어하십시오. 3) 반응 형 디자인을 구현하여 페이지가 다른 화면 크기에 맞게 조정되도록하십시오.

H5 대 구형 HTML 버전 : 비교May 06, 2025 am 12:09 AM

HTML5 (H5)와 이전 버전의 HTML의 주요 차이점은 다음과 같습니다. 1) H5는 시맨틱 태그를 소개하고, 2) 멀티미디어 컨텐츠를 지원하며 3) 오프라인 스토리지 기능을 제공합니다. H5는 새로운 태그 및 API (예 : 및 태그)를 통해 웹 페이지의 기능과 표현성을 향상시켜 사용자 경험 및 SEO 효과를 향상 시키지만 호환성 문제에주의를 기울여야합니다.

H5 vs. HTML5 : 용어와 관계를 명확하게합니다May 05, 2025 am 12:02 AM

H5和HTML5的区别在于：1）HTML5是网页标准，定义结构和内容；2）H5是基于HTML5的移动网页应用，适用于快速开发和营销。

HTML5 기능 : H5의 핵심May 04, 2025 am 12:05 AM

HTML5의 핵심 기능에는 시맨틱 태그, 멀티미디어 지원, 양식 향상, 오프라인 스토리지 및 로컬 스토리지가 포함됩니다. 1. 코드 가독성 및 SEO 효과 향상과 같은 시맨틱 태그. 2. 멀티미디어 지원은 미디어 컨텐츠 및 태그를 포함하는 프로세스를 단순화합니다. 3. 양식 향상은 새로운 입력 유형 및 검증 특성을 도입하여 양식 개발을 단순화합니다. 4. 오프라인 스토리지 및 로컬 스토리지는 ApplicationCache 및 LocalStorage를 통해 웹 페이지 성능 및 사용자 경험을 향상시킵니다.

H5 : 최신 버전의 HTML 탐색May 03, 2025 am 12:14 AM

html5isamajorrevisionof thehtml thatrevolutions webdevelopments and capabilitiess.1) itenhancescodereadabilitys 및 and .2) html5enablestriCher, Interactive Experiences, Withoutplugs를 허용합니다

기본 이외 : H5 코드의 고급 기술May 02, 2025 am 12:03 AM

H5에 대한 고급 팁에는 다음이 포함됩니다. 1. 복잡한 그래픽 사용, 2. 웹 워크를 사용하여 성능 향상, 3. WebStorage, 4. 응답 디자인 구현, 5. WebRTC를 사용하여 실시간 커뮤니케이션을 달성하기 위해, 6. 성능 최적화 및 모범 사례를 수행하십시오. 이 팁은 개발자가보다 역동적이고 대화식 및 효율적인 웹 응용 프로그램을 구축 할 수 있도록 도와줍니다.

See all articles