Article Categories

Selected Reading

How does mobile safari determine when to prompt the user to share location in HTML?

HTML Web Development Front End Technology

Mobile Safari determines when to prompt the user to share location based on specific browser behaviors and API usage patterns. The location prompt appears when your web application calls the Geolocation API methods for the first time on a domain.

When Safari Shows Location Prompts

Safari displays the location permission prompt in the following scenarios −

First API call − When navigator.getCurrentPosition() or navigator.watchPosition() is called for the first time on a domain.
User-initiated action − The request must be triggered by a user gesture (click, touch) for security reasons.
HTTPS requirement − Location services only work on secure connections (HTTPS) in modern Safari versions.
Permission reset − If the user previously denied permission but later resets site permissions.

Syntax

Following is the syntax for requesting current position −

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

Following is the syntax for watching position changes −

navigator.geolocation.watchPosition(successCallback, errorCallback, options);

Basic Location Request Implementation

Here is how to implement location tracking that respects Safari's prompting behavior −

Example − First-time Location Request

<!DOCTYPE html>
<html>
<head>
   <title>Safari Location Prompt</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Location Tracking Demo</h2>
   <button onclick="requestLocation()">Get My Location</button>
   <p id="status">Click the button to request location access.</p>
   <div id="coordinates"></div>

   <script>
      let isFirstTime = true;
      let watchId = null;

      function requestLocation() {
         if (!navigator.geolocation) {
            document.getElementById('status').textContent = 'Geolocation not supported';
            return;
         }

         if (isFirstTime) {
            document.getElementById('status').textContent = 'Requesting location permission...';
            
            navigator.geolocation.getCurrentPosition(
               function(position) {
                  document.getElementById('status').textContent = 'Location access granted!';
                  displayCoordinates(position);
                  isFirstTime = false;
                  
                  // Start watching position after first successful request
                  startWatching();
               },
               function(error) {
                  document.getElementById('status').textContent = 'Location access denied: ' + error.message;
               }
            );
         } else {
            startWatching();
         }
      }

      function startWatching() {
         if (watchId === null) {
            watchId = navigator.geolocation.watchPosition(
               displayCoordinates,
               function(error) {
                  document.getElementById('status').textContent = 'Watch error: ' + error.message;
               }
            );
            document.getElementById('status').textContent = 'Now watching position changes...';
         }
      }

      function displayCoordinates(position) {
         const coords = document.getElementById('coordinates');
         coords.innerHTML = `
            <strong>Latitude:</strong> ${position.coords.latitude}<br>
            <strong>Longitude:</strong> ${position.coords.longitude}<br>
            <strong>Accuracy:</strong> ${position.coords.accuracy} meters
         `;
      }
   </script>
</body>
</html>

This example shows the proper pattern where Safari will prompt for location permission only when the user clicks the button for the first time.

Conditional Location Tracking

For applications that need to track location only when users are in specific areas, implement conditional checking −

Example − Area-based Location Tracking

<!DOCTYPE html>
<html>
<head>
   <title>Conditional Location Tracking</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Area-Based Tracking</h2>
   <button onclick="checkLocation()">Check if in Target Area</button>
   <p id="status">Click to check your location</p>
   <div id="result"></div>

   <script>
      let isFirstTime = true;
      let watchId = null;
      
      // Define target area (example: New York City area)
      const targetArea = {
         minLat: 40.7000,
         maxLat: 40.8000,
         minLng: -74.0200,
         maxLng: -73.9000
      };

      function checkLocation() {
         if (!navigator.geolocation) {
            document.getElementById('status').textContent = 'Geolocation not supported';
            return;
         }

         if (isFirstTime) {
            document.getElementById('status').textContent = 'Checking location for first time...';
            
            navigator.geolocation.getCurrentPosition(
               function(position) {
                  isFirstTime = false;
                  
                  if (isInTargetArea(position.coords)) {
                     document.getElementById('status').textContent = 'You are in the target area!';
                     document.getElementById('result').innerHTML = `
                        <p style="color: green;">Starting continuous tracking...</p>
                        <p>Lat: ${position.coords.latitude.toFixed(4)}</p>
                        <p>Lng: ${position.coords.longitude.toFixed(4)}</p>
                     `;
                     startContinuousTracking();
                  } else {
                     document.getElementById('status').textContent = 'You are outside the target area.';
                     document.getElementById('result').innerHTML = `
                        <p style="color: orange;">No continuous tracking needed.</p>
                        <p>Lat: ${position.coords.latitude.toFixed(4)}</p>
                        <p>Lng: ${position.coords.longitude.toFixed(4)}</p>
                     `;
                  }
               },
               function(error) {
                  document.getElementById('status').textContent = 'Location error: ' + error.message;
               }
            );
         } else {
            startContinuousTracking();
         }
      }

      function isInTargetArea(coords) {
         return coords.latitude >= targetArea.minLat &&
                coords.latitude <= targetArea.maxLat &&
                coords.longitude >= targetArea.minLng &&
                coords.longitude <= targetArea.maxLng;
      }

      function startContinuousTracking() {
         if (watchId === null) {
            watchId = navigator.geolocation.watchPosition(
               function(position) {
                  document.getElementById('result').innerHTML = `
                     <p style="color: blue;">Tracking active...</p>
                     <p>Lat: ${position.coords.latitude.toFixed(4)}</p>
                     <p>Lng: ${position.coords.longitude.toFixed(4)}</p>
                     <p>Time: ${new Date().toLocaleTimeString()}</p>
                  `;
               },
               function(error) {
                  document.getElementById('status').textContent = 'Watch error: ' + error.message;
               }
            );
         }
      }
   </script>
</body>
</html>

This implementation first checks if the user is in the target area before starting continuous position tracking, which is more efficient and user-friendly.

Permission Management

Safari manages location permissions at the domain level. Once a user grants or denies permission, Safari remembers this choice and will not prompt again unless the user manually resets the permission in browser settings.

Example − Checking Permission Status

<!DOCTYPE html>
<html>
<head>
   <title>Check Location Permission</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Location Permission Status</h2>
   <button onclick="checkPermission()">Check Current Permission</button>
   <div id="permissionStatus"></div>

   <script>
      function checkPermission() {
         if (!navigator.geolocation) {
            document.getElementById('permissionStatus').innerHTML = 
               '<p style="color: red;">Geolocation is not supported by this browser.</p>';
            return;
         }

         // Try to get position to determine current permission status
         navigator.geolocation.getCurrentPosition(
            function(position) {
               document.getElementById('permissionStatus').innerHTML = `
                  <p style="color: green;"><strong>Permission: GRANTED</strong></p>
                  <p>Location access is allowed for this domain.</p>
                  <p>Current position: ${position.coords.latitude.toFixed(4)}, ${position.coords.longitude.toFixed(4)}</p>
               `;
            },
            function(error) {
               let message = '';
               switch(error.code) {
                  case error.PERMISSION_DENIED:
                     message = 'Permission: DENIED - User denied the request for geolocation.';
                     break;
                  case error.POSITION_UNAVAILABLE:
                     message = 'Permission: GRANTED - Location information is unavailable.';
                     break;
                  case error.TIMEOUT:
                     message = 'Permission: GRANTED - Request timed out.';
                     break;
                  default:
                     message = 'Permission: UNKNOWN - An unknown error occurred.';
                     break;
               }
               document.getElementById('permissionStatus').innerHTML = 
                  `<p style="color: orange;"><strong>${message}</strong></p>`;
            },
            { timeout: 10000 }
         );
      }
   </script>
</body>
</html>

This example demonstrates how to check the current permission status by attempting to get the user's location and handling the various error states.

Best Practices for Safari Location Prompts

Follow these guidelines for optimal user experience with location prompts in Safari −

User context − Always provide clear explanation of why location access is needed before requesting permission.

Samual Sam

Updated on: 2026-03-16T21:38:53+05:30

197 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next