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
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
800
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
120
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
ニーリーにおけるプロダクトエンジニア
nealle
0
830
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
650
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
410
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
12
3.2k
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The World Runs on Bad Software
bkeepers
PRO
69
11k
RailsConf 2023
tenderlove
30
1.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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