如何解决我的浏览器是否与此网络应用程序 (pwa) 兼容？ whatwebcando
我创建了许多网络应用程序 (pwa)，每个应用程序都有自己的功能要求。我的不足之处在于我的应用的浏览器兼容性。
目前我正在为 ios 强制使用 Chrome、Edge、三星浏览器和 safari。
如果我查看 https://caniuse.com，它会告诉我，例如，Safari 不支持后台同步，而其他浏览器不支持其他功能。并不是说 ios 上的 chrome 或 edge 支持后台同步或其他浏览器或版本使用。
还有许多浏览器，每个浏览器都有自己的后续版本，每个浏览器中的不同版本支持和不支持特定功能。 .我愿意支持尽可能多的人。
我想做的是创建/或下载一个脚本/插件，当用户登陆应用信息页面时，该脚本将检测浏览器是否支持特定 pwa 所需的所有功能，例如 service-worker .js、地理位置、后台同步、增强现实等，如果有，请显示安装按钮或推荐替代浏览器/版本。
有点像||就像https://whatwebcando.today/的特征检测。 是否已经有可以执行此操作的插件或脚本，还是我必须从头开始创建自己的插件或脚本？
我尝试过搜索一些东西，但我得到的只是在线工具和脚本，比如 feature.js，这是有限制的/受限的，还有其他网站，比如 https://whatwebcando.today/
解决方法
您可以使用 Modernizr 进行功能检测并让用户知道支持哪些功能，然后相应地更新页面。
Modernizr.on('serviceworker',(result) => {
if (result) {
console.log('Service workers are supported.');
} else {
console.log('Service workers are NOT supported.');
}
});
看来我现在可以发布答案了：
这是我的浏览器兼容性测试功能：
var testArr;
function detectFeatures(registration) {
var win = window,doc = document,nav = navigator,scr = screen;
return {
"Installable": "serviceWorker" in nav,"Home Screen": "relList" in HTMLLinkElement.prototype && doc.createElement("link").relList.supports("manifest") && "onbeforeinstallprompt" in win || "BeforeInstallPromptEvent" in win || "setAppBadge" in nav,"Installed Apps": "getInstalledRelatedApps" in nav,"Foreground Detection": "visibilityState" in doc || doc.visibilityState,"Freeze Detection": "onresume" in doc || "onfreeze" in doc,"Resume Detection": "onresume" in doc || "onfreeze" in doc,"Permissions": "permissions" in nav,"Network type": "connection" in nav || "mozConnection" in nav || "webkitConnection" in nav || "msConnection" in nav,"Network speed": "connection" in nav || "mozConnection" in nav || "webkitConnection" in nav || "msConnection" in nav,"Online state": "onLine" in nav,"Background Sync": "SyncManager" in win || "sync" in registration,"Periodic Background Sync": "periodicSync" in registration || "SyncManager" in win || "periodicSync" in win || "periodicSync" in nav,"Background Fetch": "backgroundFetch" in registration,"Task scheduling": "Notification" in win && "showTrigger" in Notification.prototype || Notification.prototype.showTrigger || "taskScheduler" in registration || "alarms" in nav || "periodicSync" in registration,"Notifications": "Notification" in win || "showNotification" in registration,"Push Messages": "PushManager" in win || "pushNotification" in win.safari || win.safari.pushNotification || "pushManager" in registration,"Offline Capabilities": "caches" in win,"Cache Support": "caches" in win,"Offline Storage": "localStorage" in win || "sessionStorage" in win,"Storage": "storage" in nav && "StorageManager" in win,"Persistent Storage": "storage" in nav && "persist" in nav.storage || "storage" in nav && "persisted" in nav.storage,"Storage Quotas": "storage" in nav && "estimate" in nav.storage,"IndexedDb": "indexedDB" in win || "mozIndexedDB" in win || "webkitIndexedDB" in win || "msIndexedDB" in win,"File Access": "File" in win || "chooseFileSystemEntries" in win,"File Api": "File" in win && "FileReader" in win && "FileList" in win && "Blob" in win || "chooseFileSystemEntries" in win,"Clipboard": "clipboard" in nav || "ClipboardEvent" in nav || "oncut" in doc || "onpast" in doc || "oncopy" in doc,"Pointing Device Apadtation": win.matchMedia("(pointer: none),(pointer: coarse),(pointer: fine)").matches,"Navigation Preload": "navigationPreload" in registration,"Contacts": "contacts" in nav || "mozContacts" in nav,"SMS": "messaging" in nav,"Geolocation": "geolocation" in nav,"Geofencing": "GeofenceManager" in win,"NDEFReader": "NDEFReader" in win,"Device Memory": "deviceMemory" in nav,"Touch Gestures": "ontouchstart" in win || "onpointerdown" in win,"Idle Detection": "IdleDetector" in win,"Presentation Features": "presentation" in nav || "PresentationRequest" in win,"Fullscreen": "requestFullscreen" in doc.documentElement || "mozRequestFullScreen" in doc.documentElement || "webkitRequestFullscreen" in doc.documentElement || "msRequestFullscreen" in doc.documentElement,"Screen Orientation": "orientation" in scr || "mozOrientation" in scr || "msOrientation" in scr,"Orientation Lock": "orientation" in scr || "mozOrientation" in scr || "msOrientation" in scr,"Wake lock": "keepAwake" in scr || "wakeLock" in nav,"Device Position": "DeviceOrientationEvent" in win || "AbsoluteOrientationSensor" in win || "RelativeOrientationSensor" in win,"Device Motion": "DeviceMotionEvent" in win || "LinearAccelerationSensor" in win && "Gyroscope" in win,"Web Share": "share" in nav,"File Share": "share" in nav && "canShare" in nav,"Battery Status": "getBattery" in nav || "battery" in nav,"Vibrate": "vibrate" in nav,"USB": "usb" in nav || nav.usb,"Serial Port": "serial" in nav || nav.serial,"Ambient Light": "ondevicelight" in win || "AmbientLightSensor" in win,"Bluetooth": "bluetooth" in nav,"Midi devices": "requestMIDIAccess" in nav,"Proximity Sensors": "ondeviceproximity" in win || "onuserproximity" in win || "ProximitySensor" in win,"GravitySensor": "GravitySensor" in win,"Magnetometer": "Magnetometer" in win,"Gyroscope": "Gyroscope" in win,"Accelerometer": "Accelerometer" in win,"Linear Acceleration Sensor": "LinearAccelerationSensor" in win,"Media Capabilities": "mediaCapabilities" in nav,"mediaDevices": "mediaDevices" in nav || "getUserMedia" in nav || "webkitGetUserMedia" in nav || "mozGetUserMedia" in nav || "msGetUserMedia" in nav,"Camera": "mediaDevices" in nav || "getUserMedia" in nav || "webkitGetUserMedia" in nav || "mozGetUserMedia" in nav || "msGetUserMedia" in nav,"Media Session": "mediaSession" in nav,"Image Capture": "ImageCapture" in win || "ImageCapture" in nav,"Recording Media": "MediaRecorder" in win || "MediaRecorder" in nav,"Real-Time Communication webrtc": "RTCPeerConnection" in win || "webkitRTCPeerConnection" in win,"Audio": "mediaDevices" in nav || "getUserMedia" in nav || "webkitGetUserMedia" in nav || "mozGetUserMedia" in nav || "msGetUserMedia" in nav,"Audio Capture": "mediaDevices" in nav || "getUserMedia" in nav || "webkitGetUserMedia" in nav || "mozGetUserMedia" in nav || "msGetUserMedia" in nav,"Video": "mediaDevices" in nav || "getUserMedia" in nav || "webkitGetUserMedia" in nav || "mozGetUserMedia" in nav || "msGetUserMedia" in nav,"Video Capture": "mediaDevices" in nav || "getUserMedia" in nav || "webkitGetUserMedia" in nav || "mozGetUserMedia" in nav || "msGetUserMedia" in nav,"Augmented Reality": "getVRDisplays" in nav || "xr" in nav,"Virtual Reality": "getVRDisplays" in nav || "xr" in nav,"Speech Recognition": "SpeechRecognition" in win || "webkitSpeechRecognition" in win,"Barcode scanner": "BarcodeDetector" in win,"Facial recognition": "FaceDetector" in win,"Text Detection": "TextDetector" in win,"Payment Request": "PaymentRequest" in win,"Payment Handler": "paymentManager" in registration,"Credential Management": "credentials" in nav &&
"preventSilentAccess" in nav.credentials &&
("PasswordCredential" in win || "FederatedCredential" in win)
};
};
function setCompatibilityArray(browserFeatures) {
for (const feature in browserFeatures) {
if (!browserFeatures.hasOwnProperty(feature)) {
continue;
}
var nf = feature.toString().replace(/[^A-Za-z0-9]/g,'').toLowerCase();
var val = browserFeatures[feature] ? "1" : "0";
testArr[nf] = {
'name': '' + feature + '','value': val
};
}
_set('browserFeature',testArr,1);
//here use console.log(testArr); to get the variable names for your requirements array
};
function getFeatures() {
testArr = _get('browserFeature',1);
if (testArr == 0) {
if ("serviceWorker" in navigator) {
testArr = {};
return navigator.serviceWorker.register("service-worker.js")
.then((registration) => {
const browserFeatures = detectFeatures(registration);
setCompatibilityArray(browserFeatures);
});
}
}
}
使用方法： 在 document.load || .准备好放置这个函数，getFeatures(); _get() 和 _set() 函数获取和设置数组 testArr 的本地存储变量，该变量包含浏览器的所有特征以及该特征的真假。
在 testArr 中，键名称是连接的功能名称，并且在小写中，您可以使用这些键名称创建自己的“必需功能”数组。
像这样：
var canwork = true;
var permissionReqArr = ['one','two','three','four','five'];
// permissionReqArr contains the variables requirements for app to work,you can get this from the getFeatures function by using console.log() on the result testArr.
然后：
for(var i = 0; i < permissionReqArr.length; i++){
var check = testArr[permissionReqArr[i]];
if(check == false || check == 0){
canwork = false;
}
}
if(canwork == false){
alert('your browser is not compatible,you will not be able to download/install this app');
}
如果这对你有帮助，请投票给我，我需要积分..
注意事项： 如果您不想实际安装 service-worker.js，请在 service-worker.js 文件中使用以下代码：
self.addEventListener("install",()=>{}),self.addEventListener("activate",()=>self.clients.claim());
//不会在浏览器中安装任何东西只返回注册事件来捕获浏览器的其他功能
此外，如果未设置功能 localstorage 项，则此函数只会调用 service-worker.. 如果您确实有 service worker，请确保从上面删除此块..
_set 和 _get 函数返回零，如果未设置 localstorage 项，您可以为此创建自己的函数..
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
