PWA + Stack Navigation == Native

I’ve never seen a Progressive Web App (PWA) that actually feels App-like. Native Apps provide an immersive user experience because they give you the feeling that you’re navigating through a stack of pages or scenes. Scenes animate as they arrive and leave and, on leaving, the previous scene is displayed exactly as you left it. PWA’s don’t feel App-like because the Web doesn’t have Stack Navigation. Until now, that is.

I’ve seen examples of Web page transitions that try to imitate Stack Navigation. But they tend not to work because the browser can’t restore your scroll position when you press back. The browser gets confused about the height of the Web page because both scenes are visible during the transition. Even if you find a workaround, there’s more to Stack Navigation than remembering the scroll position. You have to restore the previous scene exactly as it was. If a form field loses its value or a slider forgets where it was then the stack illusion is shattered.

I’m introducing Stack Navigation for the Web. The following CodePen shows what it can do. You can see how it feels more like Native Twitter than Twitter Lite. Finally, we can build PWA’s that really feel App-like.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s