Add support for back button / history

[phidias51]

It would be useful if there was built-in support for the back button.

[rictic]

There is! app-route and app-location automatically add entries to the browser's history. You can programmatically go back using native apis like window.history.back() and window.history.go(-1).

Docs here: https://developer.mozilla.org/en-US/docs/Web/API/Window/history

[arthurevans]

Note though that you can't detect that it was a back button event, and do something special (like restore scroll position). There's already an issue open for that—#86.

[phidias51]

Here's what I'd like to be able to do:

• I'd like for back button events (either on mobile or desktop) to automatically trigger history popstate events. This is currently not wired together.
• The current data model for a node in a route seems a little sparse. I'd like to be able to specify node names. For example, suppose that we have a "/employee" route. I'd like to specify that "Employee" is the title to be displayed when the employee route is used. The "title" would be pushed to using the history.pushState method (it's the second parameter in the call). Ideally, the app-layout would update itself and display "Employee" in the header.
• Since we live in an i18n world, it would be nice if the route had a key like "employee" that would cause the appropriate text to be displayed in whatever language was necessary.
• I'd like it if there was some way of designating what the "home" or root node was in the routing graph. This would make it possible for the app-layout to display a <- in the header. If you take a look at the Gmail app, when you navigate into a message, the icon automatically changes to a back arrow. When you return to the "home" node it displays a hamburger menu.

Admittedly, this would require some integration with the app-layout component, but it would cut down on some of the repetitive work that has to be done to create an SPA, and would let the developer focus on the individual views.

[TimvdLippe]

@phidias51 For displaying title based on data-bindings, you can use an element like https://github.com/zacharytamas/page-title/. You could ask that author to also include i18n.

[rictic]

Can you clarify your first point? Are you talking about something firing popstate events? Something listening for them? iron-location and thus app-location listens for popstate events and responds appropriately.

As for propagating title, my suspicion is that that may in fact be a separate concern from app-route and better handled with the <page-title> element Tim linked, in a similar way to CaptainCodeman's app-metadata element: https://github.com/CaptainCodeman/app-metadata

The page title is less integrated into routing than it appears, in part because all browsers ignore the title parameter to pushState and replaceState.

[dwberry]

This is what I do...

My backButton.html element:

<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="icons.html">
<dom-module id="back-button">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>
        <paper-icon-button icon="appicons:arrow-back" on-tap="goback"></paper-icon-button>
    </template>
    <script>
        Polymer({
            is: 'back-button',
            goback: function () {
                window.history.back();
            }
        });
    </script>
</dom-module>

May help someone..