Skip ⬇

Navigation capturing for PWAs

By Dibyajyoti Pal (Google) and the Web Applications Working Group

Navigation capturing in Progressive Web Apps (PWAs) offers a significant performance advantage by eliminating the delay associated with opening a new browser tab and loading a page. This results in a faster and more seamless user experience, as seen with applications like Google Chat, which substantially reduced navigation latency by avoiding new app launches. By handling navigation within the app itself, PWAs can feel more responsive and integrated, much like a native application. For more details, please refer to https://developer.chrome.com/docs/capabilities/pwa-navigation-management

Skip ⬇

Video

Transcript

Here is a demo of what navigation capturing  enables.

I'm going to use Google Chat for this demo.

Let's see what happens when we  click on a link to chat.

As you can see, a new chat tab opens.

What happens  if I click on a link again?

Well, another chat tab opens.

That's  not fun.

Soon you're going to run out of tabs to keep track of.

What if you  could sort of reuse the existing tab or the container over and over?

This is what  navigation capturing enables.

Let's see what happens when we click the link now that  chat is installed as a PWA.

As you can see, it opens a new chat window.

And if I click  on a link again, it reuses this existing chat window.

But does this work if we can open  chat as a new tab in the browser?

Let's see.

As you can see, the link click opens a new  chat tab.

What happens if I click on the link again?

It refocuses the existing chat tab.  This is what navigation capturing enables.