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 : 학습 곡선 및 사용 편의성Apr 16, 2025 am 12:12 AM

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스Apr 15, 2025 am 12:16 AM

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지Apr 14, 2025 am 12:05 AM

C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

See all articles

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

mPDF

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

Dreamweaver Mac版

시각적 웹 개발 도구

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.