🧀

【Task-RPG】Webアプリマニフェストの追加

2024/04/08に公開

HTML

PWA

JSON

tech

はじめに

アプリ開発全体の流れは、こちらの本にまとめています。

Webアプリマニフェストの追加

フォルダの作成

publicフォルダにmanifest.jsonファイル、iconsフォルダを作成します。

アプリアイコンを192x192と512x512の２種類のサイズで用意する

ディレクトリ構造

public/
│
├─ manifest.json
│
└─ icons/
   ├─ Task-RPG_icon_180.png
   ├─ Task-RPG_icon_192.png
   └─ Task-RPG_icon_512.png

マニフェストの基本的な内容を記述

アプリの名前、スタートURL、アイコン、表示モードなどの基本情報をmanifest.jsonに記述します。

manifest.json

{
  "name": "Task-RPG",
  "short_name": "Task-RPG",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
      "description": "『Task-RPG』は、タスク管理をゲーム化するアプリケーションです。",
  "icons": [
　　　{
      "src": "icons/Task-RPG_icon_180.png",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
      "src": "icons/Task-RPG_icon_192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/Task-RPG_icon_512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

index.htmlの<head>セクション内に、作成したmanifest.jsonへのリンクを追加する。

index.html

<link rel="manifest" href="/manifest.json">

ターミナルでnpm startを実行して、PWAが実装されているか確認する

はじめに

Webアプリマニフェストの追加

Discussion