אפליקציות Progressive Web App: מתוך כרטיסייה לסרגל המשימות

1. שלום

בשיעור ה-Lab הזה תלמדו איך לקחת אפליקציית אינטרנט קיימת ולהפוך אותה לאפליקציה שאפשר להתקין. ה-codelab הזה הוא הרביעי בסדרת codelabs נלווים לסדנת Progressive Web App. ה-codelab הקודם היה בנושא IndexedDB. יש עוד ארבעה codelabs בסדרה הזו.

מה תלמדו

  • כתיבה של Service Worker באופן ידני
  • הוספת Service Worker לאפליקציית אינטרנט קיימת
  • שימוש ב-Service Worker וב-Cache Storage API כדי להפוך משאבים לזמינים אופליין

מה חשוב לדעת

  • HTML ו-JavaScript בסיסיים

מה צריך

2. טיפים להגדרה

כדי להתחיל, משכפלים או מורידים את הקוד לתחילת הדרך שנדרש להשלמת ה-Codelab הזה:

אם משכפלים את המאגר, חשוב לוודא שנמצאים בהסתעפות pwa04--tab-to-taskbar. קובץ ה-ZIP מכיל גם את הקוד של הענף הזה.

בסיס הקוד הזה דורש 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"]
}

אל תשכחו לכלול סמל Apple Touch למכשירי iOS. מוסיפים את שורת הקוד הבאה מיד אחרי התג <title> ב-<head> ב-index.html

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

הסבר

קובץ המניפסט הזה כולל שדות חובה, שדות מומלצים ושדות לקידום מכירות, אז יש בו הרבה מידע. קודם כל, השדות הנדרשים שבהם מוגדרים השם, כתובת ה-URL להפעלה, מצב התצוגה והסמלים של ה-PWA. שימו לב שהסמל האחרון הוא סמל שאפשר להחיל עליו מסכה, ולכן אפשר להציג כמה סמלים שונים בהתאם לממשק המשתמש של המכשיר. אחרי זה מופיעים השדות של העיצוב המומלץ וצבע הרקע. לבסוף, יש את השדות של המבצע, תיאור וקטגוריות שה-PWA מתאים להן. כשקובץ המניפסט הזה מצורף ל-PWA, השדות האלה קובעים איך האפליקציה המותקנת של ה-PWA תוצג ותנוהל.

4. צירוף מניפסט ל-PWA

אחרי שיוצרים את קובץ המניפסט, צריך לצרף אותו כדי לקשר אותו ל-PWA. כדי לעשות את זה, פותחים את index.html ומוסיפים את הקוד הבא מיד מתחת לתג <title> ב-<head>:

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

הסבר

קישור למניפסט יציין לדפדפנים שתומכים בו שהמניפסט המקושר של אפליקציית האינטרנט מתאר את האתר הנוכחי. אם קובץ ה-service worker תקין וזמין, ואם אפליקציית האינטרנט עומדת בקריטריונים נוספים להתקנה שספציפיים לדפדפן, המשתמש יכול להתקין את האפליקציה ישירות במכשיר שלו.

5. הוספת קיצורי דרך

אחת הדרכים לשפר את השילוב של ה-PWA במכשיר היא לספק קיצורי דרך לתפריט ההקשר לפונקציות ספציפיות באפליקציה. המתג של מצב הלילה ב-PWA מאפשר לבחור את המצב על ידי הגדרת פרמטר שאילתה mode לערך night או day. מגדירים שני קיצורי דרך ב-manifest.json שמבצעים את הפעולות הבאות:

  • הפעלת ה-PWA במצב night או במצב day
  • שימוש ב-/images/logo.svg בגודל 150x150 לסמל

6. מעולה!

במאמר הזה למדתם איך ליצור קובץ מניפסט של אפליקציית אינטרנט, לצרף אותו לדף אינטרנט ולהוסיף קיצורי דרך לאפליקציה כשהיא מותקנת.

ה-codelab הבא בסדרה הוא Prompting & Measuring Install