html5는 오프라인 애플리케이션을 지원합니다. 오프라인 애플리케이션은 로컬 캐싱 메커니즘을 사용하여 사용자가 네트워크 없이 웹 페이지나 애플리케이션을 계속 사용할 수 있는 HTML5의 새로운 기능입니다. 오프라인 상태에서 웹 애플리케이션이 정상적으로 작동하기 위해서는 HTML 파일, CSS 파일, JavaScript 스크립트 파일 등 웹 애플리케이션을 구성하는 모든 리소스 파일을 로컬 캐시에 배치하여 서버가 연결되지 않을 때 네트워크 로컬 캐시의 리소스 파일을 사용하여 응용 프로그램을 정상적으로 실행할 수도 있습니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.
HTML5에는 로컬 캐싱 메커니즘을 사용하여 오프라인 애플리케이션을 추가하여 네트워크가 없을 때에도 웹 페이지나 애플리케이션을 사용할 수 있습니다. 클라이언트가 웹 애플리케이션의 서버와 로컬로 연결되어 있지 않은 경우 클라이언트에서 로컬로 웹 애플리케이션을 사용하여 관련 작업을 정상적으로 수행할 수 있습니다.
웹 애플리케이션이 오프라인 상태에서도 제대로 작동하려면 HTML 파일, CSS 파일, JavaScript 스크립트 파일 등 웹 애플리케이션을 구성하는 모든 리소스 파일을 서버가 없을 때 로컬 캐시에 배치해야 합니다. 네트워크에 연결됨 연결되면 로컬 캐시에 있는 리소스 파일을 활용하여 웹 애플리케이션을 정상적으로 실행할 수도 있습니다.
오프라인 애플리케이션을 사용하려면 다음 단계가 필요합니다.
오프라인 감지(인터넷 연결 여부 확인)
특정 리소스에 액세스
데이터 저장을 위한 로컬 공간이 있습니다(방해하지 않음) 온라인 여부에 관계없이 읽고 쓰기)
HTML5 오프라인 웹 애플리케이션 사용
1. 브라우저 지원 확인 방법
if(window.applicationCache){
//浏览器支持离线应用
}2 설명 파일은 나열하는 데 사용됩니다. 캐시해야 하는 리소스와 오프라인에서 사용하기 위해 리소스를 캐시할 필요가 없는 리소스입니다. 설명 파일의 확장자는 .manifest였지만 이제는 .appcache 사용을 권장하며, 설명 파일은 올바른 MIME 유형, 즉 "text/cache-manifest"로 구성되어야 합니다. 웹 서버에서 구성해야 합니다(파일 인코딩은 UTF -8이어야 함). 서버마다 구성 방법이 다르므로 여기서는 자세히 설명하지 않습니다.
첫 번째 줄은 다음 문자열로 시작해야 합니다
CACHE MANIFEST
나머지는 캐시할 파일의 URL입니다(상대 URL은 파일이 아니라 매니페스트 파일에 상대적입니다)
#以“#”开头的是注释
common.css
common.js이 파일에 있는 모든 내용 나열된 파일은 캐시됩니다. 매니페스트에서 헤더 정보 뒤의 특수 영역 헤더를 사용하여 매니페스트 항목 유형을 식별할 수 있습니다. 위의 가장 간단한 캐시는 "CACHE:" 영역에 속합니다.
이렇게 #该头信息之后的内容需要缓存 CACHE:
common.css
connom.js
"NETWORK:"로 시작하는 영역에 나열된 파일은 항상 온라인에서 얻어지며 캐시되지 않습니다.
NETWORK: 헤더 정보는 와일드카드 문자 "*"를 지원합니다. 나열된 것입니다 네트워크를 통해 로드됩니다 #该头信息之后的内容不需要缓存，总是从线上获取
NETWORK:
a.css
#表示以name开头的资源都不要缓存
name/
FALLBACK:
name/ example.html목록에는 여러 영역이 있을 수 있으며 위치에는 제한이 없습니다. 3. 오프라인 애플리케이션 구축 CSS, js 및 html이 포함된 단일 페이지 애플리케이션을 구축하는 동시에 이 단일 페이지 애플리케이션에 오프라인 지원을 추가한다고 가정해 보겠습니다.
설명 파일을 페이지와 연결하려면 html 태그의 매니페스트 속성을 사용하여 설명 파일의 경로를 지정해야 합니다.
<html manifest='./offline.appcche'>
오프라인 애플리케이션 개발의 첫 번째 단계는 장치가 오프라인인지 감지하는 것입니다
HTML5에는 새로운 navigator.onLine 속성이 있습니다.
이 속성이 true이면 온라인을 의미하고, false이면 오프라인을 의미합니다.if(navigator.onLine){ //联网 }else{ //离线 }
** 참고: IE6 이상 브라우저와 기타 표준 브라우저는 이를 지원합니다. attribute**
- 이 이벤트는 네트워크가 오프라인에서 온라인으로 변경될 때 발생합니다. 이 이벤트는 새로 고침 없이 창에서 발생합니다.
window.online = function(){ //需要触发的事件 }
offline 이벤트(지원됨) IE9+ 브라우저)
온라인에서 네트워크가 변경될 때 이 이벤트는 오프라인일 때 발생합니다. 온라인 이벤트와 마찬가지로 이 이벤트는 새로 고침 없이 창에서 발생합니다.window.offline = function(){ //需要触发的事件 }
애플리케이션 캐시 애플리케이션 캐시는 브라우저와 분리된 캐시입니다. 캐시 영역(크기는 특정 브라우저에 따라 다름, 일반적으로 5M)
애플리케이션 캐시와 웹 페이지 캐시의 차이점:
애플리케이션 캐시는 전체 웹 애플리케이션을 제공하고 웹 페이지 캐시는 단일 웹 페이지를 제공합니다The 애플리케이션 캐시는 지정된 페이지만 캐시합니다. 필요한 지정된 리소스(수동으로 제어 가능), 모든 웹 페이지에는 웹 페이지 캐시가 있습니다(브라우저 기본 동작)- 브라우저 캐시가 지워져도 애플리케이션 캐시는 사라지지 않습니다.
- 애플리케이션 캐시 웹 페이지 캐시와는 다르며 오래된 데이터는 최신 새 데이터로 대체됩니다
- 애플리케이션 캐시는 오프라인으로 액세스할 수 있지만 웹 캐시는 온라인으로 액세스해야 합니다
- 애플리케이션 캐시는 안정적이고 제어 가능하지만 웹 캐시는 제어할 수 없습니다.
- 애플리케이션 캐시의 장점
-
- 离线浏览
- 速度更快--已缓存资源加载更快
- 减少负载--浏览器只从服务器下载更新过的文件
一个web应用首次下载并缓存之后，任何加载请求都优先来自于缓存，因此可以实现离线缓存。如果不需要使用离线缓存了，就需要在服务器端删除描述文件，或者删除HTML页面中的manifest属性。
一旦应用被缓存，则缓存始终不变。那么，怎样才能改变缓存
- 用户清空应用缓存
- manifest文件被修改
- 使用update()方法更新缓存
如果服务器上的文件有所修改的话，那么修改描述文件中注释行的日期或者版本号是一个不错的使浏览器重新缓存文件的办法
此外，我们还可以使用HTML5提供的API来操作和更新缓存
applicationCache API
applicationCache API是一个操作应用缓存的接口。新的window.applicationCache对象可以触发一系列与缓存状态相关的事件。
这个对象有一个status属性，值为常量，表示缓存状态- 0：没有与页面相关的应用缓存（未缓存）
- 1：应用缓存未得到更新（空闲）
- 2：正在下载描述文件并检查更新（检查中）
- 3：应用缓存正在下载描述文件中指定的资源（下载中）
- 4：应用缓存已经更新了资源，而且所有资源都已下载完毕，可以通过swapCache()来使用了（更新就绪）
- 5：应用缓存的描述文件不存在了，页面无法再访问应用缓存（已过期）
这个对象有以下事件，表示其状态的改变
- 每次载入一个设置了manifest属性的HTML文件，首先会触发checking事件
- 如果应用程序已经缓存，并且清单文件没有改动，则浏览器触发noupdate事件
- 如果应用程序已经缓存，并且清单文件发生改动，则浏览器触发downloading事件，下载完毕后触发updateready事件
- 如果应用程序未缓存，则downloading事件和progress事件都会触发，但是下载完成后触发cached事件而不是updateready事件
- 如果处于离线，无法检测清单状态，则触发error事件，如果引用一个不存在的清单文件，也会触发error事件
- 如果处于在线，应用也缓存了，但是清单文件不存在，则会触发obsolete事件，并将应用程序从缓存中清除。
一般来讲，这些事件会随着页面加载按上述顺序依次触发
update()方法
通过update()方法也可以手工干预，让应用缓存为检查更新而触发上述事件
applicationCache.update();
update()一经调用，应用缓存就会去检查描述文件是否更新，触发checking事件，然后页面就会像刚刚加载一样，继续执行后续操作。如果触发了cached事件，则说明应用缓存已经准备就绪，不会再发生其他操作。
swapCache()方法
如果触发了updateready事件，则说明新版本的应用缓存已经可用，需要调用swapCache()方法来启用新的应用缓存。
applicationCache.onupdateready = function(){ applicationCache.swapCache(); };浏览器检查清单文件，以及更新缓存的操作是异步的，因此可能是在载入旧缓存之后进行，因此可能需要载入两次才能显示最新的内容，因此需要提示用户
window.applicationCache.onupdateready = function(){ var con = comfirm('有新内容可用，是否重新加载？'); if(con){ location.reload(); } }相关推荐：《html视频教程》
위 내용은 html5는 오프라인 애플리케이션을 지원합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
HTML 및 React : 마크 업과 구성 요소의 관계Apr 12, 2025 am 12:03 AMHTML과 React의 관계는 프론트 엔드 개발의 핵심이며, 현대 웹 애플리케이션의 사용자 인터페이스를 공동으로 구축합니다. 1) HTML은 컨텐츠 구조와 의미를 정의하고 React는 구성 요소화를 통해 동적 인터페이스를 구축합니다. 2) 부품은 JSX 구문을 사용하여 HTML을 포함하여 지능형 렌더링을 달성합니다. 3) 구성 요소 수명주기는 상태 및 속성에 따라 HTML 렌더링 및 업데이트를 동적으로 관리합니다. 4) 구성 요소를 사용하여 HTML 구조를 최적화하고 유지 관리 가능성을 향상시킵니다. 5) 성능 최적화에는 불필요한 렌더링을 피하고 주요 속성 사용 및 구성 요소 단일 책임을 유지하는 것이 포함됩니다.
반응 및 프론트 엔드 : 대화 형 경험 구축Apr 11, 2025 am 12:02 AMReact는 대화식 프론트 엔드 경험을 구축하는 데 선호되는 도구입니다. 1) 반응은 구성 요소화 및 가상 DOM을 통해 UI 개발을 단순화합니다. 2) 구성 요소는 기능 구성 요소 및 클래스 구성 요소로 나뉩니다. 기능 구성 요소는 더 간단하고 클래스 구성 요소는 더 많은 수명주기 방법을 제공합니다. 3) RECT의 작동 원리는 가상 DOM 및 조정 알고리즘에 의존하여 성능을 향상시킵니다. 4) 주 경영진은 usestate 또는 this.state를 사용하며 ComponentDidMount와 같은 수명주기 방법은 특정 논리에 사용됩니다. 5) 기본 사용에는 구성 요소 생성 및 상태 관리가 포함되며 고급 사용량은 사용자 정의 후크 및 성능 최적화가 포함됩니다. 6) 일반적인 오류에는 부적절한 상태 업데이트 및 성능 문제, 디버깅 기술은 ReactDevTools 사용 및 우수
반응 및 프론트 엔드 스택 : 도구 및 기술Apr 10, 2025 am 09:34 AMReact는 핵심 구성 요소 및 상태 관리 기능을 갖춘 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리입니다. 1) 구성 요소화 및 상태 관리를 통해 UI 개발을 단순화합니다. 2) 작업 원칙에는 화해 및 렌더링이 포함되며 최적화는 React.Memo 및 Usememo를 통해 구현할 수 있습니다. 3) 기본 사용법은 구성 요소를 작성하고 렌더링하는 것입니다. 고급 사용법에는 후크 및 컨텍스트를 사용하는 것이 포함됩니다. 4) 부적절한 상태 업데이트와 같은 일반적인 오류는 ReactDevTools를 사용하여 디버그 할 수 있습니다. 5) 성능 최적화에는 React.Memo, 가상화 목록 및 코드플릿을 사용하는 것이 포함되며 코드를 읽을 수 있고 유지 관리 가능하게 유지하는 것이 가장 좋습니다.
HTML에서 React의 역할 : 사용자 경험 향상Apr 09, 2025 am 12:11 AMReact는 JSX와 HTML을 결합하여 사용자 경험을 향상시킵니다. 1) JSX는 개발을보다 직관적으로 만들기 위해 HTML을 포함시킨다. 2) 가상 DOM 메커니즘은 성능을 최적화하고 DOM 운영을 줄입니다. 3) 유지 보수성을 향상시키기위한 구성 요소 기반 관리 UI. 4) 상태 관리 및 이벤트 처리는 상호 작용을 향상시킵니다.
반응 구성 요소 : HTML에서 재사용 가능한 요소 생성Apr 08, 2025 pm 05:53 PM반응 구성 요소는 함수 또는 클래스로 정의 할 수 있으며 UI 로직을 캡슐화하고 소품을 통해 입력 데이터를 수락합니다. 1) 구성 요소 정의 : 기능 또는 클래스를 사용하여 반응 요소를 반환합니다. 2) 렌더링 구성 요소 : 반응 호출 렌더 메소드 또는 기능 구성 요소를 실행합니다. 3) 멀티플렉싱 구성 요소 : 소품을 통해 데이터를 전달하여 복잡한 UI를 구축합니다. 구성 요소의 수명주기 접근 방식을 통해 다른 단계에서 논리를 실행하여 개발 효율성 및 코드 유지 관리 가능성을 향상시킬 수 있습니다.
엄격한 모드 목적을 반응합니다Apr 02, 2025 pm 05:51 PMReact Strict Mode는 추가 점검 및 경고를 활성화하여 React 응용 프로그램의 잠재적 문제를 강조하는 개발 도구입니다. 레거시 코드, 안전하지 않은 라이프 사이클 및 부작용을 식별하여 현대 반응 관행을 장려합니다.
파편 사용량을 반응합니다Apr 02, 2025 pm 05:50 PM반응 단편은 추가 DOM 노드없이 어린이를 그룹화하고 구조, 성능 및 접근성을 향상시킬 수 있습니다. 효율적인 목록 렌더링을위한 키를 지원합니다.
조정 과정에 반응합니다Apr 02, 2025 pm 05:49 PM이 기사에서는 React의 조정 프로세스가 DOM을 효율적으로 업데이트하는 방법에 대해 자세히 설명합니다. 주요 단계에는 조정 트리거, 가상 DOM 생성, 차이 알고리즘 사용 및 최소 DOM 업데이트 적용이 포함됩니다. Perfo도 다룹니다
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
