Browser APIs to create progressive web apps

Freddy Montes - Frontend Developer, Designer and TeacherFreddy Montes|

Progressive web apps are increasingly supported by technology giants such as Microsoft who allow and encourage you to publish them in their app stores.

The web platform contains a series of APIs that allow you to create applications that provide user experiences closer and closer to native applications.

In this blog post I will list some of the APIs needed to build successful web apps.

Content available offline

Load the content, cache it and use it while the user has no internet connection, this can be achieved with:

  • Workbox (the library) has a caching recipe audio and video.
  • With the Cache API you can cache HTTP Request and Responses objects

Download information in the background

You can delegate to the browser, which detects when it is online and starts or resumes downloading resources with the Background Fetch API.

Content sharing

Not only can you share content from your PWA with the Web Share API, but you can also receive content in your web app with the Web Share Target API.

Refreshing web app content in the background

You can keep the content fresh in the "background" using the Periodic Background Sync API.

Synchronize the state with the server

And what happens when the user is offline and makes some change, you need to allow that and you can delegate, keep the synchronization with the Background Sync API.

Controlling the app with the multimedia keys

The multimedia keys are supported by the Media Session API.

This includes keyboard keys, headphone buttons, smartwatches, etc. It also allows to take advantage of OS media controls, such as widgets.

Integrate with local files

You can read and write files on the system using the File System Access API, of course this is going to require permissions.

Quick animations

There are many ways to make animations on the Web some ways include:

Content outside the PWA

With the Content Index API you can tell the browser which PWA content will "surface" outside the main app.


So we have two APIs Push API and Notification Triggers API.


Yes, those "uncomfortable" little balls on the icon can be put on the icon of your progressive web app with the Push API.


Progressive web apps don't solve everything by far, but the web as a platform keeps improving and providing tools that allow those of us who work in technology to provide good solutions in a fast efficient way.


Thank your read this blog post. Any feedback or question hit me up on Twitter.

Tweet Me

Copyright © 2023. Design and code by myself with Next.js. Fork it and create yours