2014-05-10 4 views
1

내 사이트에 로그인 한 사용자 만 액세스 할 수있는 내부 대시 보드를 만들므로 검색 엔진에서 색인 생성/크롤링 할 수 없습니다. 이 대시 보드는 주로 단일 페이지 앱입니다. 더구나, 나는 상관하지 않는다 (적어도 나는 를 생각한다.) 귀여운 URL을 가지고있는 것에 대해를 생각한다. 진보적 인 향상은 없다. 자바 스크립트가 비활성화되어 있다면, 대시 보드는 작동하지 않는다.onhashchange 대 pushState

내가 필요한 것은 여러 상태 사이에서 뒤로/앞으로 단추를 사용하여 탐색 할 수있는 기능입니다 (예 : 열리는 다양한 모달). 그리고 매우 중요한 점은 외부에서을 대시 보드의 특정 상태에 연결할 수 있어야한다는 것입니다 (예 :이 구성에서 모달 A가 열려 있음). 예 : 대시 보드에 대한 링크가 포함 된 이메일을 통해

이 모든 것을 감안할 때 "오래된 학교"해시 뱅 (#!) 대 html5 푸시 스테이트가 선호됩니까? pushState는 이전 브라우저 지원을 위해 history.js와 같은 것을 사용하도록 요구합니다.

http://example.com/dashboard 

나는 관계없이 특정 모달 상태로 해결하기 위해 거의 동일한 작업을 수행 할 필요가 없습니다 내가 pushState 또는 onhashchange을 사용하고 있는지 여부 : 내 대시 보드는 다음 URL에있는 경우 그리고 구조적으로 말하기? 다른 말로 :

http://example.com/dashboard#!modalA/state1 

또는

http://example.com/dashboard/modalA/state1 

은 모두 현재 대시 상태를 표시하는 방법을 알아 내기 위해 (A 프레임 워크에 의해 수행) 클라이언트 측 분석이 필요하다. 내 백엔드 컨트롤러는 모든 대시 보드 URL에 대해/dashboard/*에 매핑됩니다. 왜냐하면 모든 주 관심사가 클라이언트에서 처리되기 때문입니다.

내가 누락 된 항목이 있습니까? 문제는 아니지만, 해시 이벤트와 pushState를 모두 지원하는 CanJS을 사용하고 있습니다.

참고 : 제 질문은 Google의 hashbang 제안과 관련이 없으며 # (onhashchange)의 일반적인 사용에 대한 질문입니다.

+0

여러 페이지가있는 경우 해시 태그를 통해 pushState를 사용하는 것이 좋습니다 (예 :/대시 보드/설정) 사용자가 페이지를 새로 고침 할 때 서버가 설정 페이지를 요청하고 있음을 읽을 수 있기 때문입니다. 서버가/대시 보드 # 설정을 사용하는 대신 해시 태그를 서버에 보내지 않기 때문에 사용자가 먼저 인덱스 페이지를로드해야만 설정 페이지가 렌더링되어 좋은 사용자 경험이 아닐 수 있습니다 지연이 있기 때문입니다. 또한 모달을 사용하려는 경우 쿼리 문자열 (예 :/dashboard)을 사용할 수 있습니다. modal = show –

+1

해시 뱅 (hash bang)은 [거짓말]입니다. http://tumbledry.org/2011/05/12/screw_hashbangs_building). 사용하지 마십시오. – royhowie

+0

그리고 오래된 브라우저 지원도 거짓말입니다. 사이트의 공용 부분은 레트로 브라우저에 대한 지원을 확대 할 수 있지만 "대시 보드"와 같은 응용 프로그램 (거의 항상이 브라우저를 업데이트해야하는 이유를 알고있는 사람들이 사용하는 응용 프로그램)은 최신의 안정적인 기능을 사용할 수 있습니다. 모두 모두 IE10 (2 세 이상) [지원] (http://caniuse.com/#search=pushState) history API – Tommi

답변

0

This article 해시/해시뱅을 사용하여 잠재적 인 문제를 요약하는 것은 꽤 좋은 일입니다.하지만 꽤 좋은 이유가 있습니다.

당신은 주어진 꽤 운이 좋은 위치에 있습니다 :

  1. 당신은 SEO에 대해 걱정할 필요가 없습니다은
  2. 앱이 조직 내부에 관한이 만들어 나에게

조직 내에서 HTML5와 호환되는 버전으로 브라우저를 업그레이드 할 것을 요구할 수 있는지 여부에 따라 선택 사항이 매우 명확합니다. 따라서 해당 기능을 사용하는 경우 HTML5 기록 API를 사용하십시오. 그렇지 않으면 해시를 사용하십시오. HTML4 onhashchange 폴백을 사용하여 HTML5 pushState를 사용하려면 you can do that as well을 원하지만 HTML5 사용자를 위해 모든 HTML5 링크가 작동하도록하려면 추가 작업이 필요합니다.