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

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

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

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

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

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

פתיחת קובץ

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

1. מתעדים את כינוי הקבצים מה-API לבחירת קבצים בגישה למערכת הקבצים. כך תקבלו מידע בסיסי על הקובץ.
2. באמצעות השיטה getFile() של הכינוי, תקבלו סוג מיוחד של Blob בשם File, שכולל מאפיינים נוספים לקריאה בלבד (כמו שם ותאריך שינוי אחרון) של הקובץ. בגלל שמדובר ב-Bblob, אפשר לקרוא לו שיטות של 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, לא למערכת הציבורית, אלא כארגז חול (Sandbox) פרטי מקור. אפשר לקרוא ולכתוב קבצים במערכת הקבצים הווירטואלית רק באמצעות ה-API הזה.

טיפול בקבצים

File System Access API מאפשר לפתוח קבצים מתוך האפליקציה, אבל מה עושים להיפך? המשתמשים רוצים להגדיר את האפליקציה המועדפת עליהם כברירת המחדל לפתיחת קבצים באמצעותה. ה-API לטיפול בקבצים הוא API ניסיוני שמאפשר לאפליקציות PWA מותקנות: רישום בתור handler של קבצים במכשיר של המשתמש, ולציין את סוג ה-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 עם חבילות WebAPK, אפליקציות PWA רשומות באופן אוטומטי כרכיבי handler להיקף של המניפסט עם מסנן Intent של Android, ואי אפשר להוסיף לו עוד מקורות או היקפי הרשאות. ב-iOS וב-iPadOS, אפשר לטפל רק בכתובות URL עם אפליקציות PWA שפורסמו ב-AppStore, כמו אלה שנוצרו באמצעות PWABuilder.

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

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

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

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

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

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

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

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

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

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

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

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

תמיכה בדפדפן

• 89
• 93
• 
• 12.1

מקור

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

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

• טקסט (נכסים title ו-text)
• כתובת URL (נכס אחד (url))
• קבצים (מאפיין files).

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

כדי לבקש את פעולת השיתוף, צריך להתקשר אל navigator.share(objectToShare). קריאה זו מחזירה הבטחה שמסתיימת ב-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 המשותפת. כדי לקרוא את הנתונים האלה מהמחרוזת window.location, אפשר להשתמש ב-JavaScript על ידי ניתוח הנתונים באמצעות ה-constructor של URL.

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

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

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

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

תמיכה בדפדפן

• X
• X
• X
• X

מקור

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

ה-Contact Picker 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: גישה פשוטה יותר לקבצים מקומיים
• מגדירים אפליקציות אינטרנט מותקנות כרכיבי handler של קבצים
• טיפול בקבצים ב-Progressive Web Apps
• שילוב עם ממשק המשתמש של מערכת ההפעלה לשיתוף עם Web Share API
• שיתוף תוכן עם אפליקציות אחרות
• קבלת נתונים משותפים באמצעות Web Share Target API
• הכלי לבחירת אנשי קשר באינטרנט