offline 다운로드 - offline 소스 코드 다운로드

offline

기타 소스코드

Add Turkish + miscellaneous fixups

다운로드

이 프로젝트는 적극적으로 유지 관리되지 않습니다.

오프라인

0.6.0 이전 사용자 참고 사항: 오프라인에서는 이전에 연결 상태를 감지하는 방법 중 하나로 cloudfront 호스팅 파일을 사용했습니다. 이 방법은 이제 더 이상 사용되지 않으며 이미지가 제거되었습니다. 오프라인 0.7.0 이상으로 업그레이드하세요.

사용자의 연결이 끊어졌을 때 앱 환경을 개선하세요.

실패를 찾는 Ajax 요청을 모니터링합니다.
이미지 또는 가짜 리소스를 요청하여 연결 상태를 확인합니다.
연결이 끊어진 동안 발생한 Ajax 요청을 자동으로 잡아서 연결이 복원된 후 다시 만듭니다.
아름다운 테마를 갖춘 간단한 UI
3kb 축소 및 압축

설치

사이트에 자바스크립트, 테마 중 하나, 언어 중 하나를 포함하세요. 이제 끝났습니다!

UI 표시기 없이 JavaScript API만 사용하려면 CSS 파일을 생략하면 됩니다.

사이트가 어떻게 보이는지 확인하려면 인터넷 연결을 끊거나 시뮬레이터를 사용해 보세요.

고급의

선택적으로 스크립트를 가져온 후 Offline.options 를 설정하여 일부 구성을 제공할 수 있습니다.

옵션(모두 함수로 제공될 수 있음)(기본값):

 { // 페이지 로드 시 즉시 연결 상태를 확인해야 할까요?  checkOnLoad: false, // 연결이 있는지 결정하는 데 도움이 되도록 AJAX 요청을 모니터링해야 할까요?  InterceptRequests: true, // 연결이 끊어지면 주기적으로 자동으로 다시 테스트해야 합니다(비활성화하려면 false로 설정).  reconnect: { // 다시 확인하기 전에 몇 초 동안 기다려야 합니까?    initialDelay: 3, // 재시도 사이에 얼마나 기다려야 합니까?    지연: (1.5 * 마지막 지연, 최대 1시간) }, // 연결이 끊어진 동안 실패한 요청을 저장하고 다시 작성해야 합니다.  요청: true, // 사용자가 계속 즐겁게 지낼 수 있도록 연결이 끊어진 동안 스네이크 게임을 표시해야 합니까?  // 일반 빌드에는 포함되지 않으므로 //offline.min.js 외에 js/snake.js도 가져와야 합니다.  게임: 거짓}

속성

Offline.check() : 현재 연결 상태를 확인합니다.

Offline.state : 현재 연결 상태 'up' 또는 'down'

Offline.on(event, handler, context) : 이벤트를 바인딩합니다. 이벤트:

up: 연결이 아래에서 위로 이동했습니다.
down: 연결이 위에서 아래로 바뀌었습니다.
확인됨: 연결 테스트가 성공했습니다. 연결이 이미 연결되어 있어도 실행되었습니다.
확인 다운: 연결 테스트가 실패했습니다. 연결이 이미 끊어졌더라도 실행되었습니다.
확인 중: 연결을 테스트하고 있습니다.
reconnect:started: 재연결 프로세스를 시작하고 있습니다.
reconnect:stopped: 다시 연결 시도가 완료되었습니다.
reconnect:tick: 재연결 시도 중 검사가 발생하지 않을 때 매초마다 실행됩니다.
reconnect:connecting: 지금 다시 연결 중입니다.
reconnect:failure: 재연결 확인 시도가 실패했습니다.
요청:플러시: 보류 중인 모든 요청이 다시 작성되었습니다.
요청:캡처: 새 요청이 보류 중입니다.

Offline.off(event, handler) : 이벤트 바인딩 해제

확인 중

기본적으로 오프라인은 연결을 확인하기 위해 /favicon.ico 로드하라는 XHR 요청을 만듭니다. 해당 파일이 없으면 콘솔에 404가 표시되지만 그렇지 않으면 정상적으로 작동합니다(404라도 연결이 작동 중임을 의미함). 연결되는 URL을 변경할 수 있습니다(빠른 204로 응답하는 엔드포인트가 완벽합니다).

 Offline.options = {checks: {xhr: {url: '/connection-test'}}};

확인하는 URL의 출처가 페이지와 동일한지 확인하세요(연결 방법, 도메인 및 포트가 모두 동일해야 함). 그렇지 않으면 CORS 문제가 발생합니다. 엔드포인트에 Access-Control 헤더를 추가하여 최신 브라우저에서 문제를 해결할 수 있지만 IE9 이하에서는 여전히 문제가 발생합니다.

다른 도메인에서 테스트를 실행하려면 이미지 방법을 사용해 보세요. 도메인 간 이동이 허용되는 이미지를 로드합니다.

 Offline.options = {검사: {이미지: {url: 'my-image.gif'}, 활성: '이미지'}}

한 가지 주의할 점은 이미지 방법을 사용하면 404를 실제 연결 문제와 구별할 수 없으므로 모든 오류가 오프라인에 연결 문제로 표시된다는 것입니다.

오프라인에는 'up' 이라는 검사와 'down' 이라는 검사도 포함되어 있으며 테스트를 위해 항상 각각 작동 중인지 작동 중지 상태인지 보고합니다. active 옵션을 설정하고, 이름이 data-simulate 이고 값이 'up' 또는 'down' 인 스크립트 태그에 데이터 속성을 추가하거나, localStorage.OFFLINE_SIMULATE 'up' 또는 'down' 으로 설정하여 활성화할 수 있습니다.