Web 应用程序未请求移动网站上的 LOCATION 权限

Question

我正在构建一个非常简单的应用程序，需要访问者的地理位置。我为此使用了 React navigator geoLocator。我期望的行为是在授予权限时显示 GPS 坐标，并在未授予或撤销位置权限时显示自定义“需要位置”屏幕。它在桌面上完美运行，但是当我在移动设备上访问网站时，永远不会请求位置权限。

这是我获取位置的自定义挂钩：

import { useState, useEffect } from "react";

const useGeoLocation = () => {
    const [location, setLocation] = useState({
        loaded: false,
        coordinates: { lat: "", lng: "" },
    });

    const onSuccess = (location) => {
        setLocation({
            loaded: true,
            coordinates: {
                lat: location.coords.latitude,
                lng: location.coords.longitude,
            },
        });
    };

    const onError = (error) => {
        setLocation({
            loaded: true,
            error: {
                code: error.code,
                message: error.message,
            },
        });
    };

    useEffect(() => {
        // if the browser does not support geo-location (unlikely)
        if (!("geolocation" in navigator)) {
            onError({
                code: 0,
                message: "Geolocation not supported",
            });
        }

        navigator.geolocation.getCurrentPosition(onSuccess, onError);
    }, []);

    return location;
};

export default useGeoLocation;

然后这是我的 App.js：

import './App.css';
import useGeoLocation from './custom_hooks/useGeolocation';
import CircularProgress from '@mui/material/CircularProgress';
import NoLocation from './components/NoLocation'

function App() {

  const location = useGeoLocation();

  return (
    <div className="App">
      {location.loaded ? <div>{location.coordinates ? JSON.stringify(location.coordinates) : <NoLocation />}</div> : <CircularProgress style={{color: '#d500f9'}} />}
    </div>
  );
}

export default App;

我不完全确定为什么当我从移动设备访问该网站时它无法正常工作

问题：在移动设备上进行测试的正确方法是什么，以便我无需部署应用程序即可检索位置？

Answer 1

我在桌面上的 Chrome、Android 上的 Brave 和 iPhone 上的 Safari 上测试了您的代码，它工作得很好 - 我看到权限正确弹出。但是，前提是设备上的定位服务事先启用。

您也可以查看this参考。

Answer 2

我观察到，Chrome 移动浏览器不允许在没有 HTTPS 层的网站上启用定位，因为它会将敏感信息暴露给攻击者。 因此，对于 localhost，它在 http 上运行，因此不允许启用该位置。但codesandbox有https层，因此它允许网站请求位置。 不知道我的回答是否正确，如有错误请指正:)