AngularJs를 통해 브라우저가 캐시를 강제로 클리어합니다.
나의angular우리 팀은 지금 빠른 업데이트를 실행하고 있기 때문에 어플리케이션이 계속 변화하고 있습니다.
캐시 때문에, 고객이 항상 최신 버전의 코드를 가지고 있는 것은 아닙니다.
그럼 어떻게 할 수 있을까요?angular캐시를 강제로 클리어할 수 있습니까?
스크립트 파일에 해시를 추가하는 매우 간단한 솔루션을 사용할 수 있습니다.앱을 배포할 때마다 gulp/grunt 작업을 통해 자동으로 다른 해시를 사용하여 파일을 제공합니다.예를 들어 gulp-rev를 사용할 수 있습니다.저는 이 기술을 모든 프로젝트에서 사용하고 있으며, 정상적으로 작동합니다.이 기술은 빌드/도입 프로세스에서 자동화되어 모든 프로젝트의 솔루션이 될 수 있습니다.
앵귤러용 Yoman 제너레이터JS generator-gulp-angular(이것은 내가 선택한 생성기)는 이 솔루션을 사용하여 브라우저가 캐시에 있는 이전 파일이 아닌 새로운 최적화 파일을 로드하도록 합니다.데모 프로젝트를 만들어 플레이해 주세요.실행하는 것을 보실 수 있습니다.
위에서 언급한 바와 같이 브라우저 캐시 문제를 해결하기 위한 일반적인 솔루션은 로드된 리소스 파일에 일종의 버전 토큰(버전 번호, 타임스탬프, 해시 등)을 추가하는 것입니다.여기에는 사용자가 페이지를 로드하거나 새로고침하는 경우가 포함됩니다.이미 Gulp 태스크에 대해 설명한 바와 같이 WebPack, Asp.net MVC 등의 백엔드 프레임워크는 번들링, 최소화, 난독화 등과 함께 이 기능을 지원합니다.다른 관련 문제 해결에도 사용하는 것이 좋습니다.
그러나 백엔드 측에서 변경(전개)되었을 때 메인 페이지 자체를 업데이트하고 이미 로드된 파일을 해결할 수 없다고 생각하는 사람도 있습니다.예를 들어, 다른 사용자가 한 페이지를 다시 로드하지 않고 작업할 때 앱을 배포합니다.또는 사용자가 브라우저 탭에서 앱을 열어두고 1시간 후에 이 페이지로 돌아갑니다.이 경우 메인 페이지를 포함하여 이미 로드된 파일 중 일부는 오래된 파일이고 백엔드 측의 일부 파일은 새 파일입니다.또한 이미 로드된 모든 파일에는 백엔드에 존재하지 않지만 브라우저에 캐시된 파일에 대한 오래된 참조가 있습니다.따라서 일반적으로 어플리케이션이 고장났으며 실제로는 Angular가 스스로 해결할 수 없는 더 일반적인 문제입니다.
이를 해결하려면 사용자에게 새 앱 버전이 존재함을 알리고 페이지를 새로고침하거나 강제로 새로고침해야 합니다.두 번째 방법은 사용자 경험의 관점에서 좋지 않습니다.사용자가 작업 중이고 어느 순간 페이지가 자동으로 새로고침된다고 가정합니다.이상하죠?
사용자에게 새 버전을 알리기 위해 웹 사이트 메시지를 사용하여 새 버전에 대한 앱을 만들거나, 모든 응답에서 버전을 전달하거나(좋은 솔루션이 아님), 때때로 새 버전에 대한 백엔드를 가져올 수 있습니다(좋은 솔루션도 아님).하지만 그들 모두가 사소한 것은 아니다.앱 로그인 세션이 짧은 경우 다시 로그인하거나 인증 쿠키를 새로 고치는 동안 버전을 확인할 수 있습니다.
따라서 이 문제를 완전히 해결하려면 파일 번들링 + 새로운 버전의 사용자 알림 메커니즘을 구현해야 합니다.
매우 간단한 솔루션을 찾고 있으며 IDE가 C#의 비주얼 스튜디오라면 앱 빌드 ID를 가져와 js 파일 URL에 연결할 수 있습니다.
다음과 같은 을 활성화해야 .
프로젝트 속성으로 이동하여 새 창의 응용 프로그램에서 어셈블리 정보를 클릭하고 어셈블리 버전에 "*"를 추가합니다(위의 이미지에 설명된 대로 마지막 자리).
그런 다음 aspx, 웹 서비스 또는 webapi 등의 코드 뒤에 새 속성을 추가합니다.aspx를 사용하고 있는 코드:
public string GetVersionApp => System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.ToString();
그런 다음 html을 통해 속성을 호출하고 값을 다음과 같이 URL 파일에 param으로 연결합니다.
<script type="text/javascript" src="App/RequestsList/directives/comment-directive.js?<%=GetVersionApp%>"></script>
이 솔루션을 사용하면 새 빌드가 발생한 경우에만 파일이 다시 로드됩니다.
언급URL : https://stackoverflow.com/questions/31850824/angularjs-force-browser-to-clear-cache
'programing' 카테고리의 다른 글
| 경고: 각도 로드를 두 번 이상 시도했습니다.각도 JS (0) | 2023.03.20 |
|---|---|
| MongoDB 집약:총 레코드 수를 어떻게 얻습니까? (0) | 2023.03.20 |
| 각도 변환으로 현재 언어 가져오기 (0) | 2023.03.20 |
| 응용 프로그램 설정 파일 (0) | 2023.03.20 |
| Next.js에서의 인증 구현 방법 (0) | 2023.03.20 |