Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ピピピのPWA
Matsuo Obu
July 23, 2018
Programming
0
430
ピピピのPWA
PWAの入り口を最小限で実装した話。「We Are JavaScripters! @22nd」で発表 (2018-07-23)
Matsuo Obu
July 23, 2018
Tweet
Share
More Decks by Matsuo Obu
See All by Matsuo Obu
Reactの歴史
mqtsuo02
0
590
文学作品「檸檬」をReactで読む
mqtsuo02
1
270
EmotionでReactをstylingすればモテるかもしれない
mqtsuo02
0
310
僕が求めていたのはNext.jsだったんだ
mqtsuo02
0
390
Repro Tech Hands-on : Nuxt.js
mqtsuo02
1
450
GraphQLについての5分間
mqtsuo02
0
550
Create React App 読解特急
mqtsuo02
0
46
JekyllとBootstrapを使って静的なブログを作ってみたよ
mqtsuo02
0
45
Other Decks in Programming
See All in Programming
Securing Kafka Connect Pipelines with Client-Side Field Level Cryptography @ Kafka Summit London 2022
hpgrahsl
0
300
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
manfredsteyer
PRO
0
270
コードの解析と言語習得の心得
jinjin33333
0
120
よりUXに近いSLI・SLOの運用による可用性の再設計
kazumanagano
3
440
Let's make a contract: the art of designing a Java API
mariofusco
0
150
microCMS × imgixを活用して品質とレスポンスを両立したポートフォリオサイトを作成した話
takehitogoto
0
380
Jetpack DataStore
djain2405
1
170
The future of trust stores in Python
sethmlarson
0
180
ゼロから作る Protocol Buffer のパーサーとレキサー / Writing Protocol Buffer Parser/Lexer in Go from scratch
yoheimuta
1
160
Micro Frontend Routing – Solutions for mature applications - iJS 04/2022
michaelzikes
0
150
Kueue入門/Kueue Introduction
bells17
0
500
Blazor WebAssembly – Dynamische Formulare und Inhalte in Aktion
patrickjahr
0
150
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
3
420
Thoughts on Productivity
jonyablonski
43
2.2k
Six Lessons from altMBA
skipperchong
14
1.3k
BBQ
matthewcrist
74
7.9k
Happy Clients
brianwarren
89
5.5k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
125
8.5k
Designing with Data
zakiwarfel
91
3.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
21
14k
Transcript
ピピピの PWA @ 1q7s82!2 2!18 !7 23 W/ Ar/ JavaScr037/rs
!
まつおちゃん @mqtsuo0 フリ2ランス Webエンジニア React と ReactNati0e @やっている @boiyaa さんと仕事している
LTのテーマ とりあえ.PWAっぽいことがしたくて... 「ホーム画面にA加」を実装してみた
できたAの -02su/02.gi2hub.i//add-h/-e--i.i-u-/ ホーP画面にアイコン スプラッシュ(一瞬見える) アドレスバーのないページ PWAやってるW
ソースコード gi2hub.c/-/-02su/02/add-h/-e--i.i-u- やったこと • 適当にページを作る • -a.ifes2ファイルを作る • i.dex.h2-lに読み込む
manifestファイルとは ? • ホームアイコンとか • スプラッシュとか • 起動後のブラウザとか JSON形式の設定ファイル
m nifestの設定項目 short_n me … アイコンの下に表示されるアプリ名 icons … 複数サイズのアイコンを指定 theme_color
… ツールバーの色 displ y … st nd lone にするとブラウザ感がなくなる orient tion … 画面の縦横向き指定
manifestファイルを作る Web pp Manifest Gene.ato. 入力にもとづいて manifest.json と サイA別アイコンが 自動生Gされる
index.html に読み込む linkタグ.manifest.jsonを指定
やったこと 以上 !!
これだけで ホームに追加して アイコンをタップすれば スプラッシュが出て ネイティブアプリっぽい感じで表示できる
iOS Android
Aとめ manifestファイルを作れば WAっぽいものができる (入り口だけ) Service Worker は 「明Pからがんばる」
発表は以上です
宣伝 (1) 技術書55でPWA本を1(うと思)てます!!
R伝 (2 プロジェCFメNGー募QSです!! R2a0t)ativ2 R2a0t Go Kotlin(S2rv2rSid2 GraphQ( Auth0 GCP
Git(ab Fabri0 P員でAフLーKNスでA
ありがとうございました
サイズ h1 タイトル 96 h ラベル 66 h3 テキスト 44