search

shgysk8zer0 / awesome-rss

Puts an RSS/Atom subscribe button back in URL bar
https://addons.mozilla.org/en-US/firefox/addon/awesome-rss/
GNU General Public License v3.0
194 stars 23 forks source link

Allow dynamic adds/removals of link rss nodes, for SPAs with different feed per page #124

Open akarelas opened 5 years ago

akarelas commented 5 years ago

I plan to make a website where each page will have its own RSS feed. This site is a SPA, so there won't be a new HTML page load on every click. It's sad that the visitors will see the same feeds, if they click on the feed icon in the URL bar, that they saw when they entered the site, even if they have since visited a different part of the website.

I would like the awesome rss icon, when clicked, to display the RSS feeds that are present at THAT moment in the DOM tree under , rather than what <head> had when the user first entered the site.

My website will be a re-make of https://perlmodules.net - right now it doesn't have any <link rss> nodes - the remake is going to have such nodes, though. I can imagine SPA blogs, SPA news sites, and other large SPA sites having the same issue.

Do you think my request is a valid request? Thank you.

shgysk8zer0 commented 5 years ago

Because the icon is not displayed until a feed is discovered, it is not possible to delay scanning until clicked.

It should re-scan whenever a tab/page is updated already. Is this not happening in your case?

akarelas commented 5 years ago

Here is an HTML file that (I believe) fully demonstrates the problem on the newest FireFox.

<!doctype html>
<html>
<head>
    <title>Hi</title>
    <link rel="alternate" type="application/rss+xml" title="CNN International: Top Stories" href="http://rss.cnn.com/rss/edition.rss"/>
    <link rel="alternate" type="application/rss+xml" title="CNN International: Asia" href="http://rss.cnn.com/rss/edition_asia.rss"/>
</head>
<body>
123

<button id="btn1">Click me</button>

<script src="https://unpkg.com/jquery"></script>
<script>
$(function(){
    $('#btn1').click(function(e) {
        $('head').append('<link rel="alternate" type="application/rss+xml" title="CNN International: Europe" href="http://rss.cnn.com/rss/edition_europe.rss"/>');
    });
});
</script>

</body>
</html>

You will see just two RSS feeds, both before and after pressing the button.

The desirable behaviour would be you seeing three RSS feeds, after pressing the button. Do you agree?

shgysk8zer0 commented 5 years ago

In order to prevent being a resource hog, I just for page/tab update events. Since the URL is not changing, this event never fires. I once tried utilizing a MutationObserver to watch for <link>s appended to the DOM, but this resulted in a lot of duplication and was not a good solution.

If you were to add a location.hash = 'foo'; to the click handler, it will work.

akarelas commented 5 years ago

This SO answer also suggests MutationObserver (like what you tried), or its easy-to-use wrapper arrive.js: https://stackoverflow.com/questions/9666914/listening-to-events-such-as-adding-new-elements-in-javascript/23106810#23106810

Just out of curiosity - what kind of duplication was it that prevented you from using it, in the end? Does it also apply to arrive.js?

Thanks for a great product!

akarelas commented 5 years ago

So there is only a problem when there is a small delay (say 100ms) between the updating of the browser's URL and the modification of the nodes. This can be solved by appending a random hash (#) after the modification, to trigger Awesome RSS.

But I really am curious, why not use arrive.js in Awesome RSS and avoid this little tiny "ugliness" on the URL?

Thanks!