web app

ដំឡើង harvis.dev ជាកម្មវិធី

harvis.dev មាន web manifest ស្រាប់ ដូច្នេះកម្មវិធីរុករករបស់អ្នកអាចដំឡើងវាដូចកម្មវិធីដទៃទៀត — បង្អួចផ្ទាល់ខ្លួន និងរូបតំណាងផ្ទាល់ខ្លួននៅលើ Dock ឬអេក្រង់ដើម។ គ្មានហាងកម្មវិធី គ្មានកម្មវិធីដំឡើង គ្មានការសុំសិទ្ធិ។

why bother

អ្វីដែលផ្លាស់ប្ដូរពេលដំឡើង

  • បង្អួចផ្ទាល់ខ្លួន

    គ្មានផ្ទាំង គ្មានរបារអាសយដ្ឋាន។ ឧបករណ៍ផ្ទុកឡើង និងផ្ទាំងគ្រប់គ្រងរបស់អ្នកបើកក្នុងបង្អួចដាច់ដោយឡែកមួយយ៉ាងស្អាត ហើយមានកន្លែងផ្ទាល់ខ្លួនក្នុងបញ្ជីកម្មវិធី។

  • ចុចម្ដងគឺផ្សាយ

    រូបតំណាងមួយនៅលើ Dock របារភារកិច្ច ឬអេក្រង់ដើម។ បើកវា ទម្លាក់ថតឯកសារចូល នោះគេហទំព័រនឹងដំណើរការមុនពេលបង្អួចស្ថិតស្ថេរទៅទៀត។

  • គ្មានអ្វីត្រូវទាញយក

    វាគឺជាគេហទំព័រដដែលដែលអ្នកកំពុងអាន — ការដំឡើងគ្រាន់តែបន្ថែមរូបតំណាង និងបង្អួច។ គ្មានកញ្ចប់ គ្មានគណនីហាង គ្មានការធ្វើបច្ចុប្បន្នភាពផ្ទៃខាងក្រោយត្រូវអនុម័ត។

របៀបដំឡើង

ជ្រើសរើសកម្មវិធីរុករកដែលអ្នកកំពុងអានទំព័រនេះ។ គ្រប់ផ្លូវបញ្ចប់ដូចគ្នា៖ harvis.dev ឈរនៅជាមួយកម្មវិធីដើមរបស់អ្នក។

Chrome, Edge ឬ Brave លើកុំព្យូទ័រ

  1. 01មើលចុងខាងស្ដាំនៃរបារអាសយដ្ឋាន — រូបតំណាងដំឡើងគឺជាអេក្រង់តូចមួយមានព្រួញចុះក្រោម។
  2. 02គ្មានរូបតំណាងទេ? បើកម៉ឺនុយកម្មវិធីរុករក រួចជ្រើស “Install page as app” (នៅ Edge៖ Apps → Install this site as an app)។
  3. 03បញ្ជាក់ រួច harvis.dev នឹងបើកក្នុងបង្អួចផ្ទាល់ខ្លួន និងបង្ហាញក្នុងបញ្ជីកម្មវិធីរបស់អ្នក។

Chrome លើ Android

  1. 01ចុចម៉ឺនុយ ⋮ នៅជ្រុងខាងស្ដាំផ្នែកខាងលើ។
  2. 02ជ្រើស “Add to Home screen” រួចចុច “Install”។
  3. 03រូបតំណាងនឹងចុះទៅអេក្រង់ដើម ហើយបើកដោយគ្មានស៊ុមកម្មវិធីរុករកឡើយ។

Safari លើ iPhone និង iPad

  1. 01ចុចប៊ូតុងចែករំលែក — ជាការ៉េមួយមានព្រួញឡើងលើ។
  2. 02រំកិលចុះក្រោម ចុច “Add to Home Screen” រួចចុច “Add”។
  3. 03iOS អាន manifest ដដែល ប៉ុន្តែមិនដែលបង្ហាញការស្នើទេ ដូច្នេះនេះជាផ្លូវតែមួយគត់។

Safari លើ Mac

  1. 01បើក harvis.dev ក្នុងផ្ទាំងធម្មតា។
  2. 02ជ្រើស File → Add to Dock នៅរបារម៉ឺនុយ ដាក់ឈ្មោះ រួចចុច Add។
  3. 03ត្រូវការ macOS Sonoma ឬថ្មីជាង — Safari ជំនាន់មុនមិនអាចដំឡើងកម្មវិធីវេបបានទេ។

Firefox លើកុំព្យូទ័របានឈប់គាំទ្រការដំឡើងកម្មវិធីវេប ដូច្នេះចំណាំទំព័រគឺជិតបំផុត។ Firefox លើ Android នៅតែមាន “Add to Home screen” ក្នុងម៉ឺនុយ។

អ្វីខ្លះនៅក្នុង manifest

ការដំឡើងទាំងមូលពឹងលើឯកសារតែមួយ ដែលបម្រើនៅ /site.webmanifest។ កម្មវិធីរុករកអានវាដើម្បីដឹងឈ្មោះកម្មវិធី រូបតំណាងណាត្រូវប្រើ និងរបៀបដែលបង្អួចត្រូវបើក។

site.webmanifest
{
  "name": "harvis.dev",
  "short_name": "harvis.dev",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#13161a",
  "theme_color": "#13161a",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

“standalone” គឺជាវាលដែលដកស៊ុមកម្មវិធីរុករកចេញ ចំណែករូបតំណាង maskable គឺជារូបដែល Android កាត់តាមរាងរបស់ខ្លួន។

ធ្វើឱ្យគេហទំព័ររបស់អ្នកដំឡើងបាន

អ្វីក៏ដោយដែលអ្នកដាក់ផ្សាយលើ harvis.dev អាចដំឡើងបានដូចគ្នា។ ដាក់ manifest.json នៅក្បែរ index.html ភ្ជាប់វាពី head និងបញ្ចូលរូបតំណាង 192px និង 512px — ត្រឹមនេះជាតម្រូវការទាំងអស់។

html
<!-- index.html -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#13161a">

កម្មវិធីរុករកក៏ទាមទារ HTTPS មុននឹងស្នើឱ្យដំឡើងផងដែរ។ អាសយដ្ឋាន harvis.dev ទាំងអស់បម្រើតាម HTTPS ស្រាប់ ដូច្នេះគ្មានអ្វីត្រូវកំណត់ទេ។