CDN with local fallback

[eteubert]

I want to use the CDN but fall back to a local button if the CDN is not reachable. This is what I came up with:

<script>window.podcastData167f2eb064c10c = {/* ... */};</script>
<script class="podlove-subscribe-button" src="https://cdn.podlove.org/subscribe-button/javascripts/app.js" data-json-data="podcastData167f2eb064c10c" data-language="de" data-size="big auto" data-format="cover" data-style="filled" data-color="#75ad91"> </script>
<script>if (typeof SubscribeButton == 'undefined') {
    document.write(unescape("%3Cscript class=\"podlove-subscribe-button\" src=\"https://publisher.dev/wp-content/plugins/podlove-publisher/lib/modules/subscribe_button/dist/javascripts/app.js\" data-json-data=\"podcastData167f2eb064c10c\" data-language=\"de\" data-size=\"big auto\" data-format=\"cover\" data-style=\"filled\" data-color=\"#75ad91\"> %3E%3C/script%3E"));
}</script>

It kind of works. This is the result:

The fallback button is rendered correctly but the failed CDN script still creates the iframe and style nodes which take up vertical space. Ideas how I can make this work?

[eteubert]

Hacky solution / workaround:

if (typeof SubscribeButton == 'undefined') {

    document.write(unescape("%3Cscript class=\"podlove-subscribe-button\" src=\"https://publisher.dev/wp-content/plugins/podlove-publisher/lib/modules/subscribe_button/dist/javascripts/app.js\" data-json-data=\"podcastDataa209f41320cdd9\" data-language=\"de\" data-size=\"big auto\" data-format=\"cover\" data-style=\"filled\" data-color=\"#75ad91\"> %3E%3C/script%3E"));

    window.setTimeout(function() {
        iframes = document.querySelectorAll('.podlove-subscribe-button-iframe')
        for (i = 0; i < iframes.length; ++i) {
            if (!iframes[i].style.width && !iframes[i].style.height) {
                iframes[i].style.display = 'none';
            }
        }
    }, 5000);

}

Explanation: 5 seconds after loading the fallback, I check all button iframes if they have a width and style css set. If not, that means they were not initialized and I can hide them. It's not a great solution but better than showing no button at all when the CDN is not available.

Curious if you have ideas to improve on this.

[cfoellmann]

This would be a great improvement. I would love to add it to the wp plugin when a working solution is available

[eteubert]

This approach is already used with success in the Publisher https://github.com/podlove/podlove-publisher/blob/master/lib/modules/subscribe_button/button.php#L111

[cfoellmann]

perfect! I will add this to the next version of the standalone plugin. Close?

[eteubert]

Great :) Close when it's committed.

[Natanji]

Would it be possible to give us a complete option to run the app locally? Right now, using the plugin always uses the CDN and this apparently can't be disabled. It would be great for those of us who don't want to run any external code on our site.