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 on Desktop, Brave on Android和Safari on iPhone上测试了你的代码，它工作得很好-我看到权限正确弹出。但是，只有当设备上的位置服务在之前被启用时.

你也可以看到这个参考