이 게시물은 내 게시물의 일부입니다. 오늘 나는 배웠다 웹 개발에 관해 제가 배운 모든 것을 공유하는 시리즈입니다.
MDN 호환성 데이터 저장소에 대한 PR 오늘 내 눈에 들어왔어. 풀 요청의 목적은 ping Safari에 대한 속성 지원. 저는 이 속성을 본 적이 없습니다. 한번 살펴보겠습니다!
앵커 요소의 ping 속성은 공백으로 구분된 URL 목록을 허용합니다. 앵커가 핑 URL을 정의하고 누군가 이를 클릭하면 브라우저는 POST 지정된 URL로 요청하세요. 이 기능은 사용자가 사이트와 상호 작용하는 방식을 추적하고 분석하려는 경우 유용할 수 있습니다.
<a href="https://www.stefanjudis.com/popular-posts/" ping="https://www.stefanjudis.com/tracking/">Read popular posts</a>
실제로 작동하는 모습을 보려면 개발자 도구를 열고 아래 링크를 클릭하세요.👇
실제로 개발자 도구에서 네트워크 패널을 열면(브라우저가 새 URL로 이동한 후 요청을 보려면 "로그 보존"을 활성화) "핑 링크"를 클릭한 후 정의된 URL로 이동하는 요청을 볼 수 있습니다.
POST 요청의 페이로드는 단일 단어입니다. PING. 그만큼 ping-to 요청 헤더에는 링크의 대상과 다음과 같은 추가 정보가 들어 있습니다. user-agent 도 가능합니다. 흥미로운 점은 content-type is text/ping. 🙈
요약하면 ping 속성은 '링크 클릭 추적'을 구현하는 가벼운 방법을 제공합니다. 오늘부터 사용할 수 있다는 뜻인가요?
브라우저 지원은 ping 속성
당신이 볼 때 MDN의 속성 브라우저 호환성 표, 브라우저 지원이 그렇게 나쁘지 않다는 것을 알 수 있습니다.
Chromium 브라우저(Chrome, Edge 등)에서 지원합니다. Firefox의 지원은 브라우저 기능 플래그(browser.send_pings) 및 Safari… Safari는 지원하지 않는 것으로 잘못 표시되었습니다.
이 잘못된 정보는 어디에 있습니까? Safari 지원 정보를 업데이트하는 언급된 풀 요청 작용합니다. MDN 호환성 데이터의 다음 릴리스에서는 테이블이 합리적으로 녹색이 될 것입니다!
저는 기본 HTML 솔루션의 열렬한 팬입니다. 문제는 왜 아무도 이 제품을 사용하지 않는가 하는 것입니다. ping 속성(또는 이를 사용하는 사이트를 알고 계십니까?)
여기서는 추측만 할 수 있지만, 한 가지 이유는 사용자 분석이 주로 Google Analytics와 같은 제3자 제공업체에 의해 주도되기 때문일 수 있습니다.
웹 개발자가 이를 사용하려면 사이트에 단일 스크립트를 삽입하기만 하면 됩니다. JavaScript는 모든 사용자 행동을 추적하므로 설정할 인프라가 없습니다. 그냥 작동합니다.
추적을 기반으로 하는 경우 ping 속성을 사용하려면 사이트의 모든 링크를 조정해야 합니다. 이 프로세스에는 더 많은 유지 관리 및 개발 작업이 포함됩니다. 이는 다음을 사용하는 것을 반대하는 강력한 주장입니다. ping 속성을 사용하지 않는 것입니다.
그럼에도 불구하고 그것이 존재한다는 것을 아는 것이 좋습니다. 당신이 사용하는 경우 ping, 당신이 그것으로 무엇을 하는지 더 알고 싶습니다!
