Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ohakutsu
September 15, 2021

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

2021/09/15開催「PWA Night vol.31 ~PWAを作る上での便利なTips〜」の発表資料です。
https://pwanight.connpass.com/event/222778/

ohakutsu

September 15, 2021
Tweet

More Decks by ohakutsu

Other Decks in Programming

Transcript

  1. 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
  2. link タグで読み込ませる <!DOCTYPE > <html> <title>Racer 3K</title> <!-- ↓ Web

    App Manifest --> <link rel="manifest" href="manifest.webmanifest" /> </html> 5
  3. これでも OK <!DOCTYPE > <html> <title>Racer 3K</title> <!-- ↓ Web

    App Manifest --> <link rel="manifest" href="/api/manifest" /> </html> 9
  4. dir 以下のメンバーのディレクションを指定できる。 name , short_name , ショートカットの name , short_name

    , description に対して適応される。 ltr 左から右 rtl 右から左 auto 明示的な方向性はない { "dir": "ltr" } 12
  5. 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
  6. 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
  7. orientation デフォルトの画面の向きを指定できる。 any どの向きにでもできる natural デバイスの通常の向きに応じた向き landscape 横長に固定 portrait 縦長に固定

    portrait-primary 縦長での通常の向き portrait-secondary 縦長での反対の向き landscape-primary 横長での通常の向き landscape-secondary 横長での反対の向き 20
  8. orientation { "orientation": "landscape" } Chrome Chrome Android Edge Firefox

    Firefox Android Opera Safari Safari iOS 39+ 39+ x x x x x x 21
  9. 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
  10. { "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
  11. 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
  12. { "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