DataFlex Custom Components for Web APIs.
Contains DataFlex implementations of:
- Broadcast Channel API
- Clipboard API
- Contact Picker API
- Credential Management API
- EyeDropper API
- Fullscreen API
- MediaStream Recording API
- Network Information API
- Notifications API
- Page Visibility API
- Screen Wake Lock API
- Sensor APIs
- Vibration API
- Web Share API
- Web Storage API
Download either just the prebuilt custom components (WebAPIsComponents.zip) or the entire demo workspace with prebuilt components (WebAPIsDemo.zip) from the Releases page.
Download or clone the source code from GitHub, install NodeJS, and build the components with
> npm ci
> npm run build
Copy AppHtml/Custom and the AppSrc/*API.pkg files to your workspace. If you don't have the AppHtml/Custom folder, see "How to get it" above.
Include these two lines in your index.html (if your application only runs on fairly modern browsers, you can probably omit the first one):
<script src="https://unpkg.com/core-js-bundle/minified.js"></script>
<script src="Custom/index.js"></script>
NOTE that some of these APIs require a secure context, which basically means they only work when page is accessed using https, or from localhost! Those APIs are marked with a padlock icon in the demo application.
I use recent ECMAScript features in the JavaScript source code for these custom components. When running on a major up-to-date evergreen browser (like Google Chrome, Microsoft Edge or Mozilla Firefox) these features work "out of the box". So if you're sure your application only runs on browsers like that, you can use these components without the core-js script include.
If you're not sure, or you explicitly support older browsers, including core-js will polyfill any missing features that can be polyfilled. YMMV but this could allow you to use components that would otherwise fail. Including it only adds a ~100 KB download to your page, and does not replace features that are natively supported.
If you do use core-js, please support that project!
Including core-js will not implement API's that are not natively supported in a given browser. Always check the API pages linked above for browser support, and always check the pbIsSupported web property of each component at runtime before using it.