2 files changed, 247 insertions, 0 deletions
diff --git a/files/th/web/manifest/icons/index.html b/files/th/web/manifest/icons/index.html
new file mode 100644
index 0000000000..730d3bce5d
--- /dev/null
+++ b/files/th/web/manifest/icons/index.html
@@ -0,0 +1,128 @@
+---
+title: icons
+slug: Web/Manifest/icons
+translation_of: Web/Manifest/icons
+---
+<div>{{QuickLinksWithSubpages("/th/docs/Web/Manifest")}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ชนิด</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">จำเป็น</th>
+   <td>ใช่</td>
+  </tr>
+  <tr>
+   <th scope="row">ตัวอย่าง</th>
+   <td>
+    <pre class="brush: json">
+"icons": [{"src": "icon.webp", "sizes": "48x48", "type": "image/webp"}]</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>icons</code>สมาชิกระบุอาร์เรย์ของวัตถุที่เป็นตัวแทนของไฟล์ภาพที่สามารถใช้เป็นแอปพลิเค iconsfor บริบทที่แตกต่างกัน ตัวอย่างเช่นสามารถใช้เพื่อแสดงแอปพลิเคชันเว็บท่ามกลางรายการแอปพลิเคชันอื่น ๆ หรือเพื่อรวมเว็บแอปพลิเคชันเข้ากับ  ตัวสลับงานของ<abbr title="ระบบปฏิบัติการ">ระบบปฏิบัติการ</abbr>และ/หรือการตั้งค่าระบบ</p>
+
+<h2 id="ตัวอย่าง">ตัวอย่าง</h2>
+
+<pre class="brush: json">"ไอคอน": [
+  {
+    "src": "ไอคอน/lowres.webp",
+    "ขนาด": "48x48",
+    "type": "image/webp"
+  }
+  {
+    "src": "ไอคอน/lowres",
+    "ขนาด": "48x48"
+  }
+  {
+    "src": "ไอคอน/hd_hi.ico",
+    "ขนาด": "72x72 96x96 128x128 256x256"
+  }
+  {
+    "src": "ไอคอน/hd_hi.svg",
+    "ขนาด": "72x72"
+  }
+]</pre>
+
+<h2 id="ค่า">ค่า</h2>
+
+<p>วัตถุรูปภาพอาจมีค่าต่อไปนี้:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">สมาชิก</th>
+   <th scope="col">ลักษณะ</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>sizes</code></td>
+   <td>สตริงที่มีมิติข้อมูลคั่นด้วยช่องว่าง </td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>เส้นทางไปยังไฟล์รูปภาพ หาก<code>src</code>เป็น URL สัมพัทธ์ URL หลักจะเป็น URL ของไฟล์ Manifest</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>คำแนะนำเกี่ยวกับประเภทสื่อของภาพ จุดประสงค์ของสมาชิกนี้คือเพื่อให้ตัวแทนผู้ใช้สามารถข้ามรูปภาพที่มีประเภทสื่อที่ไม่รองรับได้อย่างรวดเร็ว</td>
+  </tr>
+  <tr>
+   <td><code>purpose</code></td>
+   <td>
+    <p>กำหนดวัตถุประสงค์ของภาพตัวอย่างเช่นหากภาพมีวัตถุประสงค์เพื่อให้บริการวัตถุประสงค์พิเศษบางอย่างในบริบทของโฮสต์ระบบปฏิบัติการ (เช่นเพื่อการรวมที่ดีขึ้น)</p>
+
+    <p><a href="https://w3c.github.io/manifest/#purpose-member"><code>purpose</code></a> สามารถมีหนึ่งในค่าต่อไปนี้:</p>
+
+    <ul>
+     <li><code>badge</code>: ตัวแทนผู้ใช้สามารถแสดงไอคอนนี้โดยที่ข้อ จำกัด ด้านพื้นที่และ/หรือข้อกำหนดด้านสีแตกต่างจากไอคอนแอปพลิเคชัน</li>
+     <li><code>maskable</code>: รูปภาพได้รับการออกแบบโดยมี<a href="https://w3c.github.io/manifest/#icon-masks">ไอคอนรูปแบบและเขตปลอดภัย</a>ไว้ในใจว่าตัวแทนใด ๆ ของภาพนอกเขตปลอดภัยสามารถถูกละเว้นและถูกปกปิดโดยตัวแทนผู้ใช้</li>
+     <li><code>any</code>: ตัวแทนผู้ใช้มีอิสระที่จะแสดงไอคอนในบริบทใด ๆ (นี่คือค่าเริ่มต้น)</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ข้อมูลจำเพาะ">ข้อมูลจำเพาะ</h2>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">สเปค</th>
+   <th scope="col">สถานะ</th>
+   <th scope="col">คิดเห็น</th>
+   <th scope="col">ผลตอบรับ</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#icons-member', 'icons')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>คำจำกัดความเบื้องต้น</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">ร่างการทำงานของ Web App Manifest</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ความเข้ากันได้ของเบราว์เซอร์">ความเข้ากันได้ของเบราว์เซอร์</h2>
+
+<div class="hidden">
+<p>ตารางความเข้ากันได้ในหน้านี้สร้างขึ้นจากข้อมูลที่มีโครงสร้าง หากคุณต้องการมีส่วนร่วมกับข้อมูลโปรดตรวจสอบ<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>และส่งคำขอดึง</p>
+</div>
+
+<p>{{compat("html.manifest.icons")}}</p>
diff --git a/files/th/web/manifest/index.html b/files/th/web/manifest/index.html
new file mode 100644
index 0000000000..96287f66c5
--- /dev/null
+++ b/files/th/web/manifest/index.html
@@ -0,0 +1,119 @@
+---
+title: Web App Manifest
+slug: Web/Manifest
+tags:
+  - App
+  - Manifest
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+translation_of: Web/Manifest
+---
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}}</div>
+<p>Web app manifests are part of a collection of web technologies called <a href="/en-US/docs/Web/Apps/Progressive">progressive web apps</a> (PWAs), which are websites that can be installed to a device’s homescreen without an app store. Unlike regular web apps with simple homescreen links or bookmarks, PWAs can be downloaded in advance and can work offline, as well as use regular web apps APIs to, for example receiving push notifications.</p>
+
+<p>The web app manifest provides information about a web application in a <a href="/en-US/docs/Glossary/JSON">JSON</a> text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the homescreen of a device, providing users with quicker access and a richer experience). PWA manifests include its name, author, icon(s), version, description, and list of all the necessary resources (among other things).</p>
+
+<div class="hidden">
+<p>Can PWA manifest contain comments?<br>
+ It is a <a href="/en-US/docs/Glossary/JSON">JSON</a>-formatted file, with one exception: it is allowed to contain "<code>//</code>"-style comments.</p>
+</div>
+
+<h2 id="Members">Members</h2>
+
+<p>Web manifests can contain the following keys. Click on each one to link through to more information about it:</p>
+
+<p>{{ListSubpages("/en-US/docs/Web/Manifest")}}</p>
+
+<h2 id="Example_manifest">Example manifest</h2>
+
+<pre class="brush: json">{
+  "name": "HackerWeb",
+  "short_name": "HackerWeb",
+  "start_url": ".",
+  "display": "standalone",
+<span class="pl-s"><span class="pl-pds">  "</span>background_color<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>#fff<span class="pl-pds">"</span></span>,
+  "description": "A simply readable Hacker News app.",
+  "icons": [{
+    "src": "images/touch/homescreen48.png",
+    "sizes": "48x48",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen72.png",
+    "sizes": "72x72",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen96.png",
+    "sizes": "96x96",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen144.png",
+    "sizes": "144x144",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen168.png",
+    "sizes": "168x168",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen192.png",
+    "sizes": "192x192",
+    "type": "image/png"
+  }],
+  "related_applications": [{
+    "platform": "play",
+    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
+  }]
+}</pre>
+
+<h2 id="Deploying_a_manifest_with_the_link_tag" name="Deploying_a_manifest_with_the_link_tag">Deploying a manifest</h2>
+
+<p>Web app manifests are deployed in your HTML pages using a {{HTMLElement("link")}} element in the {{HTMLElement("head")}} of a document:</p>
+
+<pre class="brush: html">&lt;link rel="manifest" href="/manifest.webmanifest"&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: The <code>.webmanifest</code> extension is specified in the <a href="https://w3c.github.io/manifest/#media-type-registration">Media type registration</a> section of the specification (the response of the manifest file should return <code>Content-Type: application/manifest+json</code>). Browsers generally support manifests with other appropriate extensions like <code>.json</code> (<code>Content-Type: application/json</code>).</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: If the manifest requires credentials to fetch - the <code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code> attribute must be set to <code>"use-credentials"</code>, even if the manifest file is in the same orgin of the current page.</p>
+</div>
+
+<ul>
+</ul>
+
+<h2 id="Splash_screens">Splash screens</h2>
+
+<p>In Chrome 47 and later, a splash screen is displayed for sites launched from a homescreen. This splashscreen is auto-generated from properties in the web app manifest, specifically:</p>
+
+<ul>
+ <li><code><a href="/docs/Web/Manifest/name">name</a></code></li>
+ <li><code><a href="/docs/Web/Manifest/background_color">background_color</a></code></li>
+ <li>The icon in the <code><a href="/docs/Web/Manifest/icons">icons</a></code> array that is closest to 128dpi for the device.</li>
+</ul>
+
+<h2 id="Mime_type">Mime type</h2>
+
+<p>Manifests should be served using the <code>application/manifest+json</code> MIME type. However, it is optional to do so.  </p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Manifest')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("html.manifest")}}</p>