PWAs: به انقلاب موبایل خوش آمدید

محتوا

• صعود PWA ها
• PWA امروز در عمل است
• نصب و راه اندازی
• آفلاین و راه اندازی فوری
• تجربه درجه یک
• فروشگاه های برنامه
• ادغام بستر های نرم افزاری
• چالش های طراحی و UX
• سال PWA ها

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

• چگونه می توان یک برنامه وب پیشرو ساخت

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

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

آیا می خواهید ساخت سایت جدیدی را شروع کنید؟ سعی کنید از یک سازنده وب سایت استفاده کنید. و اطمینان حاصل کنید که از خدمات میزبانی وب مناسب نیز پشتیبانی لازم را دریافت می کنید. یا برای مورد کمی متفاوت ، به راهنمای ما برای بهترین ذخیره سازی ابر مراجعه کنید.

صعود PWA ها

در حالی که نام PWA در سال 2015 در مقاله فرار از زبانه ها بدون از دست دادن روح ما توسط الکس راسل که در Google برای تیم Chrome کار می کرد ، ابداع شد ، اما سفر آنها در آنجا شروع نشد. ما قبلاً دارای برنامه های HTML (HTA) بودیم که توسط مایکروسافت در سال 1999 ایجاد شد ، همراه با بسیاری از سیستم عامل های برنامه وب از نوکیا ، BlackBerry و سایر شرکت ها. سپس ، در سال 2007 ، استیو جابز آنچه را که در آن زمان تنها راه ایجاد برنامه برای آیفون اصلی بود ، ارائه داد: PWA ها ، البته با نامی متفاوت. Chrome از آنجا شروع کرد ، چند سال بعد API ها را بهبود بخشید و نام PWA را اختراع کرد.

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

PWA امروز در عمل است

امروزه PWA ها کاملاً کاربردی و قابل نصب در موارد زیر هستند:

• Android با بیشتر مرورگرها ، با Chrome بهترین تجربه را ارائه می دهد
• iOS با سافاری
• Chromebook ها
• ویندوز 10 از فروشگاه مایکروسافت
• تلفن های ویژه با KaiOS - چنگالی از سیستم عامل Firefox - در حال حاضر برای میلیون ها کاربر عمدتا در هند در دسترس است

در اواخر امسال پشتیبانی از macOS ، Windows و Linux از طریق Chrome نیز ارائه می شود. اگر می خواهید اکنون آن را امتحان کنید ، امروز به عنوان پرچم آزمایشی "Desktop PWA" در دسترس است. نصب در Windows on Edge بدون استفاده از فروشگاه نیز بعداً در حال انجام است ، اگرچه هیچ چارچوب زمانی خاصی تعریف نشده است.

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

همچنین ، PWA ها در حال حاضر از بیشتر CLI ها برای چارچوب های مختلف ، از جمله Angular 6+ CLI ، React Create App ، PWA Starter Kit از Polymer و Preact CLI در حال تولید هستند. سرانجام ، تیم Ionic Framework به ایده Capacitor ، یک جایگزین منبع باز Cordova که PWA های بومی را در هر فروشگاه برنامه امکان پذیر می کند ، رسید.

نصب و راه اندازی

یکی از جنبه های مهم PWA ، نصب برنامه است. این فرآیند در دو مرحله اختیاری انجام می شود: بارگیری و ذخیره آفلاین پرونده های برنامه و نصب نماد در سیستم عامل. از آنجا که هر دو مرحله اختیاری هستند ، شما می توانید یک تجربه آفلاین را در مرورگر ارائه دهید یا می توانید یک آیکون را بدون نصب آفلاین ارائه دهید. اما یک PWA واقعی باید شامل هر دو باشد: باید با TLS تحت HTTPS ارائه شود و کاربر تصمیم خواهد گرفت که آیا از آن در مرورگر استفاده می کند یا در نماد نصب شده خود است.

آفلاین و راه اندازی فوری

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

برای نصب کارگر سرویس ، سند HTML شما باید شامل موارد زیر باشد:

if ('serviceWorker' در ناوبری) navigator.serviceWorker.register ("sw.js")؛

این پرونده "sw.js" را برای پوشه فعلی در دامنه فعلی روی دستگاههای کاربران نصب می کند - مفهومی که به عنوان دامنه شناخته می شود. پس از نصب ، بازدیدهای بعدی از هر URL در محدوده آن توسط آن سرویس دهنده مدیریت می شود.

بگذارید بگوییم ما یک PWA با چهار فایل داریم: index.html ، app.js ، app.css و logo.png. اولین کار نصب این پرونده ها در حافظه نهان موجود در پرونده sw.js است.

const منابع = ["index.html" ، "app.js" ، "app.css" ، "logo.png"]؛ خود. addEventListener ("install"، event => {event. waitUntil (caches.open ("myPWAcache"). سپس (cache => cache.addAll (منابع)))؛})؛

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

self.addEventListener ("واکشی" ، e => e.respondWith (caches.match (درخواست الکترونیکی). سپس (res => res)؛

در این حالت ، هر بار که کاربر به PWA دسترسی پیدا می کند (هم از طریق یک مرورگر یا از یک آیکون نصب شده) ، موتور فایل ها را از حافظه پنهان دریافت می کند. یک مزیت PWA در مقابل برنامه های بومی این است که دستگاه ها در صورت تغییر مجدداً همه پرونده ها را بارگیری نمی کنند ، فقط پرونده ای است که با یک روند شفاف تغییر کرده است. همچنین ، ما همچنان می توانیم بخشهایی از برنامه را در صورت درخواست بارگیری کنیم.

اما چالش این است که چگونه می دانید کدام پرونده ها در سرور به روز شده اند تا بتوانید آنها را در حافظه نهان جایگزین کنید؟ اگر برای مدیریت این کار نمی خواهید یک سرویس دهنده سطح پایین بنویسید ، می توانید از کتابخانه منبع باز Workbox استفاده کنید ، این امر به شما کمک می کند با تولید کارگر سرویس و منابع برای به روزرسانی بسته نصب شده.

توجه داشته باشید که اگر فشار ذخیره سازی بر روی دستگاه وجود داشته باشد ، پرونده های PWA شما حذف می شوند ، مگر اینکه در صورت موجود بودن ، فضای ذخیره سازی مداوم را درخواست کنید:

if ('storage' in navigator && 'persist' in navigator.storage) navigator.storage.persist ()؛

در Chrome و بیشتر مرورگرهای Android ، برنامه شما قادر به استفاده از بیش از پنج درصد فضای موجود نیست. در iOS فقط 50 میزبان 50 مگابایت (تقریباً 50 مگابایت) است. در Edge با توجه به اندازه کل حافظه متغیر است و در فروشگاه Windows ، نامحدود است.

تجربه درجه یک

ما مغز داریم و اکنون وقت قلب است: برنامه وب آشکار می شود. هدف از تبدیل وب سایت به PWA فقط اطمینان از در دسترس بودن سریع یا آفلاین بودن آن نیست بلکه همچنین امکان ایجاد نماد مخصوص به خود در سیستم عامل و ارائه تجربه ای کاملاً مستقل مانند سایر برنامه های نصب شده است.

مانیفست یک پرونده JSON است که فراداده را برای PWA مورد استفاده توسط مرورگر یا فروشگاه برنامه برای تعریف رفتار نصب تعریف می کند.

فایل چندین ویژگی را به عنوان فراداده برای PWA شما تعریف می کند. هر سیستم عامل این ویژگی ها را می خواند و تمام تلاش خود را می کند تا با تجربه مورد نظر شما مطابقت داشته باشد. به عنوان مثال ، Android "display: standalone" را می خواند و یک تجربه نرمال را ایجاد می کند. با 'display: minimum-ui' با داشتن URL قابل مشاهده و گواهی TLS - برای برنامه های حساس به امنیت مفید است. با «صفحه نمایش: تمام صفحه» برنامه های کاملاً غوطه وری را بدون نوار وضعیت یا دکمه برگشت قابل مشاهده ایجاد می کند. مجموعه ای از نمادها و رنگ ها نحوه جستجو صفحات پاششی یا میله های عنوان برای پنجره برنامه شما را مشخص می کند.

برخی از مولدهای آشکار ، مانند Web App Manifest Generator یا PWA Builder وجود دارد که در صورت ارائه رزولوشن بالا (حداقل 512 پیکسل) ، نماد را برای شما در وضوح مختلف تغییر می دهد.

وقتی فایل مانیفست را در سند HTML خود پیوند دهید ، کاربران می توانند برنامه را با استفاده از تکنیک های مختلف بسته به مرورگر نصب کنند ، که معمولاً به آنها افزودن به صفحه اصلی ، نصب یا فقط افزودن می گویند. اگر PWA شما توسط Bing قابل خزیدن باشد ، مایکروسافت به طور خودکار آن را به Microsoft Store اضافه می کند تا کاربران ویندوز 10 بتوانند آن را از آنجا نصب کنند.

در برخی از سیستم عامل ها ، PWA شما توانایی ضبط لینک را دارد. این بدان معنی است که پس از نصب برنامه توسط کاربر ، هر URL در محدوده مانیفست شما در محدوده برنامه شما باز می شود و نه در مرورگر ، مهم نیست که در مرورگر یا برنامه های دیگر مانند WhatsApp ، Facebook ظاهر شود یا یک ایمیل

اگر شرایط PWA را که ما در اینجا تعریف می کنیم قبول کنید ، برخی از سیستم عامل ها نشان محیط (یک نماد کوچک معمولاً در نوار URL را با مشخص بودن نصب شدن وب) یا یک بنر برنامه وب ارائه می دهند. در صورت تمایل ، می توانید دکمه نصب سفارشی خود را نیز با استفاده از قطعه زیر اضافه کنید:

window.addEventListener ("beforeinstallpr ompt"، تابع (e) {e.prompt ()؛ // نصب سریع را نشان می دهد})

اگر PWA نصب شود ، رویداد "نصب شده" روی شی object پنجره شلیک می شود تا بتوانید آمار گوش داده شده برای آن را ردیابی کنید.

فروشگاه های برنامه

یکی از مهمترین مزایای نصب از طریق مرورگر این است که می توانید از روند تأیید فروشگاه برنامه جلوگیری کنید یا برای ناشر بودن باید هزینه پرداخت کنید. این مزایای آشکاری دارد ، مانند انتشار فوری ، ایجاد برنامه های خصوصی برای شرکت ها یا برنامه هایی که نباید در فروشگاه ها پذیرفته شوند.

اما برخی از شرکت ها می خواهند در فروشگاه باشند. از امروز ، تنها فروشگاه هایی که PWA های رسمی را می پذیرند فروشگاه Windows و فروشگاه kaiOS هستند. خوشبختانه با ابزارهایی مانند Capacitor (در حال حاضر در Alpha) یا PWA Builder ، می توانیم بسته های بومی را برای سیستم عامل های دیگر نیز ایجاد و امضا کنیم.

برخی از PWA ها از قبل در Google Play Store منتشر شده اند ، مانند Twitter Lite و Google Maps Go ، که هم اکنون تحت پیاده سازی های سفارشی هستند. Chrome از طریق فعالیتهای وب معتمد راه حلی از Chrome 68 ارائه می دهد. از آن مرحله ، ما می توانیم یک بسته Android (APK) با یک راه انداز در PWA خود ایجاد کنیم و آن را در فروشگاه بارگذاری کنیم. برای فروشگاه مایکروسافت در ویندوز 10 ، سایت PWA Builder در حال حاضر به تولید یک بسته ویندوز 10 APPX کمک می کند. با استفاده از نمای وب ، شاید بتوانید به صورت دستی یک برنامه iOS برای App Store ایجاد کنید اما نسبت به قوانین فروشگاه بسیار مراقب باشید.

ادغام بستر های نرم افزاری

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

ما همچنین می توانیم از طریق طرح های URI ، مانند باز کردن توییتر ، یوتیوب یا WhatsApp از طریق URL های آنها یا URI های سفارشی مانند whatsapp: // ، با برنامه های دیگر ارتباط برقرار کنیم.

سرانجام ، هنگام ایجاد PWA های بومی که با استفاده از خازن یا فروشگاه مایکروسافت در فروشگاه منتشر می شوند ، می توانیم با API های بومی ارتباط برقرار کنیم که به ما امکان اجرای تقریباً هر کد بومی را می دهد. این ادغام با ویندوز 10 شامل دسترسی سخت افزاری اما همچنین ادغام با سیستم عامل است که گزینه هایی مانند Pin to Start را ارائه می دهد. به عنوان مثال ، Twitter PWA به شما امکان می دهد هر کاربری را در صفحه شروع خود قرار دهید.

چالش های طراحی و UX

طراحی PWA چالش های منحصر به فردی دارد ، بنابراین مهم است که کمی وقت صرف تحقیق ، آزمایش تا حد ممکن و در نظر گرفتن موارد زیر کنید:

• کاربران انتظار تجربه های مشابه برنامه را دارند.
• روند نصب هنوز جدید است ، بنابراین ما باید تلاش بیشتری کنیم تا نحوه نصب برنامه را توضیح دهیم.
• به روزرسانی برنامه در پس زمینه و بدون تعامل کاربر بسیار خوب است اما همچنین چالش هایی را برای UX اضافه می کند.
• روی دسک تاپ ، طراحی وب پاسخگو مرز جدیدی را به خود اختصاص می دهد زیرا پنجره های PWA می توانند بسیار کوچک ، بسیار کوچکتر از یک نمای تلفن همراه باشند. این بدان معناست که ما باید نماهای خاص یا ابزارک های کوچکی را برای این قالب ایجاد کنیم ، همانطور که امروز در سیستم عامل Chrome مشاهده می شود.
• اعلان های فشرده فقط به کاربر ارزش افزوده می دهند ، بنابراین یاد بگیرید که در لحظه مناسب س askال کنید و فرصت را برای ارسال پیام هایی که مفید یا جالب نیستند هدر ندهید.
• ما باید برای عملکرد وب و دسترسی آفلاین طراحی کنیم.

سال PWA ها

با اضافه شدن iOS و دسک تاپ در سال جاری ، PWA ها امروز همه جا هستند. اما باید به یاد داشته باشیم که سفر آنها تازه آغاز شده است ، بنابراین انتظار تغییرات مکرر را داشته باشید و مطمئن شوید که خود را با جدیدترین تکنیک ها و ایده ها به روز می کنید تا ضمن پیشرفت سیستم عامل ، یک تجربه کاربری عالی ارائه دهید.

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