什么是 PWA？
PWA，即“Progressive Web App”，是一种构建 web 应用的方式，通过一系列的技术手段，使得 web 应用可以像 native 应用一样，提供更好的用户体验。PWA 可以实现以下特性：
- 可以离线使用
- 可以接收推送消息
- 可以被添加到桌面、启动屏幕等
- 可以在安卓系统、iOS 系统等多个平台上使用
PWA 技术由 Google 提出，自 2015 年起成为了一种流行的 web 技术，而到了 2021 年，PWA 已经成为了主流的 web 架构方案。
PWA 定位问题
尽管 PWA 可以在多个平台使用，但是在 iOS 设备上，PWA 会出现一个问题，那就是定位功能失效。在 iOS 设备上，只有 Safari 浏览器和微信浏览器支持 PWA，但是无论在哪个浏览器上，都无法使用定位功能，这是因为苹果禁止了 web 应用使用定位功能。
苹果禁止 web 应用使用定位功能，是为了保护用户的隐私和安全，如果每个 web 应用都可以使用定位功能，那么用户的位置信息就可能泄露给不安全的应用。虽然这样做确实能够保护用户的隐私和安全，但是也给 PWA 开发者带来了很大的困扰。
解决方案
那么，如何在 iOS 设备上解决 PWA 定位问题呢？以下是一些解决方案：
1. 使用原生应用替代
如果您的 web 应用需要使用定位功能，那么可以考虑使用原生应用替代。在您的 PWA 中提供一个按钮，当用户点击该按钮时，打开原生应用并传入参数，然后原生应用就可以使用定位功能。
以下是一个示例代码：
const openMap = () => {
const scheme = getOpenMapScheme(position);
window.location.href = scheme;
};
const getOpenMapScheme = (pos) => {
const base = 'maps://app/';
const {lat, lng} = pos;
return `${base}?center=${lat},${lng}&zoom=13&q=${lat},${lng}`;
};2. 使用浏览器定位功能
如果您的 web 应用只需要获取用户位置信息，那么可以使用浏览器定位功能。在 iOS 设备上，Safari 浏览器和微信浏览器都支持浏览器定位功能，而且不需要用户授权。
以下是一个示例代码：
const getPosition = () => {
return new Promise((resolve, reject) => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
resolve({
lat: position.coords.latitude,
lng: position.coords.longitude,
});
},
(error) => {
reject(error);
}
);
} else {
reject('浏览器不支持定位功能');
}
});
};3. 请求授权使用定位功能
如果您的 PWA 需要使用定位功能，那么可以请求用户授权。在 iOS 设备上，只有用户授权后，web 应用才能使用定位功能。
以下是一个示例代码：
const grantPermission = async () => {
const {state} = await navigator.permissions.query({name: 'geolocation'});
if (state === 'granted') {
return true;
} else if (state === 'prompt') {
const {state} = await navigator.permissions.query({name: 'geolocation'});
return state === 'granted';
} else {
return false;
}
};以上是三种解决方案，具体的选择取决于您的应用需求和设计。无论选择哪种方案，都需要考虑用户体验和安全性。
总结
PWA 作为一种主流的 web 架构方案，可以为用户提供更好的体验。在 iOS 设备上，PWA 无法使用定位功能，这是因为苹果替用户的隐私和安全考虑。解决方案包括使用原生应用替代、使用浏览器定位功能、请求授权使用定位功能等。无论选择哪种方案，都需要考虑用户体验和安全性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65acbdbbadd4f0e0ff652e6a