단일 페이지 응용 프로그램에서 응용 프로그램 버전 변경 감지
오늘 여기에 질문이 하나 제기되었는데, 저는 명확한 답을 모르겠습니다.
모든 자원 파일(CSS 및 Javascript)을 연결 및 최소화하여 "마스터 페이지"에 선언한다고 가정합니다.
여러 페이지 앱에서 CSS 파일이 변경되면 다음 페이지 전체 로딩 시 재충전됩니다.
단일 페이지 앱에서는 사용자는 며칠 동안 작업을 계속할 수 있으며 CSS 파일이 선언된 메인 페이지를 재충전할 수 없습니다.Ctrl+F5가 발행될 때까지 사용자는 변경을 볼 수 없습니다.
누군가 이미 이 점을 생각하고 공유한 경험이 있을 것입니다.
저는 WebSockets를 사용할 수 없습니다.첫 번째는 과잉 살상이고 두 번째는 모든 고객이 이 기술을 지원하지 않기 때문입니다.모든 WebSocket 폴백에 동일한 이유가 적용됩니다.이것 때문에 서버를 계속 두드리는 일은 없을 거예요.
그래, 누구 생각나는 사람?:)
그나저나, 우리는 Angular를 사용한다.JS(특정 솔루션에 도움이 되는 경우)
감사합니다!
저도 같은 문제를 겪고 있어요.고객의 기준에 부합하지 않을 수 있는 독단적인 솔루션:
프론트 앱과 서버 앱을 패키징할 때 현재 버전의 프론트 앱이 포함된 구성 파일을 공유합니다.
전면: 루트 변경의 75%가 웹 서비스(루트 변경 해결)를 암묵적으로 호출합니다.따라서 서버를 호출할 때마다 프론트 앱의 클라이언트 버전을 포함하는 커스텀HTTP 헤더(또는 GET/POST 파라미터)를 포함합니다.
서버 측 : 프론트 앱버전(사용자의 브라우저에서 마지막으로 SPA를 새로고침/로드했을 때 로드된 버전)과 공유 컨피규레이션파일의 프론트 앱버전을 비교합니다.
- 버전이 일치하는 경우: 아무것도 하지 않습니다.
- 버전이 일치하지 않으면 커스텀 HTTP 상태 오류 코드(예: 418)를 보냅니다.
그러면 전면:418 에러 코드를 대행 수신해, 앱 전체를 강제 리프레쉬 하는 응답 인터셉터를 추가했습니다.
바로 그겁니다.기본적으로 프론트 앱 버전이 최신 버전인지 확인하는 이벤트는 루트 변경(Ajax 경유로 WS를 호출)입니다.단, 5분마다 전용 WS를 호출하는 무제한 $ 인터벌을 추가할 수 있습니다.필요하다면 코드를 추가할 수 있습니다.
이것이 도움이 되길 바란다;)
Angular를 사용하는 경우$route 서비스 및 공급자를 통한 JS의 라우팅은 다음과 같습니다.$routeChangeSuccessevent: 중요한 변경이 필요한 경우 서버 요청을 수행합니다.변경사항이 있는 경우 window.location.location()을 실행하여 페이지를 새로 고치고 업데이트된 리소스와 html을 모두 가져올 수 있습니다.
구현 방법에 따라 다음 프로세스를 변경할 수 있습니다.
1. 서버에서 앱 버전을 나타내는 구성 파일을 설정합니다.파일마다 다른 버전을 할당하도록 선택할 수도 있지만 모든 리소스 파일을 연결했으므로 구성에서 버전 옵션을 제한할 수 있습니다.
2. 필요한 모든 정보(서버로부터의 파일 버전)와 서버에 대한 서버 요청을 실행하여 서비스에 저장된 현재 파일 버전과 대조하는 방법을 포함하는 서비스를 만듭니다.
3. $routeChangeSuccess 이벤트를 사용하여 스텝2에서 작성한 서비스를 사용하여 서버 요청을 수행합니다.요구에 의해 변경이 있었음을 확인하는 유효한 확인이 반환된 경우 다음 경유로 강제 페이지 새로고침을 수행합니다.window.location.reload().
여기에 제 마지막 생각을 덧붙이기로 했습니다.
우리는 일단 축소 솔루션을 택했다.
이 어플리케이션과 대화하는 유일한 "프록시 서비스"가 있기 때문에 모든 응답의 http 헤더에 어플리케이션 버전을 추가했습니다.새로운 버전을 수신하면 사용자에게 통지하는 팝업이 나타나고 전체 페이지 새로 고침이 실행됩니다.
이 솔루션은, 독자적인 「프라이빗」서비스가 없는 애플리케이션에서는 동작하지 않습니다.
언급URL : https://stackoverflow.com/questions/23056808/detect-application-version-change-on-a-single-page-application
'programing' 카테고리의 다른 글
| withRouter'는 react-router-dom에서 내보내지 않습니다. (0) | 2023.02.23 |
|---|---|
| 같은 이름의 작업이 이미 있으므로 '래퍼' 작업을 추가할 수 없습니다. (0) | 2023.02.23 |
| Opcache에서 memcached가 필요합니까? (0) | 2023.02.23 |
| 컨트롤러에 동적으로 의존하는 $inject 방법 (0) | 2023.02.23 |
| Oracle SQL 개발자 도구에서 .sql 파일을 실행하여 데이터베이스를 가져오려면 어떻게 해야 합니까? (0) | 2023.02.23 |