آموزش کامل و پروژه محور PWA - تبدیل سایت به اپلیکیشن

در این مقاله سعی بر آن داریم تا مانند همیشه بتوانیم در نهایت اختصار و مفید بودن , آموزش کامل و پروژه محور PWA – تبدیل سایت به اپلیکیشن را برای شما دوستان توضیح و ارایه دهیم. به امید اینکه در زندگی کاریتان بعنوان یک ارزش افزوده به حساب آید.

آموزش کامل و پروژه محور PWA - تبدیل سایت به اپلیکیشن
آموزش کامل و پروژه محور PWA – تبدیل سایت به اپلیکیشن

مقدمه

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

کاربران ساعت ها در خیابان, مترو, اتوبوس و … سر در گوشی های خود و مشغول فعالیت های روزمره هستند و طبیعتا بسیاری از کارهای وبگردی خود را نیز با همین موبایل انجام میدهند.

از طرفی چند سالی هست که الگوریتم Mobilegeddon گوگل بر این حرف صحه گذاشته و با آمار و ارقام , این واقعه را تایید کرده است.

خوب طبیعیست که جامعه طراحان وب دست به کار شود و دنبال راه حل و کمک به این طیف وسیع کاربران موبایلی شود.

آموزش کامل و پروژه محور PWA - تبدیل سایت به اپلیکیشن
آموزش کامل و پروژه محور PWA – تبدیل سایت به اپلیکیشن

Progressive Web Applications یا به اختصار pwa که به همان اپلیکیشن‌های پیشرونده تحت وب گفته میشود , بهترین راه حل ممکن بود. زیرا نه یک زبان برنامه نویسی سخت یا کتابخانه یا فریم وورک هست که برای یادگیری آن وقت و زمان زیادی صرف کنید, و نه یک بستر که توانایی تحریم داشته باشد.

بله. همانطور که میدانید , اپل سالهاست برنامه نویسان ایرانی را تحریم کرده و برای انتشار برنامه های خود با مشکلات جدی روبرو هستند.

pwa بهترین راه کار است که با استفاده از ویژگی های browser و javascript بتوانیم شبیه سازی از یک اپلیکیشن native برای سایتمان داشته باشیم که نه تنها در اندروید و آی او اس , بلکه در تمام دیوایس ها و سیستم عامل های دیگر و متفرقه (حتی ویندوز موبایل) به راحتی کار کند.

تا به الان که متوجه شدید چقدر مطلب جذاب و ساده است, پس بزن بریم برای اینکه کار را تمام کنیم!

خاصیت ها و ویژگی های PWA

قبل از هر کاری , لازم و اجباریست که مقاله core web vitals که قبلا در قسمت سئو سایت , مورد بررسی قرار گرفته بود را کامل مطالعه کنید.

هر pwa دارای سه خاصیت زیر میباشد:

  • Reliable
  • Fast
  • Engaging

Reliable

مربوط به سرعت لود سایت بوده و حتی زمانی که اینترنت قطع باشد, مانند اپلیکیشن کار کند که این ویژگی را میتوان با کمک از cache storage مرورگر ایجاد کرد.

Fast

سرعت بارگزاری و تعامل بالا, به این معنی که هم با سرعت بالا صفحات لود شود و هم تعامل بسیار سریع به واکنش های کاربران داشته باشد. مانند کلیک روی دکمه ها, منو ها و …

Engaging

باید مثل یک اپلیکیشن native عمل کند. چه از نظر ظاهر و استایل و چه از نظر رخداد ها و eventها

تمام هدف اینجاست که بعد از نصب pwa , مانند یک اپلیکیشن native آیکون در صفحه گوشی کاربر بیفتند و حتی آفلاین بتوان با کلیک بر روی آن وارد محیط اپ شد.

آفلاین کار کردن سایت ویژگی service worker هست که توضیح داده خواهد شد.

دو نکته مهم : pwa در مسیر https و بسیار امن کار میکند و با ویژگی push notification میتواند مانند اپ native واقعی, نوتیفیکیشن ارسال کند!

شروع ساخت pwa

شاید باور نکنید که تقریبا تمام کار در یک extention تحلیلی به نام lighthouse نهفته است. از این لینک آن را دانلود و روی مرورگر خود فعال کنید.

از حالا به بعد , وقتی inspect element را میزنید ( همان devToold) یک تب به نام lighthouse برای شما اضافه شده است مانند شکل زیر:

شروع ساخت pwa

فقط کافیست ابتدا در سایت مورد نظر خود باشید , سپس این تب را باز کرده و بعد از زدن تمام تیک ها (مطابق شکل بالا) روی گزینه generate repot کلیک کنید.

دقت کنید تمام تیک ها جزیی از مراحل اصلی کار ما نیست. اما اطلاعات و جزییات خوبی از مشکلات و نواقص سئو سایت شما در اختیارتان قرار میدهد.

پس این قسمت اختیار بوده و برای کار ما, فقط تیک progressive web app را زده و مابقی تیک ها را برداشته و در قسمت device فقط تیک موبایل را بزنید و اجازه بررسی و report را بدهید.

کمی طول خواهد کشید. مانند تصویر زیر صبور باشید.

شروع ساخت pwa

بعد از آنالیز lighthouse لیستی از پیشنیازهای یک PWA و مواردی که وبسایت شما آنها را رعایت کرده یا در وبسایت وجود نداره به شما تحویل میدهد.

حال بایستی در صدد رفع مشکلات و ایجاد نیاز ها باشیم.

آموزش کامل و پروژه محور PWA - تبدیل سایت به اپلیکیشن

در این قسمت هم سه پیش نیاز داریم که باید مرتفع کنیم. بیایید با هم این سه بخش را خوانده و کمبود ها را ایجاد نماییم.

۱- Fast and Reliable : همان سرعت در اجرای لود و کاربری آفلاین هست که در بالا توضیح دادیم. میتوانیم با service worker و ساخت یک فایل manifest.json این بخش را پاس کنیم.

manifest.json

برای اینکه وبسایت ما به صورت یک اپلیکیشن عمل کند نیاز به توضیحاتی در مورد این اپلیکیشن داریم. از نام گرفته تا آیکون و …

لیستی از مهمترین ها:

  • background_color
  • categories
  • description
  • dir
  • display
  • display_override
  • iarc_rating_id
  • icons
  • lang
  • name
  • orientation
  • prefer_related_applications
  • protocol_handlers
  • related_applications
  • scope
  • screenshots
  • short_name
  • shortcuts
  • start_url
  • theme_color

برای قابل نصب شدن pwa , یک فایل manifest.json ساخته و کد زیر را وارد آن میکنیم و سپس در root سایتمان آن را آپلود میکنیم.

توجه داشته باشید که icons آرایه ای از آیکون های مختلف شماست.

{
  "name": "parnian school",
  "short_name": "parnian",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#FFE1C4",
  "orientation": "portrait-primary",
  "icons": [
{
      "src": "https://trainingsitedesign.ir/pwa.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any maskable"
    } 
    
    ]
}

این فایل manifest باید به پروژه ما شناخته شود. با کد زیر این کار را انجام میدهیم. در فایل index.html و در قسمت head

آموزش کامل و پروژه محور PWA - تبدیل سایت به اپلیکیشن

اگر دوباره از lighthouse در کروم استفاده کنید میبینید که برخی از موارد pass شدند همچنین با توجه به شکل زیر میتوانید مانیفست سایت خود را ببینید:

آموزش کامل و پروژه محور PWA - تبدیل سایت به اپلیکیشن

حال نوبت Service workers میباشد. Service workers ها میتوانند هر درخواستی به سایت ما را با یک پاسخ کاستومایز و سفارشی جواب دهند. مانند یک proxy بر روی سایت ما کار میکنند.

برای آشنایی بیشتر به مقاله سوالات استخدامی رجوع کنید.

کاربرد آن برای ما این است که در PWA ما میخواهیم با استفاده از service worker ها تعدادی از assetهای وبسایت خودمان را cache کنیم تا در صورت درخواست offline , سیستم کار کند.

هر service worker اولا در مرورگرهای پیشرفته و به روز کار میکند و هم اینکه باید در صفحه اصطلاحا register شود. برای رفع این مشکلات از کد زیر استفاده میکنیم:

میتوانید این اسکریپت را internal نوشته و یا external بنویسید و به صفحه اصلی لینک کنید. ما در این مثال intrenal مینویسیم.

آموزش کامل و پروژه محور PWA - تبدیل سایت به اپلیکیشن

مطابق کد زیر :

if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("serviceWorker.js")
    .then(reg => {
      console.log("Service worker registred successfully", reg);
    })
    .catch(err => {
      console.log("service worker not registred !!", err);
    });
}

با این کار یک service worker در وبسایت خودمان register کردیم. حال به سراغ فایل serviceWorker.js که در روت سایت ساخته ایم میرویم و آن سری از کد ها که لازم است سایت در حالت آفلاین داشته باشد تا کار کند را معرفی و آدرس دهی میکنیم. مانند کد زیر:

const staticCacheName = "site-static-v1";
const cacheAssets = [
  "/",
  "index.html",
  "sample css address/",
  "sample js address",
....

];

self.addEventListener("install", evt => {
  evt.waitUntil(
    caches
      .open(staticCacheName)
      .then(cache => {
        console.log("caching assets...");
        cache.addAll(cacheAssets);
      })
      .catch(err => {})
  );
});

self.addEventListener("fetch", evt => {
  evt.respondWith(
    caches
      .match(evt.request)
      .then(res => {
        return res || fetch(evt.request);
      })
      .catch(err => {
        if (evt.request.url.indexOf(".html") > -1) {
          return caches.match("./index.html");
        }
      })
  );
});

مانند مثال زیر برای سایت خودم:

const staticCacheName = "site-static-v1";
const cacheAssets = [
  "/",
  "index.html",
  "wp-content/themes/enfold-1/css/rtl.css",
  "wp-content/themes/enfold-1/css/layout.css",
  "wp-content/themes/enfold-1/css/grid.css",
  "wp-content/themes/enfold-1/css/custom.css",
  "wp-content/themes/enfold-1/css/base.css",
  "wp-content/themes/enfold-1/js/avia.js",
  "wp-content/themes/enfold-1/js/avia-compat.js",
  "wp-content/themes/enfold-1/js/shortcodes.js",
  "https://trainingsitedesign.ir/pwa.png"
];

self.addEventListener("install", evt => {
  evt.waitUntil(
    caches
      .open(staticCacheName)
      .then(cache => {
        console.log("caching assets...");
        cache.addAll(cacheAssets);
      })
      .catch(err => {})
  );
});

self.addEventListener("fetch", evt => {
  evt.respondWith(
    caches
      .match(evt.request)
      .then(res => {
        return res || fetch(evt.request);
      })
      .catch(err => {
        if (evt.request.url.indexOf(".html") > -1) {
          return caches.match("./index.html");
        }
      })
  );
});

حال اگر به تب lighthouse رفته و مجد تست بگیریم , با تصویر زیر مواجه شده و میبینیم که اکثر ارور ها مرتفع شده است.

هم چنین در تب application و در قسمت service worker میبینیم که در حال اجراست. اگر تمام مراحل را به درستی پشت سر گذاشته باشید.

آموزش کامل و پروژه محور PWA - تبدیل سایت به اپلیکیشن

۲- Installable : در این قسمت بررسی میشود که آیا وبسایت ما به عنوان یک shortcut میتواند روی Home Screen کاربر قرار بگیرد یا نه .

این موارد هم با نوشتن همان service worker و manifest.json قابل دسترس خواهد بود.

۳- Optimized PWA: در این قسمت مواردی برای نمایش تم‌ها روی دستگاه‌های مختلف، نمایش splash screen و همچنین برخی موارد کلی مورد نیاز برای اینکه وبسایت به یک PWA معتبر تبدیل شود سنجیده خواهد شد. این موارد اکثرا شامل یکسری تگ HTML ساده در وبسایت شما میشود.

پس کد های زیر را قرار دهید:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0” />
<meta name=”theme-color” content=”#F0F”>
<link rel=”apple-touch-icon” href=”...”>

کار تمام است… مجدد به تب lighthous رفته و یک REPORT بگیرید. اگر ایرادی گرفته که آن ها را برطرف کنید و در غیر این صورت PWA شما آمادست و میتوانید با کلیک بروی گزینه بالای مرورگر آن را نصب کنید.

آموزش کامل و پروژه محور PWA - تبدیل سایت به اپلیکیشن

نصب کنید و تمام. میدونم این مقاله آموزش کامل و پروژه محور PWA – تبدیل سایت به اپلیکیشن خیلی کاربردی بود. قابلی نداشت 🙂

آموزش کامل و پروژه محور PWA - تبدیل سایت به اپلیکیشن
6 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.