The Future of Web Development: Unlocking Native-Like Experiences

What Are APIs?

An API, or application programming interface, is a set of protocols and definitions that enable communication between software systems. It’s a set of instructions that allows different applications to access each other’s features or data.

Missing APIs Holding Us Back

While progressive web apps (PWAs) have bridged the gap between web and mobile apps, there are still several APIs missing from the web that prevent us from achieving true parity with native apps.

Unlocking Native-Like Experiences

File System API: Unlocking Access to User Files

The file system API enables applications to interact with files on a user’s device, including photos, videos, and texts. This API allows apps to read, modify, and save files with the user’s permission.

navigator.storage.getDirectory().then(rootDirEntry => {
  rootDirEntry.getFile('example.txt', { create: true })
   .then(fileEntry => {
      // File created or retrieved
    });
});

Contacts API: Accessing User Contacts

The contacts API allows applications to access a user’s contacts, enabling features like displaying, editing, and selecting contacts.

navigator.contacts.select()
 .then(contacts => {
    // Handle selected contacts
  });

Biometrics API: Secure Authentication

The biometrics API helps apps securely identify users and authorize requests to their personal data using authentication mechanisms like face or fingerprint recognition.

navigator.credentials.get({ publicKey: true })
 .then(credentials => {
    // Authenticate user
  });

Geofencing API: Mapping Geographic Boundaries

The geofencing API allows applications to map geographic boundaries and trigger events when the device enters or leaves these areas.

navigator.geolocation.watchPosition(position => {
  // Handle geofencing events
});

Messaging API: Accessing SMS and MMS

The messaging API allows applications to access the messaging system on a device, enabling features like browsing, creating, and managing messages.

navigator.messaging.requestPermission()
 .then(permission => {
    // Access messaging system
  });

Near-Field Communication (NFC) API: Wireless Communication

The NFC API gives apps the ability to detect, read, and write to nearby NFC devices, enabling wireless communication between two devices at close proximity.

navigator.nfc.beginSession()
 .then(session => {
    // Handle NFC communication
  });

Wake Lock API: Preventing Screen Dimming and Locking

The wake lock API allows apps to communicate with the device to stay on, preventing screen dimming and locking when an application needs it to continue running.

navigator.wakeLock.request('screen')
 .then(wakeLock => {
    // Prevent screen dimming and locking
  });

Bluetooth API: Wireless Data Exchange

The Bluetooth API enables devices to wirelessly exchange data with other Bluetooth devices, providing access to Bluetooth functionality.

navigator.bluetooth.requestDevice()
 .then(device => {
    // Establish Bluetooth connection
  });

Sensors API: Accessing Device Sensors

The sensors API provides access to device sensors like accelerometers, gyroscopes, pedometers, magnetometers, and barometers.

navigator.sensors.getSensor('accelerometer')
 .then(sensor => {
    // Read sensor data
  });

The Future of Web Development

As we continue to develop modern APIs for the web, the gap between web and mobile apps will continue to shrink. The APIs mentioned above are just a few examples of the many capabilities that are still missing from the web.

Learn more about web APIs by checking out the MDN Web API docs or exploring proposed capabilities on Google’s project Fugu.

What’s Next?

Which API do you think has the most potential to revolutionize the web? Share your thoughts in the comments!