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
技術的負債解消の取り組みと専門チームのお話
bengo4com
0
330
「家族アルバム みてね」における運用管理・ オブザーバビリティの全貌 / Overview of Operation Management and Observability in FamilyAlbum
isaoshimizu
4
160
DevRelの始め方
moongift
PRO
1
390
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
200
Next.js のページ遷移を全力で止める
ypresto
7
3.3k
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
140
不動産売買取引におけるAIの可能性とプロダクトでのAI活用
zabio3
0
270
あなたの知らないiOS開発の世界
recruitengineers
PRO
3
180
チームビルディングは"感性"で向き合おう / Team Building with Awareness
kohzas
0
260
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
150
スタッフエンジニアの道: The Staff Engineer’s Path
snoozer05
PRO
44
14k
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
1.4k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
227
52k
Navigating Team Friction
lara
183
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
Agile that works and the tools we love
rasmusluckow
327
20k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Faster Mobile Websites
deanohume
304
30k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
The World Runs on Bad Software
bkeepers
PRO
64
11k
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
Producing Creativity
orderedlist
PRO
340
39k
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