PWA, SEO, SSR

https://polymer-japan.connpass.com/event/69080/ の登壇資料です

Transcript

1. PWA, SEO, SSR
2. PWA
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);
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