خلاصه مطالعات من در pwa

سلام بچها امروز می خوام خلاصه مطالعه مو در رابطه با pwa که تازگیا خیلی ترند شده بین برنامه نویس ها بنویسم (می دونید که این ویرگول منه و منم اینجا خلاصه مطالعه را به زبان خودم می نویسم امروزم چون وقت زیاد ندارم جمله مهم های هر سایتی کپی پیست می کنم) اگه نمی دونید pwa چیه برید اینجا

خوب pwa منو خیلی ترسوند یه لحظه این سختی های 3 سال و سرکوفت هایی که توی این 3سال به خودم زدم که 3سال وقت گذاشتی و هنوز یه ریال از برنامه نویسی پول درنیووردی و این جور جمله ها ...مث یه پتک بزرگ خورد تو سرم و که هنوز یه چیزی رو حرفه ای نشدی یه چیز جدید دیگه امد حالا باید کلی وقت بزاری جدید را یاد بگیری

سر جاوا همین بلا امد ... ری اکت نیتیو امد ... اندروید استودیو را دیگه محل سگم بهش نزاشتم چیه این گردل اخه:/

حس می کنم اگه از اول میومدم سمت وب الان برام بهتر بود ولی چه کنم که این دل با وب نبود:(

ولی تو فکرم ری اکت نیتیو به جایی برسونم و تابستون به کل بیام سمت لینوکس و ری اکت و این ترندمون

ولی پشیمون نیستم از ری اکت نیتیو

ری اکت نیتیو هر چی که بود منو صبورتر کرد ...ترسمو کم کرد ...و این برای خود زندگیم خیلی بهترعه

خوب دیگه بسه بریم سر خلاصه نویسی ها


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

سفید اپ برامون لیست کردعه برنامه های pwa

عدم نیاز به فروشگاه‎های نصب اپلیکیشن: در حال حاضر فروشگاه بازار در ایران سهم 30 درصدی از فروش داخل اپلیکیشن را برای خود برمیدارد. همچنین دسترسی اپلیکیشن‌های ایرانی در App Store شرکت اپل قطع شده است. در تمامی فروشگاه برنامه‌نویسان موبایل برای قراردادن اپلیکیشن خود نیازمند خرید یک اکانت Developerای هستند. با استفاده از وب اپلیکیشن‌ها تمامی این نگرانی‌ها برطرف می‌شود.

بعضی از مردم فکر می کنند که یک PWA همراه با فریمورک های مدرن رابط کاربری مانند ReactJs، Angular 6 یا Vue.js ارائه میشود. خوب، نه لزوما . PWA هیچ ارتباطی با فریمورک هایی که استفاده می کنید ندارد و فقط به کامپوننت های مشخصی نیاز دارد

خب PWA فایل های HTML، فایل های CSS و تصاویر را در حافظه پنهان مرورگر با استفاده از API Cache ذخیره می کند و توسعه دهندگان می توانند به طور کامل ارتباطات شبکه را کنترل کنند. همه اینها توسط Service Worker  قابل دسترسی است.

کاپوننت های تکنیکی PWA کدامند؟

خب PWA دارای برخی کامپوننت های مهم فنی است که با هم کار می کنند و به برنامه وب به طور منظم انرژی می دهد. کامپوننت های زیر برای ایجاد یک برنامه PWA خوب مورد نیاز است.

1.Service Worker

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

برای اولین بار، Service Worker منابع مورد نیاز را در حافظه پنهان مرورگر ذخیره می کند و هنگامی که کاربر برای بار بعدی برنامه را باز میکند، Service Worker حافظه کش را بررسی می کند و حتی قبل از اینکه متصل بودن اینترنت را چک کند به کاربر پاسخ میدهد.

یک Service Worker فقط کامپوننتی از کد های جاوا اسکریپت است که به عنوان یک پروکسی بین مرورگر و شبکه عمل می کند. یک Service Worker  به ایجاد یک برنامه آفلاین با استفاده از API حافظه پنهان مرورگر کمک می کند.

خب service worker چرخه رویداد مربوط به خود را دارد. هنگامی که فرایند کش کامل میشود برنامه شما برای بازید آفلاین آماده است. چه طور میشه اپلیکشین رو آپدیت کرد ؟ خیلی راحت فقط کافی هستش Cache قبلی پاک بشه و فایل های جدید جایگزین بشن

2. فایل مانیفست 

فایل مانیفست یک فایل config از جنس JSON است که حاوی اطلاعات برنامه  اعم از آیکون نمایش در صفحه اصلی، نام کوتاه برنامه، رنگ پس زمینه یا تم و .. است. نمونه ای از این فایل در زیر آمده است :

{
  "short_name": "Spinner",
  "name": "Fidget spinner",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/home/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/home/",
  "theme_color": "#3367D6"
}

3.HTTPS 

خوب Service workers  قادر به رد درخواست های شبکه هستند و می توانند پاسخ ها را تغییر دهند. Service workers تمام اقدامات را در طرف مشتری انجام می دهند. از این رو، PWA نیاز به پروتکل HTTPS دارد.

دسترسی‌های یک وب‌اپلیکیشن در موبایل

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

همچنین در حال حاضر برای وب اپلیکیشن‌ها دسترسی به SMS، مخاطبین گوشی، تقویم، ارتباط با مابقی اپلیکیشن‌های نصب شده فراهم نیست.

چه مرورگرهایی pwa ساپورت می کنند

نیازهای حداقلی برای استفاده از وب‌اپلیکیشن‌ها

استفاده از HTTPS: استفاده از اکثر قابلیت‌های اصلی وب اپلیکیشن تنها در صورتی که وب سایت ما از HTTPS استفاده کند امکان‌پذیر است. در اصل بدون رمزنگاری کردن ارتباط بین سرور و اپلیکیشن ما، مرورگر گوشی کاربر به دلیل امنیت پایین ارتباط‌های رمزنگاری نشده امکان استفاده از وب اپلیکیشن‌ها را نمی‌دهد.

طراحی واکنش‌گرا (Responsive): برای عملکرد صحیح یک وب اپلیکیشن در گوشی کاربر از ابتدا باید وب‌سایت قابلیت Responsive بودن داشته باشد و گرنه نیاز به باز طراحی ظاهر وب سایت می‌باشد.

استفاده از فریمورک‌ها: هر چند تکنولوژی وب اپلیکیشن‌ به کتابخانه و فریمورک خاصی وابسته نیست اما اگر در سمت Front End وب سایت از یکی از تکنولوژی‌های مطرح این حوزه مانند Angular، React و Vue استفاده شده باشد، به دلیل قابلیت‌های توکار این تکنولوژی‎ها هزینه‎ی پیاده‌سازی کاهش پیدا می‌کند.

زمانبندی و هزینه‌های پیاده‌سازی

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

یه سری سوال !!!

چه طور میشه با سیستم عامل ارتباط برقرار کرد، مثلا برای باز شدن برنامه از حسگر اثر انگشت استفاده کنیم ؟
- خیلی ساده هستش از Web Authentication API که داخل مرورگر قرار داره استفاده کنید یا برای دریافت موقعیت کاربر از Geolocation API و ... . برای همه چیز یک API موجود هستش.

اپلیکیشن ما نیاز داره پردازش تصویر انجام بده و جاوااسکریپت چون مفسر هستش از swift یا Objective C که کامپایلری هستند کندتر عمل می کنه پس PWA خوب نیست !
- شما داخل وب می تونید از WebAssembly استفاده کنید که مستقیم با سخت افزار ارتباط برقرار میکنه و سرعتش فوق العاده زیاد هستش

یعنی PWA هیج محدودیتی نداره ؟
در پلتفرم اپل هنوز Push Notifications رو برای PWA ها فعال نکرده ولی این محدودیت‌ها خیلی کم هستند و با شرایط کنونی شما چاره دیگه‌ایی ندارید. نکته مهم اینجاست که PWA در حال پیشرفت هستش و این API ها ساخته شده و به مروگرها اضافه میشن.

کار با Service Worker یکم متفاوت هستش با تمام API هایی که داخل وب باهاشون کار کردیم واسه همین گوگل یک کتابخونه برای راحتتر شدن کار معرفی کرده به نام Workbox که خیلی راحت برنامه شمارو Offline Support میکنه.

توی PWA دسترسی به سخت افزار و سیستم عامل وجود نداره .

منبع , منبع