ピピピのPWA - Speaker Deck

ピピピのPWA

by Matsuo Obu

Slide 1

Slide 1 text

ピピピの PWA @ 1q7s82!2 2!18 !7 23 W/ Ar/ JavaScr037/rs !

Slide 2

Slide 2 text

まつおちゃん @mqtsuo0 フリ2ランス Webエンジニア React と ReactNati0e @やっている @boiyaa さんと仕事している

Slide 3

Slide 3 text

LTのテーマとりあえ.PWAっぽいことがしたくて... 「ホーム画面にA加」を実装してみた

Slide 4

Slide 4 text

できたAの -02su/02.gi2hub.i//add-h/-e--i.i-u-/ ホーP画面にアイコンスプラッシュ（一瞬見える）アドレスバーのないページ PWAやってるW

Slide 5

Slide 5 text

ソースコード gi2hub.c/-/-02su/02/add-h/-e--i.i-u- やったこと • 適当にページを作る • -a.ifes2ファイルを作る • i.dex.h2-lに読み込む

Slide 6

Slide 6 text

manifestファイルとは？ • ホームアイコンとか • スプラッシュとか • 起動後のブラウザとか JSON形式の設定ファイル

Slide 7

Slide 7 text

m nifestの設定項目 short_n me … アイコンの下に表示されるアプリ名 icons … 複数サイズのアイコンを指定 theme_color … ツールバーの色 displ y … st nd lone にするとブラウザ感がなくなる orient tion … 画面の縦横向き指定

Slide 8

Slide 8 text

manifestファイルを作る Web pp Manifest Gene.ato. 入力にもとづいて manifest.json とサイA別アイコンが自動生Gされる

Slide 9

Slide 9 text

index.html に読み込む linkタグ.manifest.jsonを指定

Slide 10

Slide 10 text

やったこと以上！！

Slide 11

Slide 11 text

これだけでホームに追加してアイコンをタップすればスプラッシュが出てネイティブアプリっぽい感じで表示できる

Slide 12

Slide 12 text

iOS Android

Slide 13

Slide 13 text

Aとめ manifestファイルを作れば WAっぽいものができる（入り口だけ） Service Worker は「明Pからがんばる」

Slide 14

Slide 14 text

発表は以上です

Slide 15

Slide 15 text

宣伝 (1) 技術書55でPWA本を1(うと思)てます！！

Slide 16

Slide 16 text

R伝 (2 プロジェCFメNGー募QSです！！ R2a0t)ativ2 R2a0t Go Kotlin(S2rv2rSid2 GraphQ( Auth0 GCP Git(ab Fabri0 P員でAフLーKNスでA