Web App Manifest をフル活用してみる

Web App Manifest をフル活用してみる @ohakutsu PWA Night vol.31 1

花田拓矢 / ohakutsu 青森県出身新卒 2 年目エンジニア Increments 株式会社で Qiita
の開発をしてます Twitter: @ohakutsu 2

Web App Manifest 3

manifest.json { "short_name": "PWA", "name": "PWA sample app", "display": "standalone",
"start_url": "index.html", "icons": [ { "src": "images/icon.jpg", "sizes": "192x192", "type": "image/jpg" } ] } 4

link タグで読み込ませる <!DOCTYPE > <html> <title>Racer 3K</title>  <link rel="manifest" href="manifest.webmanifest" /> </html> 5

いい感じに表示される 6

Web App Manifest アプリケーションに関連するメタデータを一元的に置くことができるメタデータには、アプリケーションの名前、アイコンへのリンク、ユーザーがアプリケーションを起動したときに開く URL などが含まれるが、これらに限定されない
実はWorking Draft 引用: https://www.w3.org/TR/appmanifest/ 7

webmanifest? json? 正式な拡張子は .webmanifest .json でも拡張子がなくても良いが、MIME タイプが application/manifest か application/json
である必要がある。 8

これでも OK <!DOCTYPE > <html> <title>Racer 3K</title>  <link rel="manifest" href="/api/manifest" /> </html> 9

設定できるメンバー background_color dir display icons lang name ... 10

background_color アプリケーションの背景色を指定できる。スプラッシュ画面の背景色で利用される。 { "background_color": "#fff" } Chrome Chrome Android
Edge Firefox Firefox Android Opera Safari Safari iOS x 46+ x x x o x x 11

dir 以下のメンバーのディレクションを指定できる。 name , short_name , ショートカットの name , short_name
, description に対して適応される。 ltr 左から右 rtl 右から左 auto 明示的な方向性はない { "dir": "ltr" } 12

dir Chrome Chrome Android Edge Firefox Firefox Android Opera Safari
Safari iOS x x x x x x x x 13

display ウェブアプリケーションがどのように表示されるかを指定できる。 fullscreen ブラウザの UI を隠した状態で表示 standalone スタンドアロンアプリのように表示 minimal-ui ナビゲーションを制御するための
UI は表示 browser 通常のブラウザで表示 { "display": "fullscreen" } 14

display Chrome Chrome Android Edge Firefox Firefox Android Opera Safari
Safari iOS 39+ 39+ x x 47+ x x 11.3+ 15

icons アプリケーションのアイコンを指定できる。 { "icons": [ { "src": "icon/lowres.webp", "sizes": "64x64",
"type": "image/webp" }, { "src": "icon/lowres.png", "sizes": "64x64" } ] } 16

icons Chrome Chrome Android Edge Firefox Firefox Android Opera Safari
Safari iOS 39+ 39+ x x 53+ x x x ※ Safari iOS は link タグの rel 属性で apple-touch-icon を指定する必要がある 17

lang ローカライズ可能なメンバーの言語を指定する。 ( name , short_name , ショートカットの name ,
short_name , description ) { "lang": "en" } Chrome Chrome Android Edge Firefox Firefox Android Opera Safari Safari iOS x x x x x x x x 18

name ウェブアプリケーションの名前。他のアプリケーションのリストの中などで使われる。 { "name": "Super Racer 3000" } Chrome
Chrome Android Edge Firefox Firefox Android Opera Safari Safari iOS 39+ 39+ x x 53+ x x 11.3+ 19

orientation デフォルトの画面の向きを指定できる。 any どの向きにでもできる natural デバイスの通常の向きに応じた向き landscape 横長に固定 portrait 縦長に固定
portrait-primary 縦長での通常の向き portrait-secondary 縦長での反対の向き landscape-primary 横長での通常の向き landscape-secondary 横長での反対の向き 20

orientation { "orientation": "landscape" } Chrome Chrome Android Edge Firefox
Firefox Android Opera Safari Safari iOS 39+ 39+ x x x x x x 21

scope PWA として動くパスのスコープを指定できる。 { "scope": "/app/" } Chrome Chrome Android
Edge Firefox Firefox Android Opera Safari Safari iOS 53+ 53+ x x x x x 11.3+ 22

相対パスの場合 https://example.com/app/index.html の場合 { "scope": "/app/" } スコープは https://example.com/app/ 配下になる
23

絶対パスの場合 { "scope": "https://example.com/app/" } スコープは https://example.com/app/ 配下になる 24

short_name ウェブアプリケーションの短い名前。ホームでの表示などに使われる。 { "short_name": "Racer3K" } Chrome Chrome Android
Edge Firefox Firefox Android Opera Safari Safari iOS 39+ 39+ x x 53+ x x 11.3+ 25

start_url PWA の起動時に開く URL を指定できる。 { "start_url": "/start.html?launcher=homescreen" } ユーザーを一意に識別できるパラメータを追加する場合、
オプトアウトなどプライバシーを考慮すべき 26

start_url Chrome Chrome Android Edge Firefox Firefox Android Opera Safari
Safari iOS 39+ 39+ x x x x 11.3+ x 27

theme_color アプリケーションのテーマカラーを設定できる。 ( アドレスバーなど) { "theme_color": "aliceblue" } Chrome Chrome
Android Edge Firefox Firefox Android Opera Safari Safari iOS 46+ 46+ x x 53+ x x x 28

shortcuts アプリケーションへのショートカットを追加できる! Chrome Chrome Android Edge Firefox Firefox Android Opera
Safari Safari iOS 85+ 84+ x x x 71+ x x 29

{ "shortcuts": [ { "name": "Today's agenda", "short_name": "Agenda", "url":
"/today", "description": "List of events planned for today", "icons": "icon/agenda.png" }, { "name": "New event", "url": "/create/event" } ] } 30

Chrome macOS でも対応できるように開発が始まっている https://bugs.chromium.org/p/chromium/issues/detail?id=1069293 31

manifest の更新現時点では更新の仕組みがない... Chrome では一部対応はしている https://web.dev/manifest-updates/ 32

Desktop Chrome Android Chrome display o o icons x x
name x x scope o o short_name x x shortcuts o o start_url x o theme_color o o background_color o orientation o 33

現状での manifest をフル活用すると ... 34

{ "name": "Super Racer 3000", "short_name": "Racer3K", "icons": [ {
"src": "icon/lowres.webp", "sizes": "64x64", "type": "image/webp" }, { "src": "icon/lowres.png", "sizes": "64x64" } ], "scope": "/", "start_url": "/start.html", "display": "fullscreen", "orientation": "landscape", "theme_color": "aliceblue", "background_color": "red", "shortcuts": [ { "name": "Today's agenda", "short_name": "Agenda", "url": "/today", "description": "List of events planned for today", "icons": "icon/agenda.png" }, { "name": "New event", "url": "/create/event" } ] } 35

ありがとうございました 36

Web App Manifest をフル活用してみる

Web App Manifest をフル活用してみる

More Decks by ohakutsu

Other Decks in Programming

Featured

Transcript