Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PWA, SEO, SSR
Search
aggre
November 04, 2017
Technology
1
770
PWA, SEO, SSR
https://polymer-japan.connpass.com/event/69080/
の登壇資料です
aggre
November 04, 2017
Tweet
Share
More Decks by aggre
See All by aggre
The money for the openable and shareable era
aggre
0
420
エンジニアは会社に何を求めるか? / What does engineers wants the company?
aggre
0
110
The importance ofopen assets
aggre
0
52
Fully AMP pros and cons
aggre
0
170
Web Components のリアル/ Realistic Web Components
aggre
12
7.7k
OSS の持続的開発をトークンエコノミーで支援する / Dev Token @OSS Universe
aggre
1
340
OSS の持続的開発をトークンエコノミーで支援する / Dev Token @CryptoBowl
aggre
1
390
Mastering lit-html directive
aggre
0
430
非中央集権ウェブ / Decentralized Web
aggre
3
540
Other Decks in Technology
See All in Technology
10Xでのデータ基盤の変遷とこれから: データマネジメントのリアル 〜BtoB企業3社の歩みとこれから〜
10xinc
6
1.2k
不感対策ソリューション
jtes
0
220
SQLによるオブザーバビリティの進化とClickHouseの実力
mikimatsumoto
0
150
つよつよリーダーが 抜けたらどうする? 〜ナビタイムのAgile⽀援組織の変遷〜
navitimejapan
PRO
22
12k
RemixでVersion skewに立ち向かう
chimame
1
720
HashHub会社案内「なぜ今、パブリックブロックチェーンに賭けるのか」
hashhub
3
75k
VS CodeでF1〜12キーつかってますか? / Do you use the F1-12 keys in VS Code?
74th
1
210
GitHub Actions/Docker/Terraform/Renovate で最小限の Monorepo CD パイプラインを作る / Minimalistic Monorepo CD Pipeline with GitHub Actions, Docker, Terraform and Renovate
yuyatakeyama
4
330
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
2
190
XP matsuri 2024 - 銀河英雄伝説に学ぶ
kawaguti
PRO
3
440
What is Nostr?
kojira
0
110
Understanding and Optimising INP
akshayysharma
0
150
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
7
550
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
For a Future-Friendly Web
brad_frost
174
9.3k
A designer walks into a library…
pauljervisheath
201
24k
In The Pink: A Labor of Love
frogandcode
139
22k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
Web Components: a chance to create the future
zenorocha
309
42k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Building Flexible Design Systems
yeseniaperezcruz
326
38k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Transcript
PWA, SEO, SSR
PWA
None
Service Worker HTTPS
Service Worker HTTPS
Polymer PWA
polymer init polymer build
ls build/es6-unbundled - service-worker.js - manifest.json
SEO/Bot
<hello-world></hello-world>
<hello-world> #shadow-root <style> h1 { color: blue } </style> <h1>Hello,
world!</h1> </hello-world>
<hello-world></hello-world>
SSR
Node.js
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);
None
ShadowDOM?
<hello-world> #shadow-root <style> h1 { color: blue } </style> <h1>Hello,
world!</h1> </hello-world>
https://host/?dom=shady window.ShadyDOM = { force: true };
Rendertron
Prerender.io
Renderly
None