유튜브 동영상 추가후 콘솔에 나타나는 preloadResponse 에러메시지 해결하기
preloadResponse 에러
에러메시지 : The service worker navigation preload request was cancelled before 'preloadResponse' settled. If you intend to use 'preloadResponse', use waitUntil() or respondWith() to wait for the promise to settle.
최근에 포스팅한 사이폰커피 kukan 소개 포스팅에 유튜브 쇼츠 영상을 일반동영상처럼 재생되도록 하여 집어넣었는데 콘솔을 확인해보니 위와 같은 에러메시지가 나오고 있었습니다.
그리고 확인해보니 유독 유튜브영상이 포스팅 화면에 늦게 나오고 있었는데요. preload 라는게 마크업의 위치로 인해 리소스 로드를 시작하는 시점보다 일찍 리소스 로드를 시작하게 만드는 기능인데 이게 작동을 안하니 유튜브링크가 늦게 나오고 있던거였습니다.
 |
| preloadResponse 로딩이 안되 나오는 에러메시지 |
그래서 lazyload를 이용해 로딩순서를 뒤로 미뤄보려고도 했는데 여전히 소용이 없고 아래와 같은 메시지만 나올뿐이었습니다. 해결책을 찾기위해 한참을 웹서핑을 하다가 찾은 방법은 iframe내의 유튜브 url에 nocookie/embed를 추가하여 url변경을 하는 방법이 있는걸 보고 실행해봤습니다.
 |
| 수정전 url |
- 수정전 URL : youtube.com/embed/~~
- 수정후 URL : youtube-nocookie.com/embed/~~
 |
| 수정후 url |
이렇게 수정한 후에는 문제없이 재생이 되기 시작했습니다.