위치정보를 PWA에 통합하는 방법

사용자가 지원되는 브라우저에 있다고 가정하면 Geolocation API를 사용하여 navigator.geolocation 가 사용자의 위치를 ​​쉽게 감지하도록 할 수 있습니다. PWA에서 올바르게 수행하는 방법은 다음과 같습니다.

전제 조건

• 견고한 JavaScript 및 HTML 지식.
• HTTPS 를 통해 제공되는 작동하는 PWA (PWA 자습서를 따라 생성).

작동 중인 지리적 위치

지금쯤이면 지리적 위치가 낯설지 않을 것입니다. 귀하의 허가가 있는 경우, 지리적 위치가 통합된 웹사이트는 귀하의 위치에 액세스할 수 있으며 이를 사용하여 귀하의 지역과 관련된 정보를 표시하거나 단순히 지도에 귀하의 위치를 ​​표시할 수 있습니다.

위치정보를 PWA에 통합하는 방법

기본

먼저 navigator.geolocation 객체 뒤에 있는 기본 메커니즘을 이해해야 합니다. navigator 개체는 많은 웹 API를 사용할 수 있게 해주는 컨테이너 개체입니다. navigator 컨테이너 내부에는 다음 세 가지 방법이 제공되는 geolocation 개체가 있습니다.

• getCurrentPosition()
• watchPosition()
• clearWatch()

getCurrentPosition() 을 사용하여 사용자 위치 가져오기

첫 번째 메서드인 getCurrentPosition() 의 목적은 자명해야 합니다. 사용자 장치의 위치를 ​​가져옵니다.

 navigator.geolocation.getCurrentPosition(() => {})

가져온 위치는 coords 및 timestamp 에서 사용할 수 있으며 coords 는 Coordinates 개체입니다. 기본적으로 Coordinates 개체는 다음 속성으로 정의됩니다.

• accuracy 미터 단위의 위치 정확도
• altitude 위치의 고도
• accuracy 미터 단위의 위치 고도 정확도
• 장치가 heading 있는 방향으로 각도로 표시됩니다. (0 = 북쪽, 동쪽 = 90, 남쪽 = 180, 서쪽 = 270)
• latitude 위치의 위도
• longitude 위치의 경도
• speed 장치가 이동하는 속도(미터/초로 표시됨)

짐작하셨겠지만 적절한 추적 하드웨어가 없는 장치는 이 API의 모든 이점을 얻지 못하므로 일부 값만 반환하고 다른 값은 null 로 남깁니다. 예를 들어 데스크톱 컴퓨터에서는 longitude , latitude 및 accuracy 값만 수신할 수 있으며 요청된 다른 값( heading , speed )은 null 로 돌아옵니다.

watchPosition() — 사용자의 위치를 ​​주기적으로 검색

위의 방법은 주로 사용자의 위치를 ​​검색하는 데 사용되지만 사용자가 자주 이동하는 것으로 알려져 있기 때문에 사용자의 정확한 위치에 의존하는 앱에는 유용하지 않습니다. 이것은 사용자 위치의 주기적 업데이트를 위한 콜백 함수를 등록할 navigator.geolocation 의 watchPosition() 메서드가 필요한 때입니다.

 navigator.geolocation.watchPosition(위치 => {
    console.log(위치)
})

watchPosition 메서드는 위치 업데이트 수신을 중지하는 데 사용할 수 있는 고유한 트랜잭션 id 를 반환합니다. 고유 id 와 navigator.geolocation.clearWatch() 메서드를 사용하여 위치 감시를 중지할 수 있습니다.

 const id = navigator.geolocation.watchPosition(위치 => {
    console.log(위치)
})

//10초 후 시청 중지
setTimeout(() => {
  navigator.geolocation.clearWatch(id)
}, 10 * 1000)

오류 처리

모든 오류를 처리할 적절한 기능이 설정되어 있지 않으면 곧 엉망이 될 수 있습니다. 사람이 읽을 수 있는 블록에 오류를 표시하려면 위치 표시를 위한 함수에 다음 코드를 추가해야 합니다.

 함수 위치 오류(오류) {
    스위치(오류.코드) {
        사례 오류.PERMISSION_DENIED:
            return "사용자가 위치 정보 요청을 거부했습니다.";
        사례 error.POSITION_UNAVAILABLE:
            return "현재 위치 정보를 사용할 수 없습니다.";
        케이스 오류입니다.TIMEOUT:
            return "사용자 위치 요청 시간이 초과되었습니다.";
        사례 error.UNKNOWN_ERROR:
            return "알 수 없는 오류가 발생했습니다.";
    }
}

또한 콘솔에서 테스트할 수 있습니다.

 navigator.geolocation.getCurrentPosition(위치 => {
  console.log(위치)
}, 오류 => {
	console.error(오류)
})

1 은 사용자 권한이 거부되었음을 의미하고 2 는 현재 사용자 위치를 사용할 수 없음을 의미하고 3 은 요청 시간이 초과되었음을 의미하는 code 속성을 반환합니다.

기본을 넘어서

기본 사항을 이해하는 것이 중요하지만 항상 더 나은 것을 위해 노력할 수 있습니다. 지리적 위치 기능을 추가로 개선할 수 있는 방법은 다음과 같습니다.

좌표 조회 시 시간 초과

사용자의 네트워크 상태가 느린 경우 시간 초과를 사용하여 작업이 만료되었음을 나타낼 수 있습니다. 시간 초과를 추가하려면 다음 속성을 포함하는 세 번째 매개변수를 추가해야 합니다.

• timeout 작업이 만료되기까지의 시간(밀리초)입니다.
• maxiumAge 브라우저에 의해 캐시된 위치의 최대 수명으로, 밀리초 단위로 측정됩니다.
• enableHighAccuracy 더 정확한 위치를 가져오기 위해 더 많은 시간과 리소스를 소비할 수 있는 자명한 true/false 옵션입니다.

 navigator.geolocation.getCurrentPosition(위치 => {
  console.log(위치)
}, 오류 => {
	console.error(오류)
}, {
  시간 초과: 2000,
  최대 나이: 20000,
  enableHighAccuracy: 참
})

Google 지도에 사용자 위치 표시

Google Maps API를 사용하여 Google 지도에 사용자의 위치를 ​​표시할 수 있습니다.

 <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

웹에서 Google Map API를 시연하려면 Google에서 제공하는 이 가이드를 권장합니다. 지도에 사용자 또는 기기 위치 표시. 이 가이드에서는 Google Maps API가 통합된 기본 HTML을 찾을 수 있습니다.

또는 React 기반 PWA에 react-geolocated 를 사용하세요.

마음에 들지 않는 경우 react-geolocated 는 빠르고 쉬운 방법으로 React 기반 앱과 지리적 위치를 통합하는 좋은 방법입니다. 다음을 사용하여 기존 PWA 위에 모듈을 설치하기만 하면 됩니다.

 npm install react-geolocated --save

그런 다음 공식 GitHub 링크에 제공된 단계를 따르십시오. 그러면 내장된 지리적 위치가 있는 기능적인 PWA가 있어야 합니다.

결론

이것이 PWA의 지리적 위치 통합 프로세스를 위한 것입니다. 튜토리얼의 어느 부분에서든 어렵다면 주저하지 말고 아래 질문을 보내주세요!

신뢰할 수 있는 솔루션을 찾는 Magento 가맹점을 위해 당사는 귀하의 비즈니스를 위한 완전하고 비용 효율적인 Magento PWA 솔루션을 제공합니다.