HTML5 애플리케이션 캐시를 사용할 때 피할 수있는 일반적인 함정-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

HTML5 애플리케이션 캐시를 사용할 때 피할 수있는 일반적인 함정

Christopher Nolan

Feb 20, 2025 am 10:05 AM

Common Pitfalls to Avoid when using HTML5 Application Cache 키 포인트

응용 프로그램 캐시 매니페스트에 매니페스트 파일이 포함되어 있지 않으므로 웹 사이트에 새 캐시 파일을 사용할 수 있음을 거의 알 수없는 루프를 만들 수 있습니다. 는 AppCache가 올바르게 실행되도록 서버의 .htaccess 파일에서 항상 응용 프로그램 유형을 설정합니다. 미디어 유형이 설정되지 않으면 AppCache가 작동하지 않습니다.

Manifest 파일에 지정된 개별 파일 중 어느 것도 찾을 수 없거나 다운로드 할 수없는 경우 전체 매니페스트 파일을 폐기합니다. 이것은 AppCache의 특별한 행동입니다.

웹 사이트를 업데이트 한 후에는 항상 매니페스트 파일을 업데이트하십시오. 그렇지 않으면 사용자는 변경 사항이 표시되지 않으며 이전에 캐시 된 데이터 만 볼 수 있습니다. Manifest 파일의 주석에서 버전 번호 또는 날짜를 업데이트하여 사용자의 웹 브라우저가 새 버전의 Manifest 파일을 다운로드하도록 강요 할 수 있습니다.

html5 응용 프로그램 캐싱 (AppCache라고도 함)은 최근 웹 개발자에게 인기있는 주제가되었습니다. AppCache를 사용하면 웹 사이트 방문자가 오프라인에서 웹 사이트를 탐색 할 수 있습니다. 이미지, 스타일 시트 또는 웹 글꼴과 같은 웹 사이트의 일부를 사용자의 컴퓨터의 캐시에 저장할 수도 있습니다. 이를 통해 웹 사이트가 더 빨리로드되면 서버의 부하가 줄어 듭니다.

AppCache를 사용하려면 확장자 "AppCache"가있는 매니페스트 파일을 만들 수 있습니다 : Manifest.appcache. 이 파일에서는 모든 파일을 캐시에 나열 할 수 있습니다. 사이트에서이를 활성화하려면 아래와 같이 HTML 요소의 웹 페이지에 매니페스트 파일에 대한 참조를 포함시켜야합니다.

이것은 샘플 매니페스트 파일입니다 :

AppCache의 이점 외에도 사용자 경험을 방해하지 않고 앱을 파괴하기 위해 피해야 할 몇 가지 일반적인 함정이 있습니다.

Manifest 파일에 매니페스트 파일을 나열하지 마십시오 애플리케이션 캐시 매니페스트에 매니페스트 파일 자체를 포함 시키면 웹 사이트에 새로운 캐시 파일이 있음을 거의 알리지 않고 새 캐시 파일을 다운로드하여 사용해야합니다. 기존 매니페스트 파일 대신. 그러므로 다음과 같은 실수를하지 않도록주의하십시오. 캐시 페이지의 끊임없는 리소스가로드되지 않습니다

이것은 AppCache를 처음으로 사용할 때 매우 일반적인 실수입니다. 이곳은 매니페스트 파일의 네트워크 플래그가 작동하는 곳입니다. 매니페스트 파일의 네트워크 섹션은 웹 응용 프로그램이 온라인으로 액세스하는 데 필요한 리소스를 지정합니다.

네트워크 플래그 아래에 지정된 URL은 기본적으로 "화이트리스트"입니다. 즉,이 플래그 아래에 지정된 파일은 인터넷 연결이있을 때 항상 서버에서로드됩니다. 예를 들어, 다음 코드 스 니펫은 / API / 서브 트리에 포함 된로드 리소스에 대한 요청이 캐시가 아닌 네트워크에서 항상로드되도록합니다.

<html lang="en" manifest="manifest.appcache">

항상 서버의 .htaccess 파일에서 응용 프로그램 유형을 설정하십시오. 매니페스트 파일은 항상 올바른 미디어 유형 텍스트/캐시-관리하에 제공되어야합니다. 미디어 유형이 설정되지 않으면 AppCache가 작동하지 않습니다.

프로덕션 서버의 .htaccess 파일에 항상 구성되어야합니다. 이것은 AppCache를 설명하는 대부분의 자습서에서 언급되지만 많은 개발자는 개발 서버에서 프로덕션 서버로 웹 응용 프로그램을 마이그레이션 할 때이를 무시합니다.

Apache의 .htaccess 파일에 다음을 입력하십시오

앱을 Google App Engine에 업로드하면 app.yaml 파일에 다음 스 니펫을 추가하여 동일한 작업을 수행 할 수 있습니다.

파일을 찾을 수 없기 때문에 전체 목록을 버리지 않도록하십시오. Manifest 파일에 지정된 개별 파일 중 어느 것도 찾을 수 없거나 다운로드 할 수없는 경우 전체 매니페스트 파일이 폐기됩니다. 이것은 AppCache의 이상한 행동으로 AppCache를 사용하는 웹 응용 프로그램을 설계 할 때 명심해야합니다.

예 :

로고를 삭제하면 AppCache는 삭제 된 이미지 파일을 찾을 수 없으므로 Manifest 파일의 어느 것도 실행되지 않습니다.

온라인에서도 데이터가 AppCache에서로드됩니다
웹 브라우저가 캐시 매니페스트 파일을 저장하면 사용자가 인터넷에 연결되어 있어도 캐시에서 파일이로드됩니다. 이 기능은 웹 사이트의로드 속도를 높이고 서버로드를 줄이는 데 도움이됩니다.

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js

NETWORK:
*

FALLBACK:
/server/ /fallback.html</code>

매니페스트 파일이 업데이트 될 때까지 서버의 변경 사항이 발생하지 않습니다. 는 이전 시점에서 사용자가 온라인 상태이더라도 AppCache에서 데이터가로드 될 것이라는 것을 알았 기 때문에 Manifest 파일이 업데이트 될 때까지 웹 사이트 또는 서버의 파일 변경이 발생하지 않습니다.

웹 사이트를 업데이트 한 후에는 항상 매니페스트 파일을 업데이트해야합니다. 그렇지 않으면 사용자가 변경 사항을 볼 수 없으므로 이전에 캐시 된 데이터 만 볼 수 있습니다. Manifest 파일의 주석에서 버전 번호 또는 날짜를 업데이트하여 사용자의 웹 브라우저가 새 버전의 Manifest 파일을 다운로드하도록 강요 할 수 있습니다. 예를 들어, 웹 사이트를 변경하기 전에 목록 파일을 사용하는 경우 :

<code>CACHE MANIFEST
# 2015-01-23 v0.1

manifest.appcache
page2.css</code>

사용자의 브라우저가 매니페스트 파일의 새 사본을 다운로드 할 수 있도록 다음 코드 블록과 유사한 것으로 변경할 수 있습니다.

#로 시작하는 줄은 실행되지 않을 댓글 줄입니다.

매니페스트 파일은 호스트와 동일한 소스에서 제공되어야합니다. 매니페스트 파일은 다른 도메인에서 캐시 할 리소스에 대한 참조를 보유 할 수 있지만 호스트 페이지와 동일한 소스에서 웹 브라우저에 제공되어야합니다. 그렇지 않은 경우 매니페스트 파일이로드되지 않습니다. 예를 들어, 다음 매니페스트 파일이 정확합니다

여기서는 다른 도메인에서 참조되는 사용자의 브라우저 캐시에 저장하려는 내용을 지정합니다.

List URL 에 대한 상대 URL 주목해야 할 중요한 사항 중 하나는 Manifest에서 언급 한 상대 URL이 Manifest 파일을 참조하는 문서와 관련이없는 Manifest 파일과 관련이 있다는 것입니다. 매니페스트와 참조가 동일한 경로에 있지 않으면 리소스가로드되지 않고 매니페스트 파일이로드되지 않습니다. 응용 프로그램 구조가 다음과 같이 보이는 경우 :

그러면 매니페스트 파일이 다음과 같이 보일 것입니다 :

점검 목록의 상태를 프로그래밍 방식으로 확인하십시오

는 응용 프로그램이 Window.applicationCache.status를 테스트하여 업데이트 된 캐시 매니페스트 버전을 사용하고 있는지 프로그래밍 방식으로 확인할 수 있습니다. 다음은 몇 가지 샘플 코드입니다.

<html lang="en" manifest="manifest.appcache">

웹 사이트에서 위의 코드를 실행하면 AppCache 목록에 대한 새로운 업데이트가 언제 사용할 수 있는지 알려줍니다. UpdateReady는 정의 된 상태입니다. OnupDatereAdy () 함수의 SwapCache () 메소드를 사용하여 이전 매니페스트 파일을 새로운 매니페스트 파일로 바꾸는 것도 할 수 있습니다.

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js

NETWORK:
*

FALLBACK:
/server/ /fallback.html</code>

결론 AppCache는 유용한 기술이지만 프로젝트에서 구현할 때주의를 기울여야합니다. 개발자는 매니페스트 파일에 포함되어야 할 사항을 선택적으로 선택해야합니다. 이상적으로는 매니페스트 파일에는 스타일 시트, 스크립트, 웹 글꼴 및 이미지와 같은 정적 컨텐츠가 포함되어야합니다. 그러나 당신은 항상 매니페스트 파일에 포함 된 내용을 가장 잘 판단합니다. AppCache는 양날의 검이므로 사용할 때주의하십시오!

위의 내용 중 대부분은 다른 곳에서 소개되었으며 다른 핵심 사항이 있습니다. 자세한 내용은 다음 리소스를 확인할 수 있습니다.

MDN 의 애플리케이션 캐시 트랩 Jake Archibald의 앱 캐시는 바보입니다 제이크 아치 볼드의 오프라인 레시피

<code>CACHE MANIFEST
# 2015-01-23 v0.1

manifest.appcache
page2.css</code>

HTML5 Application Caching에 대한 FAQS (FAQ) html5 응용 프로그램 캐싱이란 무엇이며 왜 중요한가요?

html5 Application Cache (AppCache)는 개발자가 브라우저에서 캐시해야 할 파일을 지정하고 사용자가 오프라인으로 사용할 수 있도록하는 기능입니다. 서버로드를 줄이고 대역폭을 저장하여 웹 애플리케이션의 성능을 향상시킬 수 있기 때문에 중요합니다. 또한 사용자가 오프라인 상태 인 경우에도 응용 프로그램을 실행할 수 있으므로 더 나은 사용자 경험을 제공합니다.

<code>NETWORK:

/api</code>

HTML5 응용 프로그램 캐싱은 어떻게 작동합니까?

html5 응용 프로그램 캐싱은 Manifest 파일을 사용하여 작동합니다. 이 파일에는 브라우저가 오프라인 사용을 위해 캐시 해야하는 리소스가 나와 있습니다. 사용자가 웹 페이지에 액세스하면 브라우저는 Manifest 파일과 관련이 있는지 확인합니다. 그렇다면 브라우저는 나열된 리소스를 다운로드하여 저장합니다. 다음에 사용자가 웹 페이지를 방문 할 때 브라우저는 캐시 된 리소스를 서버에서 다운로드하는 대신로드합니다.

html5 응용 프로그램 캐싱을 사용할 때 일반적인 함정은 무엇입니까?

html5 응용 프로그램 캐싱을 사용하는 경우, 일부 일반적인 함정에는 다음이 포함됩니다 장치 저장.

이 함정을 피하는 방법?

이러한 함정을 피하기 위해 자원이 변경 될 때는 이러한 함정을 피하기 위해 항상 매니페스트 파일을 올바르게 업데이트하십시오. Manifest 파일의 네트워크 섹션을 사용하여 절대 캐시해서는 안되는 리소스를 지정하십시오. 또한 사용자의 장치 저장소를 고려하고 필요한 리소스 만 캐시하십시오.

HTML5 응용 프로그램 캐싱의 미래는 무엇입니까?

html5 애플리케이션 캐시가 더 이상 사용되지 않고 서비스 작업자로 대체됩니다. 서비스 근로자는 캐시를보다 잘 통제 할 수 있으며보다 복잡한 시나리오를 처리 할 수 있습니다. 그러나 서비스 작업자는 현재 모든 브라우저가 지원하지 않으므로 HTML5 응용 프로그램 캐싱을 이해하고 사용하는 것이 여전히 중요합니다.

매니페스트 파일을 만드는 방법은 무엇입니까?

매니페스트 파일은 캐시 할 리소스를 나열하는 간단한 텍스트 파일입니다. Mime Type "Text/Cache-Manifest"역할을해야합니다. 파일의 첫 번째 줄은 "캐시 매니페스트"이어야하고 캐시 할 리소스가이어야합니다.

웹 페이지를 매니페스트 파일과 연결하는 방법은 무엇입니까?

웹 페이지를 매니페스트 파일과 연결하려면 웹 페이지의 "HTML"태그에 "Manifest"속성을 추가하십시오. "Manifest"속성의 값은 Manifest 파일의 URL이어야합니다.

캐시를 업데이트하는 방법은 무엇입니까?

캐시를 업데이트하려면 매니페스트 파일을 변경하십시오. 사용자가 웹 페이지를 방문 할 때마다 브라우저는 Manifest 파일의 업데이트를 확인합니다. Manifest 파일이 변경되면 브라우저는 새 리소스를 다운로드하여 캐시합니다.

Manifest 파일에 나열된 리소스를 다운로드 할 수 없다면 어떻게됩니까?

Manifest 파일에 나열된 리소스를 다운로드 할 수없는 경우 전체 캐시 업데이트 프로세스가 실패합니다. 브라우저는 이전 캐시를 계속 사용합니다.

모든 리소스에 HTML5 응용 프로그램 캐시를 사용할 수 있습니까?

기술적으로 모든 리소스에 HTML5 애플리케이션 캐시를 사용할 수 있지만 권장되는 것은 아닙니다. 과도한 리소스 캐시는 사용자의 장치 저장소를 채우고 성능에 부정적인 영향을 줄 수 있습니다. 필요한 리소스 만 캐시하는 것이 가장 좋습니다.

위 내용은 HTML5 애플리케이션 캐시를 사용할 때 피할 수있는 일반적인 함정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사

Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

JavaScript 프레임 워크 : 현대적인 웹 개발 파워May 02, 2025 am 12:04 AM

JavaScript 프레임 워크의 힘은 개발 단순화, 사용자 경험 및 응용 프로그램 성능을 향상시키는 데 있습니다. 프레임 워크를 선택할 때 : 1. 프로젝트 규모와 복잡성, 2. 팀 경험, 3. 생태계 및 커뮤니티 지원.

JavaScript, C 및 브라우저의 관계May 01, 2025 am 12:06 AM

서론 나는 당신이 이상하다는 것을 알고 있습니다. JavaScript, C 및 Browser는 정확히 무엇을해야합니까? 그들은 관련이없는 것처럼 보이지만 실제로는 현대 웹 개발에서 매우 중요한 역할을합니다. 오늘 우리는이 세 가지 사이의 밀접한 관계에 대해 논의 할 것입니다. 이 기사를 통해 브라우저에서 JavaScript가 어떻게 실행되는지, 브라우저 엔진의 C 역할 및 웹 페이지의 렌더링 및 상호 작용을 유도하기 위해 함께 작동하는 방법을 알게됩니다. 우리는 모두 JavaScript와 브라우저의 관계를 알고 있습니다. JavaScript는 프론트 엔드 개발의 핵심 언어입니다. 브라우저에서 직접 실행되므로 웹 페이지를 생생하고 흥미롭게 만듭니다. 왜 Javascr

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

드림위버 CS6

시각적 웹 개발 도구

WebStorm Mac 버전

유용한 JavaScript 개발 도구

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.