Enabling service workers to tell browsers which pages work offline
What is the Content Indexing API? #
Using a progressive web app means having access to information people care about—images, videos, articles, and more—regardless of the current state of your network connection. Technologies like service workers, the Cache Storage API, and IndexedDB provide you with the building blocks for storing and serving data when folks interact directly with a PWA. But building a high-quality, offline-first PWA is only part of the story. If folks don’t realize that a web app’s content is available while they’re offline, they won’t take full advantage of the work you put into implementing that functionality.
This is a discovery problem; how can your PWA make users aware of its offline-capable content so that they can discover and view what’s available? The Content Indexing API is a solution to this problem. The developer-facing portion of this solution is an extension to service workers, which allows developers to add URLs and metadata of offline-capable pages to a local index maintained by the browser. That enhancement is available in Chrome 84 and later.
Once the index is populated with content from your PWA, as well as any other installed PWAs, it will be surfaced by the browser as shown below.
First, select the Downloads menu item on Chrome’s new tab page.
Media and articles that have been added to the index will be shown in the Articles for You section.
Additionally, Chrome can proactively recommend content when it detects that a user is offline.
The Content Indexing API is not an alternative way of caching content. It’s a way of providing metadata about pages that are already cached by your service worker, so that the browser can surface those pages when folks are likely to want to view them. The Content Indexing API helps with discoverability of cached pages.
See it in action #
The best way to get a feel for the Content Indexing API is to try a sample application.
- Make sure that you’re using a supported browser and platform. Currently, that’s limited to Chrome 84 or later on Android. Go to
chrome://versionto see what version of Chrome you’re running. - Visit https://contentindex.dev
- Click the
+button next to one or more of the items on the list. - (Optional) Disable your device’s Wi-Fi and cellular data connection, or enable airplane mode to simulate taking your browser offline.
- Choose Downloads from Chrome’s menu, and switch to the Articles for You tab.
- Browse through the content that you previously saved.
You can view the source of the sample application on GitHub.
Another sample application, a Scrapbook PWA, illustrates the use of the Content Indexing API with the Web Share Target API. The code demonstrates a technique for keeping the Content Indexing API in sync with items stored by a web app using the Cache Storage API.
#api #service worker
