bfCache 앞으로 뒤로 캐시

 

https://web.dev/articles/bfcache?utm_source=devtools&hl=ko#optimize_your_pages_for_bfcache

앞으로 뒤로 페이지를 이용했을 경우 설정하는 브라우저 최적화, 네트워크가 느린 환경에서는 크게 차이가 날것이다.

 

 

bfCache를 사용 할 수 있는 방법은 가이드가 있다.

 

1. unload 이벤트 리스너를 지양한다. unload가 되어 로드 되지 않은 페이지를 캐시 하려고 하면 bfCache가 손상된다.

 

2. beforeunload 는 bfCache를 사용 할 수 없는 것은 아니지만, 불안정 하므로 지양한다.

 

3. cache-control:no-store 최소화 

 

HTTP캐시에 저장되지 않도록 브라우저에 지시 하는 HTTP헤더 웹서버

HTTP캐시와 bfCache는 다르지만 캐시 저장을 하지 않으면 사용할 수 없다.

 

* Cache-control:max-age=0 을 사용 할 경우 bfCache에서 페이지 복원시 http캐시가 포함되지 않으므로 max-age=0을 설정해서 사용 할 수 있도록 할 수 있다.

 

4. bfCache 복원 후 민감 정보는 업데이트 한다 로그아웃 후 bfCache를 이용할 경우 지워질것으로 예상한 비공개 데이터가 포함 될 수 있다.

 

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // Do any checks and updates to the page
  }
});

 

아래 처럼 새로고침을 강제 실행해서 쿠키가 없으면 새로고침을 하도록 할 수 있다.

window.addEventListener('pageshow', (event) => {
  if (event.persisted && !document.cookie.match(/my-cookie)) {
    // Force a reload if the user has logged out.
    location.reload();
  }
});

 

 

5. window.opener 참조 피하기

window.open target=_blank 을 사용할 경우 여는 페이지와 열린 페이지의 창 객에체 관한 참조가 포함되어 bfcache가 망가질 수 있어, rel="noopener"를 이용 하여야 한다.

 

이것이 무슨 말이냐면, rel="noopener" 를 사용하면 window.opener를 했을때 부모창의 정보를 알 수 없고 null이 반환된다.

 

예제) 

<a href="url" target="_blank" rel="noopener" > 클릭url</a>

 

 

 

6. 아래의 경우에는 일부 브라우저에서 bfCache에 페이지를 넣으려 하지 않는다.

- 열려 있는 IndexedDB 연결
- 진행 중인 fetch() 또는 XMLHttpRequest
- 열린 WebSocket 또는 WebRTC 연결

 

pagehide 또는 freeze 이벤트를 사용해 연결을 닫고, 다시 pageshow 또는 resume 하여 API를 다시 연결 하도록 하자