PWA向けmanifest.jsonのテンプレート

{
  "name": "サイト名",
  "short_name": "短縮サイト名",
  "icons": [
    {
      "src": "/img/icons/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#FFF"
}

PWA向けmanifest.jsonのテンプレートです。サイト名と、アイコンのパスを変更して、ドキュメントルートから配信すればOKです。

Written by

趣味でサイトやサービスを作ってます。自分で調べてたり開発した際に得た知見を投稿します。

{ "name": "サイト名", "short_name": "短縮サイト名", "icons": [ { "src": "/img/icons/android-chrome-36x36.png", "sizes": "36x36", "type": "image/png" }, { "src": "/img/icons/android-chrome-48x48.png", "sizes": "48x48", "type": "image/png" }, { "src": "/img/icons/android-chrome-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "/img/icons/android-chrome-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "/img/icons/android-chrome-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "/img/icons/android-chrome-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "/img/icons/android-chrome-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "/img/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/img/icons/android-chrome-256x256.png", "sizes": "256x256", "type": "image/png" }, { "src": "/img/icons/android-chrome-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "/img/icons/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "./index.html", "display": "standalone", "background_color": "#000000", "theme_color": "#FFF" }

<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <urlset> <url> <loc>URL</loc> <lastmod>YYYY-MM-DDD</lastmod> <changefreq>daily</changefreq> </url> </urlset>

<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>記事ページのHTML5テンプレート</title> <meta charset="utf-8"> <meta name="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="">  <link rel="shortcut icon" href=""> </head> <body> <header> <p><a href="">サイト名</a></p> <nav> <ul> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> </ul> </nav> </header> <main> <article class=""> <header> <h1>記事タイトル</h1> <p>説明文です。説明文です。説明文です。説明文です。</p> </header> <section> <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> </section> </article> </main> <aside class=""> <section> <h2>新着コンテンツ</h2> <ul> <li><a href="#">新着記事1</a></li> <li><a href="#">新着記事2</a></li> <li><a href="#">新着記事3</a></li> </ul> </section> <section> <h2>人気コンテンツ</h2> <ul> <li><a href="#">人気記事1</a></li> <li><a href="#">人気記事2</a></li> <li><a href="#">人気記事3</a></li> </ul> </section> </aside> <footer> <p>(C) 2019 サイト名.</p> </footer> </body> </html>

Written by

HTML5の新着コード