یکپارچه سازی سیستم عامل

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

کار با فایل سیستم

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

• یک فایل یا پوشه را از دستگاه انتخاب کنید و مستقیماً آن را باز کنید.
• تغییراتی در آن فایل ها یا پوشه ها ایجاد کنید و تغییرات را مستقیماً ذخیره کنید.
• فایل ها و پوشه های جدید بسازید.

قبل از File System Access API ، برنامه های وب نمی توانستند این کار را انجام دهند. باز کردن فایل‌ها نیاز به آپلود فایل داشت، ذخیره تغییرات نیاز به دانلود آن‌ها توسط کاربران داشت و وب اصلاً دسترسی به ایجاد فایل‌ها و پوشه‌های جدید در سیستم فایل کاربر نداشت.

باز کردن یک فایل

برای باز کردن یک فایل از متد window.showOpenFilePicker() استفاده می کنیم. توجه داشته باشید که این روش به یک حرکت کاربر مانند کلیک دکمه نیاز دارد. در اینجا بقیه تنظیمات برای باز کردن یک فایل آمده است:

1. دسته فایل را از 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();

رسیدگی به پرونده

File System Access API به شما امکان می دهد فایل ها را از داخل برنامه خود باز کنید، اما برعکس آن چطور؟ کاربران می خواهند برنامه مورد علاقه خود را به عنوان پیش فرض تنظیم کنند تا فایل ها را با آن باز کنند. API مدیریت فایل یک API آزمایشی است که به PWA های نصب شده اجازه می دهد: به عنوان یک کنترل کننده فایل در دستگاه کاربر ثبت نام کنید و نوع MIME و پسوند فایلی را که PWA شما در مانیفست برنامه وب شما پشتیبانی می کند، مشخص کنید. می توانید نمادهای فایل سفارشی را برای پسوندهای پشتیبانی شده خود مشخص کنید.

پس از ثبت نام، PWA نصب شده شما به عنوان یک گزینه از سیستم فایل کاربر نشان داده می شود و به آنها اجازه می دهد فایل را مستقیماً در آن باز کنند. در اینجا نمونه ای از تنظیمات مانیفست برای PWA برای خواندن فایل های متنی آورده شده است:

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

مدیریت URL

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

هنگامی که از WebAPK استفاده می شود، مانند زمانی که کاربران PWA را با Chrome نصب می کنند، این رفتار به طور خودکار در Android در دسترس است. گرفتن 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": [ "/*" ]
            }
        }
    ]
}

مدیریت پروتکل URL

مدیریت URL با URL های استاندارد پروتکل https کار می کند، اما می توان از طرح های URI سفارشی مانند pwa:// استفاده کرد. در چندین سیستم عامل، برنامه های نصب شده با ثبت طرح های خود توسط برنامه ها، این توانایی را به دست می آورند.

برای PWA، این قابلیت با استفاده از API کنترل کننده پروتکل URL فعال می شود که فقط در دستگاه های رومیزی موجود است. شما فقط می توانید با توزیع PWA خود در فروشگاه های برنامه، پروتکل های سفارشی را برای دستگاه های تلفن همراه مجاز کنید.

برای ثبت نام، می توانید از متد registerProtocolHandler() استفاده کنید، یا از عضو protocol_handlers در مانیفست خود، با طرح دلخواه و URL که می خواهید در زمینه PWA بارگیری کنید، استفاده کنید، مانند:

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

می توانید URL را from-protocol به کنترل کننده صحیح هدایت کنید و value رشته پرس و جو را در PWA خود دریافت کنید. %s یک مکان‌نما برای URL فراری است که عملیات را آغاز کرده است، بنابراین اگر پیوندی مانند <a href="web+pwa://testing"> دارید، PWA شما /from-protocol?value=testing باز می‌شود. /from-protocol?value=testing .

تماس با سایر برنامه ها

می توانید از طرح های URI برای اتصال به هر برنامه نصب شده دیگر (PWA یا غیر PWA) در دستگاه های کاربران در هر پلت فرم استفاده کنید. شما فقط باید یک پیوند ایجاد کنید یا از navigator.href استفاده کنید و به طرح URI مورد نظر خود اشاره کنید و آرگومان ها را به شکل URL-escape ارسال کنید.

می‌توانید از طرح‌های استاندارد شناخته‌شده، مانند tel: برای تماس‌های تلفنی، mailto: برای ارسال ایمیل، یا sms: برای پیام‌های متنی استفاده کنید. یا می‌توانید درباره طرح‌های URL برنامه‌های دیگر، به عنوان مثال از پیام‌رسانی، نقشه‌ها، ناوبری، جلسات آنلاین، شبکه‌های اجتماعی و فروشگاه‌های برنامه‌های کاربردی، اطلاعات کسب کنید.

اشتراک گذاری وب

با 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 که در مشخصات پیش نویس Web 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' ) یا در متن درخواست با استفاده از رمزگذاری انتخاب شده

برای مثال، می‌توانید برای PWA خود تعریف کنید که می‌خواهید داده‌های مشترک (فقط عنوان و آدرس اینترنتی) را با افزودن در مانیفست خود دریافت کنید:

...
"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 آدرس اینترنتی مشترک است. می توانید از جاوا اسکریپت برای خواندن آن داده ها از رشته 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.
   }
}

منابع

• API دسترسی به سیستم فایل: دسترسی به فایل های محلی را ساده می کند
• اجازه دهید برنامه های کاربردی وب نصب شده، کنترل کننده فایل باشند
• مدیریت فایل‌ها در برنامه‌های وب پیشرفته
• با رابط کاربری اشتراک گذاری سیستم عامل با Web Share API یکپارچه شوید
• اشتراک گذاری محتوا با سایر برنامه ها
• دریافت داده های مشترک با Web Share Target API
• انتخابگر مخاطب برای وب