מתכוננים לסיום של קובצי cookie של צדדים שלישיים ב-Chrome. כדאי לבדוק את האתר עוד היום כדי לוודא שאין תקלות.

דף זה תורגם על ידי Cloud Translation API.

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

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

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

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

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

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

פתיחת קובץ

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

לוכדים את כינוי הקובץ דרך ה-API של בוחר הקבצים לגישה למערכת הקבצים. הפעולה הזו מספקת מידע בסיסי על הקובץ.
אם משתמשים בשיטה 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();

המערכת שומרת את השינויים

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

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

אפשר לראות את זה בקוד:

// 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();

טיפול בקבצים

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. לא ניתן לתעד מ-Safari כתובות URL באפליקציות PWA שמותקנות ב-iOS וב-iPadOS.

לדפדפנים במחשבים, קהילת דפדפן האינטרנט יצרה מפרט חדש. המפרט הזה הוא כרגע ניסיוני. הוא מוסיף חבר חדש לקובץ המניפסט: 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": [ "/*" ]
            }
        }
    ]
}

טיפול בפרוטוקול של כתובות 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 הרצויה, ולהעביר את הארגומנטים בצורה של תווי escape לכתובת URL.

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

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

תמיכה בדפדפן

89
93
12.1

מקור

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

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

טקסט (נכסים של title ו-text)
כתובת URL (נכס אחד (url))
קבצים (נכס files).

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

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

בזכות 'שיתוף באינטרנט', Chrome ב-Android וב-Safari ב-iOS פותח את גיליון השיתוף.

יעד נתח האינטרנט

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 משיתוף אינטרנט) לארגומנטים שהדפדפן יעביר בכתובת ה-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 על ידי ניתוח שלהם באמצעות הבנאי URL.

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

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

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

תמיכה בדפדפן

מקור

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

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

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

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

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

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.
   }
}

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

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

פתיחת קובץ

המערכת שומרת את השינויים

טיפול בקבצים

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

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

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

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

יעד נתח האינטרנט

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

משאבים