Browser APIs to create progressive web apps
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.
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.
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.