قسمت دوم PWA

برای توسعه برنامه‌های PWA باید حتما از SSL یا همون https استفاده کنید تا به امکانات کامل بتونی به راحتی دسترسی پیدا کنیم. البته تنها PWA نیست که نیاز به SSL دارد، شما برای استفاده از امکان ضبط صدا در مرورگر هم مجبور به استفاده از آن هستید و یا استفاده از موقعیت جغرافیایی کاربر و ...

به هرحال برای تست این گونه برنامه‌ها باید آن‌ها را از طریقی هاست کرد. که می‌توانید از Nodejs استفاده کنید برای اینکار(اینجوری به npm قنیع آن هم دسترسی دارید) یا از dotnet core.

ما برای راحتی به شما برنامه Web Server پیشنهاد میکنیم که بر روی گوگل کروم نصب می‌شود و امکانات مناسبی هم دارد. که می‌تونید از اینجا دریافت کنید.

مواردی که قرار در این قسمت بگیم در این سایت خود گوگل قرار دارد که میتوان گفت مرجع PWA می‌باشد.

برای پیشنیاز هم لازم شما جاوااسکریپت و HTML بلد باشید.

تصویر نهایی برنامه تولید شده هم مانند زیر است

این یک برنامه آب‌و‌هوا است که برای ایجاد اولیه آن نیاز داریم تا شما وارد سایت دارک‌اسکای شده و یک کلید برای دسترسی به اطلاعات مورد نیاز داشته باشید تا در درخواست‌های وب‌سرویسی خود از آن برای اعتبارسنجی استفاده کنید. این کلید ما نیاز داریم تا برنامه‌ای مانند تصویر بالا را ایجاد کنیم. اگر شما به درستی مراحل دریافت کلید اجرا کنید باید بتوانید از لینک تست زیر استفاده کنید. به جای DARKSKY_API_KEY از کلید خود استفاده کنید.

https://api.darksky.net/forecast/DARKSKY_API_KEY/40.7720232,-73.9732319

برای اینکه در زمان صرفه‌جویی کنیم می‌تونید پروژه اصلی این مخزن دانلود کنید و گام به گام با آموزش جلو برید. در کنار این پروژه حتما Nodejs هم نصب کنید تا بتوانید وابستگی‌های برنامه را دانلود کنید و هم بتونید برنامه را اجرا کنید.

مراحل اجرا:

۱- اول در خط فرمان(در همان پوشه برنامه) دستور npm install را اجرا کنید

۲- فایل Server.js را برای جایگزاری کلید دارک‌اسکای ویرایش کنید

const API_KEY = process.env.DARKSKY_API_KEY;

۳- در خط فرمان دستور run server.js را وارد کنید تا برنامه در پورت 8000 اجرا شود

۴- در مرورگر آدرس http://localhost:8000 را وارد کنید تا برنامه را مشاهده کنید.

این برنامه تکمیل نیست و باید مانند ما کد‌های مورد نیاز را به آن اضافه کنید تا قابلیت‌های PWA آن اجرا شود.

برای دریافت اطلاعات بیشتر از برنامه inspect element مرورگر کروم استفاده می‌کنیم و در در اولین گام از ابزار Audits آن بهره می‌بریم بتوانیم برنامه‌ی خود را سنجش کنیم و از کمبود‌ها و نقاط ضعف آن باخبر شویم.

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

• ❗FAILED: Current page does not respond with a 200 when offline.
• ❗FAILED: start_url does not respond with a 200 when offline.
• ❗FAILED: Does not register a service worker that controls page and start_url.
• ❗FAILED: Web app manifest does not meet the installability requirements.
• ❗FAILED: Is not configured for a custom splash screen.
• ❗FAILED: Does not set an address-bar theme color.

این‌ها عموم خطاهایی هستند که برنامه ما دارد. ما کم کم این موارد را رفع میکنیم.(دلیل استفاده ما از این ابزار این است که شما در آینده راحت‌تر بتوانید مشکلات را بیابید و در پی رفع آن باشید.)

خوب بریم سر پروژه‌ای که از گیت‌هاب دانلود کردیم. درابتدا باید بگیم که تمام برنامه‌های PWA دارای فایلی به نام manifest می‌باشند.مانند زیر

{
  &quotname&quot: &quotWeather&quot,  
  &quotshort_name&quot: &quotWeather&quot,
  &quoticons&quot: [{
    &quotsrc&quot: &quot/images/icons/icon-128x128.png&quot,
      &quotsizes&quot: &quot128x128&quot,
      &quottype&quot: &quotimage/png&quot
    }, {
      &quotsrc&quot: &quot/images/icons/icon-144x144.png&quot,
      &quotsizes&quot: &quot144x144&quot,
      &quottype&quot: &quotimage/png&quot
    }, {
      &quotsrc&quot: &quot/images/icons/icon-152x152.png&quot,
      &quotsizes&quot: &quot152x152&quot,
      &quottype&quot: &quotimage/png&quot
    }, {
      &quotsrc&quot: &quot/images/icons/icon-192x192.png&quot,
      &quotsizes&quot: &quot192x192&quot,
      &quottype&quot: &quotimage/png&quot
    }, {
      &quotsrc&quot: &quot/images/icons/icon-256x256.png&quot,
      &quotsizes&quot: &quot256x256&quot,
      &quottype&quot: &quotimage/png&quot
    }, {
      &quotsrc&quot: &quot/images/icons/icon-512x512.png&quot,
      &quotsizes&quot: &quot512x512&quot,
      &quottype&quot: &quotimage/png&quot
    }],
  &quotstart_url&quot: &quot/index.html&quot,
  &quotdisplay&quot: &quotstandalone&quot,
  &quotbackground_color&quot: &quot#3E4EB8&quot,
  &quottheme_color&quot: &quot#2F3BA2&quot
}

در مانیفست نام برنامه و نامی که در هنگام افزوده شدن به لیست برنامه‌ها به کاربر نمایش داده می‌شود را می‌توانید مشاهده کنید البته لیست آیکون‌ها هم در قابل تعریف می‌باشد. همچنین نباید فراموش کنید که آدرس شروع برنامه را هم می‌توانید در اینجا وارد کنید