PWA, SEO, SSR

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