کاری کنید که برنامه وب پیشرو شما شبیه یک وب سایت نباشد، بلکه شبیه یک برنامه "واقعی" باشد
هنگامی که یک بازی تبلیغاتی وب پیشرو یکنوع بازی شبیه لوتو را بازی می کنید، این یک شرط مطمئن برای تنظیم روی "PWA ها فقط وب سایت ها هستند" است. مستندات PWA مایکروسافت موافق است ، ما آن را در همین سایت می گوییم ، و حتی نامزدهای PWA، فرانسیس بریمن و الکس راسل نیز چنین می نویسند . بله، PWA ها فقط وب سایت هستند، اما آنها نیز بسیار بیشتر از این هستند. اگر به درستی انجام شود، یک PWA شبیه یک وب سایت نیست، بلکه شبیه یک برنامه "واقعی" است. حالا معنای یک اپلیکیشن واقعی بودن چیست؟
برای پاسخ به این سوال، اجازه دهید از برنامه پادکست اپل به عنوان مثال استفاده کنم. در macOS روی دسکتاپ و در iOS (به ترتیب و iPadOS) در تلفن همراه در دسترس است. در حالی که پادکست یک برنامه رسانه ای است، ایده های اصلی که من با کمک آن نشان می دهم، برای دسته های دیگر برنامه ها نیز کاربرد دارد.
قابلیت اجرای آفلاین
اگر یک قدم به عقب برگردید و به برنامههای مخصوص پلتفرم که روی تلفن همراه یا رایانه رومیزی خود دارید فکر کنید، یک چیز به وضوح مشخص میشود: هرگز چیزی دریافت نمیکنید. در برنامه پادکست، حتی اگر آفلاین باشم، همیشه چیزی وجود دارد. هنگامی که اتصال شبکه وجود ندارد، برنامه به طور طبیعی همچنان باز می شود. بخش نمودارهای برتر هیچ محتوایی را نشان نمیدهد، اما در عوض به پیام « درحالحاضر نمیتوانم وصل شوم» بازمیگردد که با دکمه «تلاش مجدد» جفت شده است. ممکن است خوشایندترین تجربه نباشد، اما من چیزی دریافتم.
برنامه پادکست از مدل پوسته برنامه پیروی می کند. تمام محتوای ثابتی که برای نشان دادن برنامه اصلی مورد نیاز است، به صورت محلی ذخیره می شود، از جمله تصاویر تزئینی مانند نمادهای منوی سمت چپ و نمادهای رابط کاربر پخش کننده اصلی. محتوای پویا مانند دادههای نمودارهای برتر فقط در صورت درخواست بارگیری میشود و در صورت عدم موفقیت در بارگیری، محتوای ذخیرهسازی شده محلی در دسترس است. مقاله The App Shell Model را بخوانید تا یاد بگیرید که چگونه این مدل معماری را در برنامه وب خود اعمال کنید.
محتوای آفلاین در دسترس و رسانه قابل پخش
در حالت آفلاین، از طریق کشوی سمت چپ، همچنان میتوانم به بخش دانلود شده رفته و از قسمتهای پادکست دانلود شده که آماده پخش هستند و با تمام ابردادهها مانند آثار هنری و توضیحات نمایش داده میشوند، لذت ببرم.
محتوای رسانهای که قبلاً بارگیری شده است را میتوان از حافظه پنهان ارائه کرد، به عنوان مثال با استفاده از دستور العمل صوتی و ویدیوی ذخیرهسازی شده سرویس از کتابخانه Workbox . سایر محتواها همیشه می توانند در حافظه پنهان یا در IndexedDB ذخیره شوند. برای همه جزئیات و اطلاع از اینکه چه زمانی از چه فناوری ذخیره سازی استفاده کنید، مقاله فضای ذخیره سازی برای وب را بخوانید. اگر دادههایی دارید که باید بهطور مداوم و بدون خطر پاک شدن در صورت کم شدن حافظه ذخیره شوند، میتوانید از API ذخیرهسازی دائمی استفاده کنید.
دانلود پس زمینه فعال
وقتی دوباره آنلاین شدم، مطمئناً میتوانم محتوایی را با درخواستی مانند http 203 جستجو کنم، و وقتی تصمیم گرفتم در نتیجه جستجو مشترک شوم، پادکست HTTP 203 ، آخرین قسمت سریال بلافاصله دانلود میشود، بدون سؤال.
دانلود یک قسمت پادکست عملیاتی است که احتمالاً ممکن است بیشتر طول بکشد. Background Fetch API به شما امکان می دهد دانلودها را به مرورگر واگذار کنید، که در پس زمینه از آنها مراقبت می کند. در اندروید، مرورگر به نوبه خود حتی میتواند این بارگیریها را بیشتر به سیستم عامل واگذار کند، بنابراین مرورگر نیازی به اجرای مداوم ندارد. پس از تکمیل بارگیری، کارمند سرویس برنامه شما بیدار می شود و شما می توانید تصمیم بگیرید که با پاسخ چه کاری انجام دهید.
اشتراک گذاری و تعامل با سایر برنامه ها
برنامه پادکست به طور طبیعی با سایر برنامه ها ادغام می شود. برای مثال، وقتی روی قسمتی که دوست دارم کلیک راست میکنم، میتوانم آن را با سایر برنامههای دستگاهم، مانند برنامه پیامها، به اشتراک بگذارم. همچنین به طور طبیعی با کلیپ بورد سیستم یکپارچه می شود. من می توانم روی هر قسمت کلیک راست کرده و پیوندی را به آن کپی کنم.
Web Share API و Web Share Target API به برنامه شما اجازه می دهد تا متن ها، فایل ها و پیوندها را به و از سایر برنامه های دستگاه به اشتراک بگذارد و دریافت کند. اگرچه هنوز برای یک برنامه وب امکان اضافه کردن آیتم های منو به منوی کلیک راست داخلی سیستم عامل وجود ندارد، اما راه های زیادی برای پیوند دادن به برنامه های دیگر در دستگاه و از آن وجود دارد. با Async Clipboard API ، میتوانید بهصورت برنامهنویسی دادههای متن و تصویر (تصاویر PNG) را در کلیپبورد سیستم بخوانید و بنویسید. در Android، میتوانید از Contact Picker API برای انتخاب ورودیها از مدیر مخاطبین دستگاه استفاده کنید. اگر هم یک برنامه مخصوص پلتفرم و هم یک PWA ارائه میدهید، میتوانید از Get Installed Related Apps API استفاده کنید تا بررسی کنید که آیا برنامه مخصوص پلتفرم نصب شده است یا خیر، در این صورت نیازی به تشویق کاربر برای نصب PWA یا پذیرش ندارید. اعلان های فشار وب
برنامه پسزمینه بهروزرسانی میشود
در تنظیمات برنامه پادکست، میتوانم برنامه را برای دانلود خودکار قسمتهای جدید پیکربندی کنم. به این ترتیب، من حتی مجبور نیستم به آن فکر کنم، محتوای به روز شده همیشه وجود خواهد داشت. شعبده بازي.
API Periodic Background Sync به برنامه شما اجازه میدهد تا محتوای خود را به طور منظم در پسزمینه بهروزرسانی کند، بدون اینکه نیازی به اجرای آن باشد. این به این معنی است که محتوای جدید به طور فعال در دسترس است، بنابراین کاربران شما می توانند هر زمان که تصمیم گرفتند فوراً در مورد آن تحقیق کنند.
حالت همگام سازی شده روی ابر
در همان زمان، اشتراکهای من در تمام دستگاههایی که دارم همگامسازی میشوند. در دنیایی یکپارچه، لازم نیست نگران همگام نگه داشتن اشتراک های پادکست خود باشم. به همین ترتیب، لازم نیست بترسم که حافظه دستگاه تلفن همراهم توسط قسمت هایی که قبلاً روی دسکتاپ خود گوش داده ام، مصرف شود. وضعیت پخش همگام نگه داشته می شود و قسمت های گوش داده شده به طور خودکار حذف می شوند.
همگامسازی دادههای وضعیت برنامه کاری است که میتوانید آن را به Background Sync API محول کنید. خود عملیات همگامسازی نباید فوراً انجام شود، فقط در نهایت ، و شاید حتی زمانی که کاربر برنامه را دوباره بسته باشد.
کنترل های کلید رسانه ای سخت افزاری
وقتی مشغول برنامه دیگری هستم، مثلاً با خواندن یک صفحه خبری در مرورگر کروم، همچنان میتوانم برنامه پادکست را با کلیدهای رسانه روی لپتاپم کنترل کنم. فقط برای پرش به جلو یا عقب نیازی به جابجایی به برنامه نیست.
کلیدهای رسانه توسط Media Session API پشتیبانی می شوند. مانند آن، کاربران می توانند از کلیدهای رسانه سخت افزاری روی صفحه کلید فیزیکی، هدفون خود استفاده کنند یا حتی برنامه وب را از کلیدهای رسانه نرم افزاری روی ساعت هوشمند خود کنترل کنند. یک ایده اضافی برای عملیات جستجوی روان، ارسال یک الگوی ارتعاشی زمانی است که کاربر قسمت قابل توجهی از محتوا را جستجو می کند، به عنوان مثال، از اعتبارات ابتدایی یا یک مرز فصل عبور می کند.
چند وظیفه ای و میانبر برنامه
البته من همیشه میتوانم از هرجایی به برنامه پادکست برگردم. این برنامه دارای یک نماد به وضوح قابل تشخیص است که می توانم آن را روی دسکتاپ یا داک برنامه خود قرار دهم تا زمانی که دلم خواست پادکست ها را فوراً راه اندازی کنیم.
برنامه های وب پیشرو در دسکتاپ و موبایل را می توان در صفحه اصلی، منوی شروع یا پایه برنامه نصب کرد. نصب میتواند بر اساس یک دستور فعال یا کاملاً توسط توسعهدهنده برنامه کنترل شود. مقاله برای نصب شدن چه چیزی لازم است؟ همه چیزهایی را که باید بدانید را پوشش می دهد. هنگام انجام چند کار، PWAها مستقل از مرورگر ظاهر می شوند.
اقدامات سریع در منوی زمینه
رایجترین اقدامات برنامه، جستجوی محتوای جدید و بررسی قسمتهای جدید ، مستقیماً از منوی زمینه برنامه در Dock در دسترس هستند. از طریق منوی گزینهها ، میتوانم تصمیم بگیرم برنامه را در زمان ورود باز کنم.
با مشخص کردن میانبرهای نماد برنامه در مانیفست برنامه وب PWA، می توانید مسیرهای سریعی را برای کارهای رایج ثبت کنید که کاربران می توانند مستقیماً از نماد برنامه به آنها دسترسی پیدا کنند. در سیستم عامل هایی مانند macOS، کاربران همچنین می توانند روی نماد برنامه کلیک راست کرده و برنامه را تنظیم کنند تا در زمان ورود به سیستم راه اندازی شود. کار در حال انجام است بر روی یک پیشنهاد برای اجرا در ورود به سیستم .
به عنوان برنامه پیش فرض عمل کنید
سایر برنامههای iOS و حتی وبسایتها یا ایمیلها میتوانند با استفاده از طرح URL podcasts:// با برنامه پادکست یکپارچه شوند. اگر وقتی در مرورگر هستم پیوندی مانند podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903 .
مدیریت طرحهای URL کاملاً سفارشی هنوز امکانپذیر نیست، اما کار در حال انجام بر روی پیشنهادی برای مدیریت پروتکل URL برای PWAها وجود دارد. در حال حاضر، registerProtocolHandler() با پیشوند طرح web+ بهترین جایگزین است.
یکپارچه سازی سیستم فایل محلی
ممکن است بلافاصله به آن فکر نکنید، اما برنامه پادکست به طور طبیعی با سیستم فایل محلی ادغام می شود. وقتی یک قسمت پادکست را دانلود می کنم، در لپ تاپ من در ~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache ذخیره می شود. برخلاف، مثلاً ~/Documents ، این دایرکتوری البته قرار نیست مستقیماً توسط کاربران عادی قابل دسترسی باشد، اما وجود دارد. سایر مکانیسم های ذخیره سازی غیر از فایل ها در بخش محتوای آفلاین ارجاع داده شده اند.
File System Access API توسعه دهندگان را قادر می سازد تا به سیستم فایل محلی دستگاه دسترسی داشته باشند. شما می توانید آن را مستقیماً یا از طریق کتابخانه پشتیبانی مرورگر-fs-access استفاده کنید که به طور شفاف برای مرورگرهایی که از API پشتیبانی نمی کنند، بازگشتی را ارائه می دهد. به دلایل امنیتی، دایرکتوری های سیستم از طریق وب قابل دسترسی نیستند.
ظاهر و احساس پلت فرم
نکته ظریف تری وجود دارد که برای یک برنامه iOS مانند پادکست بدیهی است: هیچ یک از برچسب های متنی قابل انتخاب نیستند و تمام متن با فونت سیستم دستگاه ترکیب می شود. همچنین انتخاب من از تم رنگ سیستم (حالت تاریک) محترم است.
با استفاده از ویژگی CSS user-select با مقدار none ، میتوانید عناصر UI را از انتخاب تصادفی محافظت کنید. با این حال، مطمئن شوید که از این ویژگی برای غیرقابل انتخاب کردن محتوای برنامه سوء استفاده نکنید. فقط باید برای عناصر UI مانند متون دکمه و غیره استفاده شود. مقدار system-ui برای ویژگی font-family CSS به شما امکان می دهد فونت UI پیش فرض سیستم را برای استفاده برای برنامه خود مشخص کنید. در نهایت، برنامه شما میتواند با احترام به انتخاب prefers-color-scheme کاربر، با تغییر حالت تاریک اختیاری برای لغو آن، از اولویتهای طرح رنگ کاربر تبعیت کند. نکته دیگری که باید در مورد آن تصمیم بگیرید ممکن است این باشد که مرورگر هنگام رسیدن به مرز یک منطقه پیمایش چه کاری باید انجام دهد، به عنوان مثال، برای اجرای کشش سفارشی برای تازه کردن . این با ویژگی overscroll-behavior CSS امکان پذیر است.
نوار عنوان سفارشی شده
وقتی به پنجره برنامه پادکست نگاه میکنید، متوجه میشوید که نوار عنوان و نوار ابزار کلاسیک یکپارچه، مانند پنجره مرورگر Safari ندارد، اما یک تجربه سفارشیسازی شده است که شبیه یک نوار کناری است که به پنجره پخشکننده اصلی متصل است.
در حالی که در حال حاضر امکان پذیر نیست، سفارشی سازی نوار عنوان در حال حاضر در حال کار است. با این حال، میتوانید (و باید) display و ویژگیهای theme-color مانیفست برنامه وب را برای تعیین ظاهر و احساس پنجره برنامهتان و تصمیمگیری در مورد اینکه کدام کنترلهای مرورگر پیشفرض - احتمالاً هیچکدام - نباید نشان داده شوند، مشخص کنید.
انیمیشن های جذاب
انیمیشن های درون برنامه ای در پادکست ها سریع و روان هستند. برای مثال، وقتی کشوی قسمت یادداشتها را در سمت راست باز میکنم، به زیبایی به داخل میلغزد. وقتی یک قسمت را از دانلودهایم حذف میکنم، قسمتهای باقیمانده شناور میشوند و املاک صفحهای را که با قسمت حذف شده آزاد شده است مصرف میکنند.
با در نظر گرفتن تعدادی از بهترین روشهای ذکر شده در مقاله انیمیشنها و عملکرد، انیمیشنهای پرفورمنس در وب قطعا امکانپذیر هستند. انیمیشنهای اسکرول که معمولاً در محتوای صفحهبندی شده یا چرخ فلکهای رسانهای دیده میشوند را میتوان با استفاده از ویژگی CSS Scroll Snap بهبود بخشید. برای کنترل کامل، میتوانید از Web Animations API استفاده کنید.
محتوا خارج از برنامه ظاهر شد
برنامه پادکست در iOS میتواند محتوا را در مکانهای دیگری غیر از برنامه واقعی نمایش دهد، به عنوان مثال، در نمای ویجتهای سیستم یا در قالب یک پیشنهاد سیری. داشتن فراخوانی پیشگیرانه و مبتنی بر استفاده که فقط به یک ضربه برای تعامل نیاز دارد، میتواند نرخ تعامل مجدد برنامهای مانند پادکست را تا حد زیادی افزایش دهد.
Content Index API به برنامه شما اجازه می دهد تا به مرورگر بگوید که کدام محتوای PWA به صورت آفلاین در دسترس است. این به مرورگر اجازه می دهد تا این محتوا را خارج از برنامه اصلی نمایش دهد. با علامت گذاری محتوای جالب در برنامه خود به عنوان مناسب برای پخش صوتی قابل شنیدن و به طور کلی با استفاده از نشانه گذاری ساختاریافته ، می توانید به موتورهای جستجو و دستیاران مجازی مانند Google Assistant کمک کنید تا پیشنهادات خود را در یک نور ایده آل ارائه دهند.
ویجت کنترل رسانه قفل صفحه
هنگامی که یک قسمت پادکست در حال پخش است، برنامه پادکست ویجت کنترلی زیبایی را بر روی صفحه قفل نشان می دهد که دارای ابرداده هایی مانند اثر هنری قسمت، عنوان قسمت و نام پادکست است.
Media Session API به شما امکان می دهد ابرداده هایی مانند آثار هنری، عناوین آهنگ ها و غیره را مشخص کنید که سپس در صفحه قفل، ساعت های هوشمند یا سایر ابزارک های رسانه ای در مرورگر نمایش داده می شوند.
اعلان های فشاری
اعلانهای فشاری در وب کمی آزاردهنده شدهاند (البته اعلانهای اعلان اکنون بسیار آرامتر هستند ). اما اگر به درستی از آنها استفاده شود، می توانند ارزش زیادی را اضافه کنند. به عنوان مثال، برنامه پادکست iOS میتواند بهصورت اختیاری من را از قسمتهای جدید پادکستهایی که در آنها مشترک شدهام مطلع کند یا موارد جدید را توصیه کند، و همچنین به من از ویژگیهای جدید برنامه هشدار دهد.
Push API به برنامه شما اجازه می دهد تا اعلان های فشاری را دریافت کند تا بتوانید کاربران خود را در مورد رویدادهای قابل توجه در اطراف PWA خود مطلع کنید. برای اعلانهایی که باید در زمان مشخصی در آینده منتشر شوند و نیازی به اتصال شبکه ندارند، میتوانید از Notification Triggers API استفاده کنید.
نشان نماد برنامه
هر زمان که قسمتهای جدیدی برای یکی از پادکستهایی که من در آن مشترک هستم در دسترس باشد، یک نشان نماد برنامه در نماد صفحه اصلی پادکست ظاهر میشود و دوباره مرا تشویق میکند که دوباره با برنامه به گونهای که مزاحم نباشد درگیر شوم.
میتوانید نشانهای نماد برنامه را با Badging API تنظیم کنید. این امر به ویژه زمانی مفید است که PWA شما مفهومی از موارد "خوانده نشده" داشته باشد یا زمانی که به وسیله ای نیاز دارید تا توجه کاربر را به طور نامحسوس به برنامه جلب کنید.
پخش رسانه بر تنظیمات صرفه جویی در انرژی اولویت دارد
وقتی رسانه پادکست در حال پخش است، صفحه ممکن است خاموش شود، اما سیستم وارد حالت آماده به کار نمی شود. برنامهها میتوانند بهطور اختیاری صفحه را نیز بیدار نگه دارند، به عنوان مثال برای نمایش اشعار یا شرحها.
Screen Wake Lock API به شما امکان می دهد از خاموش شدن صفحه جلوگیری کنید. پخش رسانه در وب به طور خودکار از ورود سیستم به حالت آماده به کار جلوگیری می کند.
کشف اپلیکیشن از طریق فروشگاه اپلیکیشن
در حالی که برنامه پادکست بخشی از تجربه دسکتاپ macOS است، در iOS باید از اپ استور نصب شود. جستجوی سریع برای podcast ، podcasts ، یا apple podcasts بلافاصله برنامه را در اپ استور فعال می کند.
در حالی که اپل PWA را در فروشگاه App مجاز نمیداند، در Android، میتوانید PWA خود را در یک فعالیت وب مورد اعتماد ارسال کنید. اسکریپت bubblewrap این عمل را به یک عمل بدون درد تبدیل می کند. این اسکریپت همچنین همان چیزی است که قابلیت صادرات برنامه اندروید PWABuilder را به صورت داخلی تقویت می کند، که می توانید بدون لمس خط فرمان از آن استفاده کنید.
خلاصه ویژگی
جدول زیر یک نمای کلی از همه ویژگی ها را نشان می دهد و فهرستی از منابع مفید برای تحقق آنها در وب را ارائه می دهد.
نتیجه
PWA ها از زمان معرفی خود در سال 2015 راه زیادی را پیموده اند. در چارچوب پروژه Fugu 🐡 ، تیم Chromium بین شرکتی در حال کار بر روی بستن آخرین شکاف های باقی مانده است. حتی با پیروی از برخی از توصیههای این مقاله، میتوانید تکه تکه به آن احساس اپلیکیشن مانند نزدیکتر شوید و کاربران خود را فراموش کنند که با «فقط یک وبسایت» سر و کار دارند، زیرا، صادقانه بگویم، اکثر آنها مهم نیست که برنامه شما چگونه ساخته شده است (و چرا باید؟)، تا زمانی که شبیه یک برنامه واقعی باشد.
سپاسگزاریها
این مقاله توسط Kayce Basques , Joe Medley , Joshua Bell , Dion Almaer , Ade Oshineye , Pete LePage , Sam Thorogood , Reilly Grant و Jeffrey Yasskin بررسی شده است .