Question

Basically, I have written a Spotify app thats includes only a single page (index.html) with all the links triggering javascript onclick() functions that manipulate the DOM. For example, I show an initial 4 albums and have a “See More albums” link that loads and renders the rest of the albums. I did this so the initial 4 albums would only load once. I didn’t realize there was a limitation on pushState()until I read the fine print. Spotify says you will get a “security exception” if you try to use pushState(). I prefer not re-writing the app to load new html pages on each link click. I tried their method of using the full URI (eg. <a href='spotify:app:chirp:best_of:index'>), but it behaves erratically (code). Recommendations on a general approach? Thanks.

Answer 1

pushState is not supported in Spotify apps. If you want to create a new entry in the history so that if the user clicks on the back button it returns to the previous state, then you should have a link like:

<a href='spotify:app:chirp:best_of:2009'>See More</a>

And you would detect when the user has clicked by observing the models.EVENT.ARGUMENTSCHANGED event.

You can have a look at the Spotify App Tutorial on GitHub which uses a similar approach.

If you don’t want to create a new entry, but just append some more albums, then there is no need to navigate to any new URI, then execute your seeMoreAlbumsOfTheYearOnClick function as currently.

Note that if you don’t pretend to navigate to any new URL you should pass the event variable to your seeMoreAlbumsOfTheYearOnClick function and call event.preventDefault();. Another possibility is to use a button element instead.