Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PWA, SEO, SSR

06c292fa0b9557777d3cb4663ceec40a?s=47 aggre
November 04, 2017

PWA, SEO, SSR

06c292fa0b9557777d3cb4663ceec40a?s=128

aggre

November 04, 2017
Tweet

Transcript

  1. PWA, SEO, SSR

  2. PWA

  3. None
  4. Service Worker HTTPS

  5. Service Worker HTTPS

  6. Polymer PWA

  7. polymer init polymer build

  8. ls build/es6-unbundled - service-worker.js - manifest.json

  9. SEO/Bot

  10. <hello-world></hello-world>

  11. <hello-world> #shadow-root <style> h1 { color: blue } </style> <h1>Hello,

    world!</h1> </hello-world>
  12. <hello-world></hello-world>

  13. SSR

  14. Node.js

  15. require('@skatejs/ssr/register'); const render = require('@skatejs/ssr’); class Hello extends HTMLElement {

    connectedCallback () { const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = '<span>Hello, world!</span>'; } } customElements.define('x-hello', Hello); const hello = new Hello(); render(hello).then(console.log);
  16. None
  17. ShadowDOM?

  18. <hello-world> #shadow-root <style> h1 { color: blue } </style> <h1>Hello,

    world!</h1> </hello-world>
  19. https://host/?dom=shady window.ShadyDOM = { force: true };

  20. Rendertron

  21. Prerender.io

  22. Renderly

  23. None