Advanced PWA features that provide access to your hardware APIs. Making use of Media Capture API, the Geolocation API and Background Sync
In this tutorial, I will discuss advanced PWA features that provide access to your hardware APIs. We are going to build an app for making selfies with the Media Capture API and posting selfies with the BackgroundSync Api.
If you’re looking to build a powerful PWA that takes advantage of the hardware on a device, things are only going to get better. In this article, I will discuss some PWA features that provide access to your hardware APIs:
- Media Capture API, to take a picture (in this article called a “selfie”) with your camera. https://developer.mozilla.org/en-US/search?q=Media_Streams_API
- Geolocation API, to determine the location of your selfie. https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
- and the commonly used Background Sync API, to put the selfies in a queue or database in the meantime, so that the user can also send a selfie to the server if it is not connected. https://developers.google.com/web/updates/2015/12/background-sync
Requirements
To start with this tutorial you must install the following:
- Stable node version 8.9 or higher (https://nodejs.org/en/download/)
- Git
Project Setup
As a starting point for the tutorial, clone this Github repository:
git clone https://github.com/petereijgermans11/progressive-web-app
Then in your terminal move to the following directory:
cd pwa-article/pwa-app-native-features-init
and install the dependencies through:
npm i && npm start
Open your app on: http:// localhost:8080
#pwa #api #web-development #developer
