ジオロケーションをPWAに統合する方法

公開: 2020-08-14

目次

ユーザーがサポートされているブラウザーを使用しているとすると、Geolocation APIを使用して、またはより具体的には、その中のnavigator.geolocationオブジェクトを使用して、PWAにユーザーの場所を簡単に検出させることができます。 PWAで正しく行う方法は次のとおりです。

前提条件

  • JavaScriptとHTMLに関する確かな知識。
  • HTTPS経由で提供される動作中のPWA （PWAチュートリアルに従って作成してください）。

ジオロケーションの実際

あなたはおそらく今ではジオロケーションに精通しているでしょう。 あなたの許可があれば、ジオロケーションが統合されたウェブサイトはあなたの場所にアクセスでき、それを使用してあなたの地域の関連情報を表示したり、単にあなたの場所を地図に表示したりできます。

私の近くのディナースポット-ジオロケーションの例
出典：NDTV

ジオロケーションをPWAに統合する方法

基礎

まず、 navigator.geolocationオブジェクトの背後にある根本的なメカニズムを理解する必要があります。 navigatorオブジェクトは、多くのWebAPIを使用できるようにするコンテナーオブジェクトです。 navigatorコンテナ内にはgeolocationオブジェクトがあり、次の3つのメソッドによって提供されます。

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

getCurrentPosition()を使用してユーザーの位置を取得する

最初のメソッドgetCurrentPosition()の目的は、自明である必要があります—ユーザーのデバイスの位置をフェッチします。 

 navigator.geolocation.getCurrentPosition（（）=> {}）

フェッチされた位置は、 coordsとtimestampで使用でき、 Coordinates coordsです。 デフォルトでは、 Coordinatesオブジェクトは次のプロパティによって定義されます。

  • accuracyメートル単位の位置の精度
  • altitude位置の高度
  • accuracyメートル単位の位置の高度の精度
  • デバイスがheadingている方向に向かって、度で表されます。 （0 =北、東= 90、南= 180、西= 270）
  • latitudeの緯度
  • longitudeの経度
  • speedデバイスが移動する速度（メートル/秒で表される）

ご想像のとおり、適切な追跡ハードウェアがないデバイスは、このAPIのメリットを十分に享受できないため、一部の値のみを返し、他の値はnullのままにします。 たとえば、デスクトップコンピュータでは、 longitude 、 latitude 、 accuracyの値しか受信できませんが、他の要求された値（ heading 、 speed ）はnullに戻ります。

コンソールposition.coordsログ
ブラウザはデスクトップで実行されているため、 headingとspeedの両方がnullを返します

watchPosition() —ユーザーの位置を定期的に取得します

前述の方法は主にユーザーの位置を取得するために使用されますが、ユーザーが頻繁に移動することが知られているため、ユーザーの正確な位置に依存するアプリにはあまり役立ちません。 これは、ユーザーの位置を定期的に更新するためのコールバック関数を登録するnavigator.geolocationのwatchPosition()メソッドが必要な場合です。 

 navigator.geolocation.watchPosition（position => {
    console.log（position）
}）

watchPositionメソッドは、場所の更新の受信を停止するために使用できる一意のトランザクションidを返します。 一意のidとnavigator.geolocation.clearWatch()メソッドを使用して、位置の監視を停止できます。 

 const id = navigator.geolocation.watchPosition（position => {
    console.log（position）
}）

//10秒後に視聴を停止します
setTimeout（（）=> {
  navigator.geolocation.clearWatch（id）
}、10 * 1000）

エラー処理

すべてのエラーを処理するための適切な関数が設定されていない場合、すぐに問題が発生する可能性があります。 人間が読める形式のブロックにエラーを表示するには、場所を表示する関数のいずれかに次のコードを追加する必要があります。 

 関数locationError（error）{
    switch（error.code）{
        ケースエラー。PERMISSION_DENIED：
            「ユーザーがジオロケーションのリクエストを拒否しました。」を返します。
        ケースエラー。POSITION_UNAVAILABLE：
            return"位置情報は現在利用できません。";
        ケースエラータイムアウト：
            "ユーザーの場所のリクエストがタイムアウトしました。"を返します。
        ケースエラー。UNKNOWN_ERROR：
            「不明なエラーが発生しました。」を返します。
    }
}

さらに、これをコンソールでテストできます。 

 navigator.geolocation.getCurrentPosition（position => {
  console.log（position）
}、エラー=> {
	console.error（error）
}）

これにより、 codeプロパティが返されます1はユーザー権限が拒否されたことを意味し、 2はユーザーの位置が現在利用できないことを意味し、 3はリクエストがタイムアウトしたことを意味します。

基本を超えて

基本を理解することは一つのことですが、あなたはいつでもより良くなるように努力することができます。 ジオロケーション機能をさらに強化する方法は次のとおりです。

座標を検索するときのタイムアウト

ユーザーのネットワーク状態が遅い場合は、タイムアウトを使用して、操作の有効期限が切れたことを示すことができます。 タイムアウトを追加するには、次のプロパティを含む3番目のパラメーターを追加する必要があります。

  • 操作が期限切れになるまでのミリ秒数をtimeoutします。
  • maxiumAgeブラウザーによってキャッシュされた位置の最大経過時間（ミリ秒単位）。
  • enableHighAccuracyは、より正確な位置を取得するためにより多くの時間とリソースを消費する可能性がある、自明のtrue/falseオプションです。 
 navigator.geolocation.getCurrentPosition（position => {
  console.log（position）
}、エラー=> {
	console.error（error）
}、{
  タイムアウト：2000、
  maximumAge：20000、
  enableHighAccuracy：true
}）

Googleマップでのユーザーの位置の表示

Google Maps APIを使用して、Googleマップ上でユーザーの位置を表示できます。 

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

ウェブ上でのGoogleMapAPIのデモンストレーションについては、Googleのこのガイドをお勧めします：マップ上のユーザーまたはデバイスの位置を表示します。 このガイドでは、GoogleMapsAPIが統合された基本的なHTMLを見つけることができます。

または、ReactベースのPWAにreact-geolocatedを使用します

気が進まない場合は、 react-geolocatedは、ジオロケーションをReactベースのアプリとすばやく簡単に統合するための優れた方法でもあります。 以下を使用して、既存のPWAの上にモジュールをインストールするだけです。 

 npm install react-geolocated --save

その後、公式のGitHubリンクに記載されている手順に従ってください。ジオロケーションが組み込まれた、機能的なPWAが必要です。

結論

これで、PWAのジオロケーション統合プロセスは終わりです。 チュートリアルのいずれかの部分で難しいと感じた場合は、以下の質問に遠慮なく質問してください。

信頼性の高いソリューションを探しているMagentoの加盟店向けに、完全で費用効果の高いMagentoPWAソリューションをビジネスに提供します。

simicartのMagentoPWAソリューションを探索する