With this little project you can easily check which WebAPIs are currently available on your device. Just open the page on the device you want to test and voilà.
Feedback, suggestions, and contributions are very welcome, just get in touch on 𝕏 .
Thanks to the amazing idea and work by Paolo Ricciuti you can share your device's WebAPI capabilities via magic link. Just open the test page and click share. Anyone opening the link will see the exact same configuration that you see on your device. This can be very useful for debuging purposes. If something works on your development device but doesn't work on a user's device just ask them to share a link and you can instantly confirm or rule out any issues related to WebAPIs.
There is no guarantee that the above checks work correctly. If you find any bugs, please create an issue in the GitHub repo. Please also note that some browsers (e.g. Brave ) might not always report API support correctly and signal for certain APIs that they are available when they are actually not.
WebAPIcheck is a Progressive Web App (PWA) , meaning you can install it on your mobile- and/or desktop device to get a better user experience.
What is a WebAPI?
WebAPIs are a collection of specifications defined by W3C and others that allow web applications to interact with device hardware and browser capabilities beyond simple script execution, e.g. storage, service workers, etc.
Why are WebAPIs important?
Currently the situation is the following. If you want to deliver the optimal mobile experience to your users you have to go down the native route and build a native Android app and a native iOS app. This is a lot of work and on top of that Google and Apple act as gatekeepers, dictating which apps can and can not be published in their app stores. Plus, if you want to charge for your app, they take a hefty cut and force you to use their own payment systems, which adds a lot of accounting as well.
Therefore, it is in the interest of users and developers that web apps reach parity with native apps both in performance as well as capability. The performance topic is for another day, but on the capability side WebAPIs are here to bridge the gap.
Take a look at my post Let's build a Native(-like) Web App (NWA) for more info on that topic.
What is a User Interaction and why is it sometimes required?
A user interaction is usually a click or its accessibility equivalent. This requirement can be really frustrating if you are a developer with good conscience and just want to deliver the best UX for your users, but it is also important for web apps to be safe and to protect users from bad actors. For instance, imagine a website would start tracking your location in the background without your knowledge.
Why are special Permissions required for certain WebAPIs?
Some APIs directly access critical device hardware and data or expose powerful UI interfaces, e.g. Geolocation API, Bluetooth API, and Notifications API. For these features the browser takes control of managing access permissions so that users can easily manage and revoke them. Features that require permissions will trigger a popup asking for them when used. There is also a dedicated Permissions API that gives you better control over the permissions UX.
What is a Secure Context?
A secure context is a Window or Worker for which certain minimum standards of authentication and confidentiality are met. Resources delivered locally on http://127.0.0.1, http://localhost, http://*.localhost, and file:// are generally considered secure. For non-local resources to be considered secure they need to be served over https:// or wss:// and the security properties of the network channel they're delivered through must not be considered deprecated. You can find more information on Secure Contexts in the W3C spec and on the Secure Contexts page on MDN.
What are Web Workers?