چک لیست PWA چیست؟

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

Service workers

Create React App دارنده یک service worker پیش‌فرض برای کش کردن static assetها میباشد، البته ما می خواهیم یک service worker سفارشی بسازیم. این پروسه را با ساخت و ساز پوشه service worker تازه در فولدر source پروژه آغاز می کنیم، و قطعه کد ذیل را با اسم service worker سفارشی خویش جایگزین میکنیم.

با به کار گیری از فرمان پیش‌فرض console.log(“ “) امکان آزمایش را به پوشه service worker ساخت‌و‌ساز گردیده خویش اضافه می کنیم، نرم‌افزار را build میکنیم، و کنسول را تحلیل میکنیم. Lighthouse به جهت قابلیت و امکان service worker اضافه گردیده ما، یک PWA score بهبود یافته را به ما میدهد. شما می توانید ابتکار به خرج دهید و کد service worker غامض‌تری را بنویسید.

پیش از اینکه secure contexts را اضافه کنیم، بایستی پیش‌روی اپ را تقویت کنیم.

پیش از فعال‌سازی اپ، میتوانیم بارگیری پیام‌ها یا این که CSS را با اضافه کردن پوشه index.html اکران دهیم، به این ترتیب خواهیم توانست ایمپورت کردن رفرنس‌های فولدر‌های CSS را از فولدر‌های app.js و index.js حذف کنیم (اسم پوشه‌ها ممکن میباشد از سیستمی به سیستم دیگر مختلف باشد) و تلاش اپ را بهبود بخشیم.

اضافه کردن secure contexts و manifest file

ابزار Create React App مشمول یک manifest file در فولدر public برای به کارگیری در پروژه‌هایی میباشد که دربرگیرنده آیتم‌های نخستین تنظیمات می باشند. فولدر public/manifest.json را می‌قدرت تغییر تحول بخشید تا خصوصیت‌هایی مانند آیکون‌ها، مورد‌های نصب،‌ و ذخیره آیکون‌های PWA بر روی home screen یا این که دسکتاپ برای دسترسی آسوده، را اضافه کنیم.

در حال حاضر فرصت آن رسیده تا آنچه را که ساخت و ساز کرده‌ایم را deploy کنیم. Firebase یک ابزار مرجح برای بخش اعظمی از بسط‌دهندگان میباشد تا نرم افزار‌های بر پایه ی React خویش را deploy نمایند، و این به عبارتی چیزی میباشد که ما نیز برای deploy کردن اپ PWA سفارش می کنیم. با تغییر و تحول مقدار doCache به true کشینگ را فعال نمائید، Firebase را نصب کرده و ماژول Firebase را مقداردهی و فعال‌ساز‌ی نمائید.

بعداز اتمام فرآیند، اپ خویش را با اجرای کد پایین در ترمینال deploy نمائید.

ابزار Firebase CLI نشانی (URL) را به شما می دهد، که می توانید در مرورگر اینترنت خویش گشوده فرمائید. هاستینگ URL یک HTTPS URL میگردد که ایراد secure contexts را حل می‌نماید. مثل آنچه که در ذیل علامت داده گردیده است.

ابزار Lighthouse را یک توشه دیگر ایفا فرمایید. شادباش می گوییم شما او‌لین اپلیکیشن اینترنت پیش‌رونده خویش را با به کارگیری از React ساختید!