2018年：手机休眠时如何运行HTML5网站并执行ECMAScript发送定位？

Great question! Back in 2018, with PWAs gaining traction, Open Web Apps still in play, and Apple expanding web support, there were a few solid approaches to pull this off. Let’s break them down:

1. Progressive Web Apps (PWAs) with Service Workers + Background Sync & Geolocation API #

By 2018, Chrome and other Chromium-based browsers had robust support for Service Workers, Background Sync, and background Geolocation. Here’s how the workflow would work:

• Service Workers: These run independently of your app’s main tab, even when the device is asleep (though OSes throttle them to save battery). They’re perfect for handling background tasks.
• Track & Store Locations: Use navigator.geolocation.watchPosition() in your main app to catch location updates. Save each new location to IndexedDB—Service Workers can access this database to retrieve data later.
• Background Sync Trigger: Register a sync event in your Service Worker. When the device regains connectivity (even if it wakes briefly from sleep), the sync event fires, pulls stored locations from IndexedDB, and sends them to your server.

Example code snippets:

Frontend (Main App) #

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  navigator.serviceWorker.register('/sw.js')
    .then(async reg => {
      console.log('Service Worker registered successfully');
      
      // Start watching location changes
      navigator.geolocation.watchPosition(async (position) => {
        const location = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
          timestamp: position.timestamp
        };
        
        // Save location to IndexedDB
        const db = await openDB('locationStore', 1, {
          upgrade(db) {
            db.createObjectStore('locations', { autoIncrement: true });
          }
        });
        await db.add('locations', location);
        
        // Request a background sync to send data
        await reg.sync.register('send-locations');
      }, (err) => {
        console.error('Geolocation failed:', err);
      }, {
        enableHighAccuracy: true,
        maximumAge: 0,
        timeout: 5000
      });
    });
}

Service Worker (sw.js) #

self.addEventListener('sync', (event) => {
  if (event.tag === 'send-locations') {
    event.waitUntil(
      openDB('locationStore', 1).then(async (db) => {
        const locations = await db.getAll('locations');
        if (!locations.length) return;
        
        // Send data to your server
        await fetch('/api/submit-location', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(locations)
        });
        
        // Clear stored data after successful send
        await db.clear('locations');
      })
    );
  }
});

Note: On Android, you’ll need to request the ACCESS_BACKGROUND_LOCATION permission, and users must enable background refresh for your PWA. OS-level battery savers might still throttle tasks, so test accordingly.

2. Open Web Apps (Firefox OS/Gecko Platforms) #

For devices running Firefox OS or Gecko-based browsers, Open Web Apps offered dedicated background script support in 2018. This was a straightforward option where supported:

• Manifest Setup: Add a background section to your app’s manifest to define a script that runs independently of the main UI.
• Background Location Tracking: The background script can use navigator.geolocation.watchPosition() directly to track location and send data, even when the device is asleep (as long as the app has the right permissions).

Example manifest snippet:

{
  "name": "Background Location Tracker",
  "version": "1.0",
  "description": "Sends location data in the background",
  "background": {
    "scripts": ["background-task.js"]
  },
  "permissions": ["geolocation", "https://your-server-url.com/"]
}

Background Script (background-task.js) #

navigator.geolocation.watchPosition((position) => {
  const payload = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };
  
  // Send data to server
  fetch('https://your-server-url.com/api/location', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });
}, (error) => {
  console.error('Background geolocation error:', error);
}, {
  enableHighAccuracy: false,
  maximumAge: 30000, // 30 seconds between updates
  timeout: 10000
});

Caveat: By 2018, Firefox OS was already declining, so this approach only worked on specific devices—but it was reliable where supported.

3. iOS-Specific Workarounds (2018) #

Apple rolled out PWA support in iOS 11.3 (2018), but background capabilities were more restricted than on Android. Here’s what you could do:

• PWA with Background App Refresh: Users had to enable "Background App Refresh" for your PWA in iOS Settings. With this on, navigator.geolocation.watchPosition() might run in the background for short windows, especially if the app was recently used.
• Native Wrapper with WKWebView: If you could wrap your web app in a native iOS app, you could use Apple’s Core Location framework to handle persistent background location updates, then pass the data to your ECMAScript code via a JavaScript bridge. This was more reliable but required a native component.

Important: iOS had strict battery rules in 2018—background location updates were only allowed for apps with a clear use case (like navigation), and frequent updates would drain battery quickly.

Key Considerations for All Approaches #

• Permissions: You must explicitly request foreground and background location permissions from users. Browsers/OSes will block background access if users don’t grant it.
• Battery Life: Balance location accuracy and update frequency to avoid draining the battery unnecessarily.
• Cross-Browser Support: In 2018, Chrome led with PWA background capabilities, Firefox supported Open Web Apps, and iOS had limited but growing PWA support. Test across target platforms.

内容的提问来源于stack exchange，提问作者Fla