Provide Progressive Enhancement Guidance

[bahrus]

Description

I really like the direction Polymer is going in, thinking through how to best serve devices where network connectivity is slow (or unavailable), via progressive enhancement. I like how that was spelled out here as well.

I'm actually preparing to give a slide presentation on PWA's at my work place, so I thought I would use Polymer's animation slides example to create my own slides, and use it as one of many illustrations of progressive enhancement. But I encountered a bit of a snag:

If you look at the declarative example: https://github.com/PolymerElements/neon-animation/blob/master/demo/declarative/index.html you can see what the problem is:

There's the nice text right there, ready to display:

      <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
        <neon-animatable>1</neon-animatable>
        <neon-animatable>2</neon-animatable>
        <neon-animatable>3</neon-animatable>
        <neon-animatable>4</neon-animatable>
        <neon-animatable>5</neon-animatable>
      </neon-animated-pages>

The problem is it is tucked inside a template is="dom-bind" tag, which Chrome properly hides until the Polymer core libraries are downloaded, and the bind custom element activated.

The issue was easily fixed by a simple hack: I created a div which I placed the neon-animatable tags. I added some inline script in the index.html page, that watches for the target element for when it becomes recognized as a polymer element. Then I transfer the dom into the template. While Polymer is being downloaded, I'm able to read the contents of my slides, at least, without all the bells and whistles of the animation features.

It works beautifully for my demo, but it really is a hack the way I did it.

Expected outcome

I would recommend something like this: Polymer's documentation provides some boilerplate code developers can use -- either a plain vanilla custom element which developers would be instructed to embed directly in their opening index.html page, or just a snippet of JavaScript, which employs a trick like this. Or whatever the right solution is.

Actual outcome

I've not encountered any guidance on how to do this.

[WoodyWoodsta]

Perhaps you could cache the polymer source using a serviceworker? 😄

[bahrus]

Absolutely, WoodyWoodsta. The question is how to optimize the first visit. I doubt anyone will want to view my slides twice.