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
Search
Matsuo Obu
July 23, 2018
Programming
0
700
ピピピの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
960
文学作品「檸檬」をReactで読む
mqtsuo02
1
480
EmotionでReactをstylingすればモテるかもしれない
mqtsuo02
0
590
僕が求めていたのはNext.jsだったんだ
mqtsuo02
0
660
Repro Tech Hands-on : Nuxt.js
mqtsuo02
1
830
GraphQLについての5分間
mqtsuo02
0
780
Create React App 読解特急
mqtsuo02
0
87
JekyllとBootstrapを使って静的なブログを作ってみたよ
mqtsuo02
0
69
Other Decks in Programming
See All in Programming
TypeScriptでDXを上げろ! Hono編
yusukebe
3
770
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.1k
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
9
4.1k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
470
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
Gamification - CAS2011
davidbonilla
81
5.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
A Tale of Four Properties
chriscoyier
160
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Agile that works and the tools we love
rasmusluckow
329
21k
Site-Speed That Sticks
csswizardry
10
700
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Code Reviewing Like a Champion
maltzj
524
40k
Fireside Chat
paigeccino
37
3.5k
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