is my browser compatible for this web app (pwa)? whatwebcando - progressive-web-apps

Question

Ive created a number of web apps (pwa's) each has its own feature requirements. Where i am falling short is with browser compatibility for my apps.
At the moment i am forcing the use of Chrome, Edge, Samsung browser and safari for ios.
If i check at https://caniuse.com it tells me, for example, Safari does not support background sync, and other browser's don't support other features. It does not say that chrome or edge on ios supports background sync or alternative browsers or versions to use.
Also there are many browsers each with their own following and different versions within each browser which do and do not support specific features. . I would like to support as many as possible.
What i would like to do is create/or download a script/plugin that when the user lands on the apps info page, the script will detect if the browser supports all the features required by the specific pwa, like service-worker.js, Geolocation, background sync, augmented reality, etc etc, and if it does, show the install button or recommend an alternative browser/version.
Something like||Exactly like the feature detection of https://whatwebcando.today/.
Is there a plugin or script already that can do this OR do i have to create my own from scratch?
I have tried searching for something, but all I'm getting is online tools and scripts like feature.js, which is limiting/limited and other websites like https://whatwebcando.today/

Answer 1

You could use Modernizr to do the feature detection and let the user know what features are supported, then update the page accordingly.
Modernizr.on('serviceworker', (result) => {
if (result) {
console.log('Service workers are supported.');
} else {
console.log('Service workers are NOT supported.');
}
});

Answer 2

It seems i am allowed to post answers now:
here is my test function for browser compatibility:
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', 0, 1);
if (testArr == 0) {
if ("serviceWorker" in navigator) {
testArr = {};
return navigator.serviceWorker.register("service-worker.js")
.then((registration) => {
const browserFeatures = detectFeatures(registration);
setCompatibilityArray(browserFeatures);
});
}
}
}
how to use it:
on document.load || .ready place this function, getFeatures();
the _get() and _set() functions gets and sets a local storage variable of the array testArr which contains all the features of the browser and whether the feature is true or false.
in the testArr the key name is the feature names that are joined and in lowercase, you can create your own "required features" array using these key names.
like so:
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.
then:
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');
}
if this helps you in anyway please vote me up, i need the points..
notes:
if you don't want to actually install the service-worker.js, then use this code inside your service-worker.js file:
self.addEventListener("install",()=>{}), self.addEventListener("activate", ()=>self.clients.claim());
//Will not install anything in the browser only return the registration event to capture other features of the browser
also this Function will only call the service-worker if the features localstorage item is not set.. if you do have a service worker, then make sure to remove this block from the above..
the _set and _get functions return zero, if the localstorage item is not set, you can make your own function for this..