برنامه های وب پیشرو: از تب تا نوار وظیفه

1. خوش آمدید

در این آزمایشگاه، یک برنامه وب موجود را می گیرید و آن را قابل نصب می کنید. این چهارمین مورد از مجموعه کدهای همراه برای کارگاه برنامه وب پیشرفته است. آزمایشگاه کد قبلی IndexedDB بود. چهار کد لبه دیگر در این سری وجود دارد.

چیزی که یاد خواهید گرفت

  • یک کارگر خدماتی را با دست بنویسید
  • یک Service Worker را به یک برنامه وب موجود اضافه کنید
  • از Service Worker و Cache Storage API برای در دسترس قرار دادن منابع به صورت آفلاین استفاده کنید

آنچه شما باید بدانید

  • HTML پایه و جاوا اسکریپت

آنچه شما نیاز خواهید داشت

2. راه اندازی کنید

با شبیه‌سازی یا دانلود کد شروع مورد نیاز برای تکمیل این لبه کد شروع کنید:

اگر مخزن را شبیه سازی می کنید، مطمئن شوید که در شاخه pwa04--tab-to-taskbar هستید. فایل فشرده حاوی کد آن شاخه نیز می باشد.

این پایگاه کد به Node.js 14 یا بالاتر نیاز دارد. هنگامی که کد را در دسترس دارید، npm ci از خط فرمان موجود در پوشه کد اجرا کنید تا تمام وابستگی های مورد نیاز خود را نصب کنید. سپس، npm start اجرا کنید تا سرور توسعه برای Codelab راه اندازی شود.

فایل README.md کد منبع توضیحی برای همه فایل های توزیع شده ارائه می دهد. علاوه بر این، فایل‌های موجود کلیدی که در سرتاسر این Codelab با آنها کار خواهید کرد، به شرح زیر است:

فایل های کلیدی

  • index.html - برنامه اصلی HTML

3. یک مانیفست برنامه وب ایجاد کنید

فایل‌های مانیفست برنامه‌های وب PWA شما را توصیف می‌کنند تا مرورگر به همراه یک Service Worker کارآمد، بداند که برنامه وب شما قابل نصب است و مهمتر از همه، نحوه نمایش بر روی دستگاهی که در آن نصب خواهد شد. با این حال، ابتدا باید ایجاد شود. فایلی به نام manifest.json را به پوشه public برنامه وب خود اضافه کنید و موارد زیر را به آن اضافه کنید:

{
  "name": "PWA Edit",
  "short_name": "PWA Edit",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "type": "image/png",
      "sizes": "192x192",
      "src": "/images/icons/logo-192.png"
    },
    {
      "type": "image/png",
      "sizes": "48x48",
      "src": "/images/icons/logo-48.png"
    },
    {
      "type": "image/png",
      "sizes": "72x72",
      "src": "/images/icons/logo-72.png"
    },
    {
      "type": "image/png",
      "sizes": "128x128",
      "src": "/images/icons/logo-128.png"
    },
    {
      "type": "image/png",
      "sizes": "384x384",
      "src": "/images/icons/logo-384.png"
    },
    {
      "type": "image/png",
      "sizes": "512x512",
      "src": "/images/icons/logo-512.png"
    },
    {
      "type": "image/png",
      "sizes": "96x96",
      "src": "/images/icons/logo-96.png"
    },
    {
      "type": "image/png",
      "sizes": "1024x1024",
      "src": "/images/icons/maskable-1024.png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#282c34",
  "background_color": "#282c34",
  "description": "A PWA markdown editor",
  "categories": ["productivity", "utilities"]
}

فراموش نکنید که نماد لمس اپل را برای دستگاه های iOS اضافه کنید. خط کد زیر را درست بعد از تگ <title> در <head> در index.html اضافه کنید

<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />

توضیح

این مانیفست شامل فیلدهای ضروری، توصیه شده و تبلیغاتی است، بنابراین چیزهای زیادی در جریان است. ابتدا، فیلدهای مورد نیاز که در آنها نام PWA، URL شروع، حالت نمایش و نمادها تعریف شده است. توجه داشته باشید که آخرین نماد یک نماد قابل ماسک است که امکان نمایش چندین نماد بر اساس رابط کاربری دستگاه را فراهم می کند. در مرحله بعد، زمینه های پیشنهادی زمینه و رنگ پس زمینه وجود دارد. در نهایت، زمینه های تبلیغاتی، توضیحات و دسته بندی هایی که این PWA در آنها قرار می گیرد وجود دارد. هنگامی که این مانیفست به یک PWA متصل می شود، این فیلدها نحوه نمایش و مدیریت برنامه نصب شده PWA ما را کنترل می کنند.

4. Manifest را به PWA متصل کنید

با ایجاد فایل مانیفست، باید آن را پیوست کنید تا با PWA مرتبط شود. برای انجام این کار، index.html را باز کنید و موارد زیر را درست زیر تگ <title> در <head> اضافه کنید:

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

توضیح

پیوند مانیفست به مرورگرهایی که از آن پشتیبانی می‌کنند می‌گوید که مانیفست برنامه وب پیوند شده، وب‌سایت فعلی را توصیف می‌کند. زمانی که معتبر و در دسترس باشد، با یک سرویس دهنده کار، و پس از اینکه برنامه وب هر معیار نصب اضافی مخصوص مرورگر را رد کرد، به برنامه شما اجازه می دهد تا مستقیماً روی دستگاه کاربر نصب شود!

5. میانبرها را اضافه کنید

یکی از راه‌های عالی برای ایجاد احساس یکپارچگی عمیق‌تر PWA با دستگاه، ارائه میانبرهای منوی زمینه برای عملکردهای خاص در برنامه شما است. تغییر حالت Night Mode در PWA امکان انتخاب حالت را با تنظیم پارامتر درخواست mode روی night یا day فراهم می کند. دو میانبر در manifest.json راه اندازی کنید که موارد زیر را انجام می دهند:

  • PWA را در حالت night یا day راه اندازی می کند
  • از /images/logo.svg در اندازه 150x150 برای یک نماد استفاده می کند

6. تبریک!

شما به تازگی یاد گرفته اید که چگونه یک فایل مانیفست برنامه وب ایجاد کنید، آن را به یک صفحه وب پیوست کنید و پس از نصب، میانبرهای برنامه را اضافه کنید.

کد بعدی این سری Prompting & Measuring Install است