שילוב מערכת הפעלה

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

עבודה עם מערכת הקבצים

תהליך העבודה של משתמש אופייני באמצעות קבצים נראה כך:

• בוחרים קובץ או תיקייה מהמכשיר ופותחים אותם ישירות.
• לבצע שינויים בקבצים או בתיקיות האלה ולשמור את השינויים ישירות.
• ליצור קבצים ותיקיות חדשים.

לפני File System Access API, אפליקציות אינטרנט לא יכלו לעשות זאת. כדי לפתוח קבצים היה צריך להעלות אותם, כדי לשמור שינויים המשתמשים היו צריכים להוריד אותם, ולאינטרנט לא הייתה גישה בכלל ליצירת קבצים ותיקיות חדשים במערכת הקבצים של המשתמש.

פתיחת קובץ

כדי לפתוח קובץ, אנחנו משתמשים ב-method‏ window.showOpenFilePicker(). חשוב לזכור שהשיטה הזו דורשת מחווה של המשתמש, כמו לחיצה על לחצן. כך מגדירים את האפשרות לפתוח קובץ:

1. מתעדים את האחיזוק בקובץ מ-File System Access API של בורר הקבצים. כך תוכלו לקבל מידע בסיסי על הקובץ.
2. באמצעות השיטה getFile() של הידית, תקבלו סוג מיוחד של Blob שנקרא File, שכולל מאפיינים נוספים של הקובץ שניתנים לקריאה בלבד (כמו שם ותאריך השינוי האחרון). מכיוון שמדובר ב-Blob, אפשר להפעיל עליו שיטות Blob, כמו text(), כדי לקבל את התוכן שלו.

// Have the user select a file.
const [ handle ] = await window.showOpenFilePicker();
// Get the File object from the handle.
const file = await handle.getFile();
// Get the file content.
// Also available, slice(), stream(), arrayBuffer()
const content = await file.text();

שמירת השינויים מתבצעת

כדי לשמור את השינויים בקובץ, צריך גם לבצע תנועת משתמש. לאחר מכן:

1. משתמשים במזהה הקובץ כדי ליצור FileSystemWritableFileStream.
2. מבצעים שינויים בשידור. הפעולה הזו לא תעדכן את הקובץ במקום, בדרך כלל נוצר קובץ זמני.
3. בסיום ביצוע השינויים, סוגרים את הסטרימינג כדי שהשינויים יהיו קבועים ולא זמניים.

בואו נראה את זה בקוד:

// Make a writable stream from the handle.
const writable = await handle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();

אזהרה: ב-Safari משתמשים ב-File System Access API, לא עבור המערכת הציבורית, אלא כארגז חול פרטי ברמת המקור. אפשר לקרוא ולכתוב קבצים במערכת הקבצים הווירטואלית הזו רק באמצעות ה-API הזה.

טיפול בקבצים

באמצעות File System Access API אפשר לפתוח קבצים מתוך האפליקציה, אבל מה לגבי הכיוון ההפוך? המשתמשים רוצים להגדיר את האפליקציה האהובה עליהם כברירת מחדל לפתיחת קבצים. File Handling API הוא ממשק API ניסיוני שמאפשר לאפליקציות PWA מותקנות: להירשם כמנהל קבצים במכשיר של המשתמש, ולציין את סוג ה-MIME ואת סיומת הקובץ שבהם ה-PWA תומך במניפסט של אפליקציית האינטרנט. אתם יכולים לציין סמלי קבצים מותאמים אישית לסיומות הנתמכות.

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

...
"file_handlers": [
     {
         "action": "/open-file",
         "accept": {
             "text/*": [".txt"]
         }
     }
]
...

טיפול בכתובות URL

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

ההתנהגות הזו זמינה באופן אוטומטי ב-Android כשמשתמשים ב-WebAPK, למשל כשמשתמשים מתקינים אפליקציית PWA באמצעות Chrome. אי אפשר לצלם כתובות URL באפליקציות PWA שמותקנות ב-iOS וב-iPadOS מ-Safari.

לקהילה של דפדפני האינטרנט יש מפרט חדש לדפדפני מחשב. המפרט הזה נמצא כרגע בשלב ניסיוני, והוא מוסיף חבר חדש לקובץ המניפסט: url_handlers. המאפיין הזה מצפה למערך של מקורות שה-PWA רוצה לתעד. המקור של אפליקציית ה-PWA שלכם יקבל את ההרשאה באופן אוטומטי, וכל מקור אחר יצטרך לאשר את הטיפול הזה באמצעות קובץ בשם web-app-origin-association. לדוגמה, אם המניפסט של ה-PWA מתארח ב-web.dev ואתם רוצים להוסיף את המקור app.web.dev, הוא ייראה כך:

"url_handlers": [
    {"origin": "https://app.web.dev"},
]

במקרה כזה, הדפדפן יבדוק אם קיים קובץ בכתובת app.web.dev/.well-known/web-app-origin-association, ויקבל את טיפול כתובת ה-URL מכתובת ה-URL ברמת ה-PWA. המפתח צריך ליצור את הקובץ הזה. בדוגמה הבאה, הקובץ נראה כך:

{
    "web_apps": [
        {
            "manifest": "/mypwa/app.webmanifest",
            "details": {
                "paths": [ "/*" ]
            }
        }
    ]
}

ב-Android עם WebAPKs, אפליקציות PWA נרשמות באופן אוטומטי כמטפלים בהיקף המניפסט באמצעות מסנן כוונה של Android, ואי אפשר להוסיף אליו מקורות או היקפים נוספים. ב-iOS וב-iPadOS, אפשר לטפל רק בכתובות URL עם אפליקציות PWA שפורסמו ב-AppStore, כמו כאלה שנוצרו באמצעות PWABuilder.

טיפול בפרוטוקולים של כתובות URL

עיבוד כתובות URL פועל עם כתובות URL רגילות של פרוטוקול https, אבל אפשר להשתמש בסכימות URI בהתאמה אישית, כמו pwa://. במספר מערכות הפעלה, אפליקציות מותקנות מקבלות את היכולת הזו על ידי רישום הסכימות שלהן.

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

זהירות: ב-PWA שמשתמשים ב-API של טיפול בפרוטוקול של כתובת URL, שם הפרוטוקול חייב להיות אחד מהסכימות שמופיעות ברשימה המאובטחת, או שצריך להשתמש בקידומת web+. לכן, בדוגמה שלנו, הקישור צריך להפנות אל web+pwa:// כדי לפתוח את אפליקציית ה-PWA שלנו.

כדי להירשם, אפשר להשתמש בשיטה registerProtocolHandler()‎ או להשתמש במשתנה protocol_handlers במניפסט, עם הסכימה הרצויה וכתובת ה-URL שרוצים לטעון בהקשר של ה-PWA, למשל:

...
{
  "protocol_handlers": [
    {
      "protocol": "web+pwa",
      "url": "/from-protocol?value=%s"
    },
  ]
}
...

אתם יכולים לנתב את כתובת ה-URL from-protocol למטפל הנכון ולקבל את מחרוזת השאילתה value ב-PWA. הערך %s הוא placeholder לכתובת ה-URL עם הבריחה שהפעילה את הפעולה. לכן, אם יש לכם קישור כלשהו כמו <a href="web+pwa://testing">, אפליקציית ה-PWA תפתח את /from-protocol?value=testing.

שיחות מאפליקציות אחרות

אפשר להשתמש בסכימות URI כדי להתחבר לכל אפליקציה מותקנת אחרת (PWA או לא) במכשירים של המשתמשים בכל פלטפורמה. פשוט יוצרים קישור או משתמשים ב-navigator.href ומפנים לסכימה הרצויה של ה-URI, מעבירים את הארגומנטים בפורמט של כתובת URL עם תווי בריחה.

אפשר להשתמש בסכימות סטנדרטיות מוכרות, כמו tel: לשיחות טלפון, mailto: לשליחת אימייל או sms: לשליחת הודעות טקסט. אפשר גם לקרוא על סכימות כתובות URL של אפליקציות אחרות, למשל אפליקציות ידועות לשליחת הודעות, מפות, ניווט, פגישות אונליין, רשתות חברתיות וחנויות אפליקציות.

הערה: במקום להשתמש בסכימות URI פרטיות כדי לתקשר עם אפליקציות של הודעות ומדיה חברתית, אפשר להשתמש ב-Web Share API הגנרי

שיתוף באינטרנט

Browser Support

• 89
• 93
• 
• 12.1

Source

באמצעות Web Share API, אפליקציית ה-PWA יכולה לשלוח תוכן לאפליקציות אחרות שמותקנות במכשיר דרך הערוץ המשותף.

ה-API זמין רק במערכות הפעלה עם מנגנון share, כולל Android,‏ iOS,‏ iPadOS,‏ Windows ו-ChromeOS. אתם יכולים לשתף אובייקט שמכיל:

• טקסט (נכסים מסוג title ו-text)
• כתובת URL (נכס url)
• קבצים (נכס files).

כדי לבדוק אם המכשיר הנוכחי יכול לשתף נתונים פשוטים, כמו טקסט, בודקים אם השיטה navigator.share() קיימת. כדי לשתף קבצים, בודקים אם השיטה navigator.canShare() קיימת.

כדי לבקש את פעולת השיתוף, קוראים ל-navigator.share(objectToShare). הקריאה הזו מחזירה Promise שמתבצעת בו פתרון עם undefined או דחייה עם חריגה.

יעד שיתוף באינטרנט

Web Share Target API מאפשר ל-PWA שלכם להיות יעד של פעולת שיתוף מאפליקציה אחרת במכשיר, בין אם מדובר ב-PWA ובין אם לא. אפליקציית ה-PWA מקבלת את הנתונים ששותפו על ידי אפליקציה אחרת.

התכונה הזו זמינה כרגע ב-Android עם WebAPK וב-ChromeOS, והיא פועלת רק אחרי שהמשתמש מתקין את אפליקציית ה-PWA שלכם. הדפדפן רושם את יעד השיתוף במערכת ההפעלה כשהאפליקציה מותקנת.

מגדירים יעד שיתוף באינטרנט במניפסט באמצעות החבר share_target שמוגדר בטיוטת המפרט של יעד שיתוף באינטרנט. share_target מוגדר לאובייקט עם כמה מאפיינים:

action

כתובת ה-URL שתיטען בחלון של אפליקציית PWA שצפויה לקבל את הנתונים המשותפים.

method

שיטת הפועל של ה-HTTP תשמש לפעולה, כמו GET,‏ POST או PUT.

enctype

(אופציונלי) סוג הקידוד של הפרמטרים. כברירת מחדל, הערך הוא application/x-www-form-urlencoded, אבל אפשר גם להגדיר אותו כ-multipart/form-data לשיטות כמו POST.

params

אובייקט שימפה את נתוני השיתוף (מהמפתחות: title, ‏ text, ‏ url ו-files מ-Web Share) לארגומנטים שהדפדפן יעביר בכתובת ה-URL (ב-method: 'GET') או בגוף הבקשה באמצעות הקידוד שנבחר.

הערה: אם רוצים למנוע פנייה לרשת, אפשר לנתח בקשת POST בצד השרת או בתוך ה-service worker. פרטים נוספים זמינים בדוגמה הזו.

לדוגמה, אפשר להגדיר לאפליקציית ה-PWA שאתם רוצים לקבל נתונים משותפים (כותרת וכתובת URL בלבד) על ידי הוספה למניפסט:

...
"share_target": {
   "action": "/receive-share/",
   "method": "GET",
   "params": {
      "title": "shared_title",
      "url": "shared_url"
   }
}
...

לפי הדוגמה הקודמת, אם אפליקציה כלשהי במערכת משתפת כתובת URL עם כותרת, והמשתמש בוחר את ה-PWA שלכם בתיבת הדו-שיח, הדפדפן ייצור ניווט חדש אל /receive-share/?shared_title=AAA&shared_url=BBB של המקור, כאשר AAA הוא הכותרת המשותפת ו-BBB היא כתובת ה-URL המשותפת. אפשר להשתמש ב-JavaScript כדי לקרוא את הנתונים האלה מהמחרוזת window.location על ידי ניתוח שלה באמצעות ה-constructor‏ URL.

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

הערה: חשוב לוודא שאפשר לגשת לדף שמטפל בנתונים המשותפים במצב אופליין. אתם לא רוצים שמשתמשים יבחרו באפליקציה שלכם ויקבלו שגיאה כי אין להם חיבור כרגע.

דוגמאות מפורטות יותר ומידע על קבלת קבצים זמינים במאמר קבלת נתונים משותפים באמצעות Web Share Target API

בורר אנשי הקשר

Browser Support

• x
• x
• x
• x

Source

באמצעות Contact Picker API, אפשר לבקש מהמכשיר להציג תיבת דו-שיח מקורית עם כל אנשי הקשר של המשתמש, כדי שהמשתמש יוכל לבחור אחד או יותר מהם. לאחר מכן, אפליקציית ה-PWA תוכל לקבל את הנתונים הרצויים מאנשי הקשר האלה.

ה-API לבחירת אנשי קשר זמין בעיקר במכשירים ניידים, והכול מתבצע דרך הממשק navigator.contacts בפלטפורמות תואמות.

אפשר לבקש את הנכסים הזמינים לשאילתה באמצעות navigator.contacts.getProperties(), ולבקש בחירת איש קשר יחיד או כמה אנשי קשר באמצעות רשימה של הנכסים הרצויים.

דוגמאות למאפיינים: name,‏ email,‏ address ו-tel. כשמבקשים מהמשתמש לבחור איש קשר אחד או יותר, אפשר להפעיל את navigator.contacts.select(properties) ולהעביר מערך של מאפיינים שרוצים לקבל בתמורה.

אזהרה: ה-API לא מבטיח שבאובייקטים שיוחזרו יהיו כל המאפיינים המבוקשים, לכן צריך לבדוק שוב אם הם נמצאים.

בדוגמה הבאה מפורטים אנשי הקשר שהתקבלו על ידי הבורר.

async function getContacts() {
   const properties = ['name', 'email', 'tel'];
   const options = { multiple: true };
   try {
     const contacts = await navigator.contacts.select(properties, options);
     console.log(contacts);
   } catch (ex) {
     // Handle any errors here.
   }
}

משאבים

• File System Access API: פשוט יותר לגשת לקבצים מקומיים
• איך מאפשרים לאפליקציות אינטרנט מותקנות להיות מטפלי קבצים
• טיפול בקבצים באפליקציות Progressive Web App
• שילוב עם ממשק המשתמש של שיתוף במערכת ההפעלה באמצעות Web Share API
• שיתוף תוכן עם אפליקציות אחרות
• קבלת נתונים משותפים באמצעות Web Share Target API
• כלי לבחירת איש קשר באינטרנט