<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
    <channel>
        <title>نوشته های صادق رخصتی</title>
        <link>https://virgool.io/feed/@rokhsati</link>
        <description>متخصص مخابرات ، برنامه نویسی، شبکه و امنیت</description>
        <language>fa</language>
        <pubDate>2026-06-10 12:50:39</pubDate>
        <image>
            <url>https://files.virgool.io/upload/users/3319/avatar/bNliI1.png?height=120&amp;width=120</url>
            <title>صادق رخصتی</title>
            <link>https://virgool.io/@rokhsati</link>
        </image>

                    <item>
                <title>برنامه‌ریزی اورهال یا تعمیرات اساسی کارخانه</title>
                <link>https://virgool.io/@rokhsati/%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D8%B1%DB%8C%D8%B2%DB%8C-%D8%A7%D9%88%D8%B1%D9%87%D8%A7%D9%84-%DB%8C%D8%A7-%D8%AA%D8%B9%D9%85%DB%8C%D8%B1%D8%A7%D8%AA-%D8%A7%D8%B3%D8%A7%D8%B3%DB%8C-%DA%A9%D8%A7%D8%B1%D8%AE%D8%A7%D9%86%D9%87-qnnpdd70cd7d</link>
                <description>برنامه‌ریزی اورهال یا تعمیرات اساسی کارخانه، فرآیندی است که به منظور بهبود عملکرد و افزایش عمر مفید دستگاه‌ها و تجهیزات صورت می‌گیرد. این فرآیند باید با دقت و حوصله انجام شود و برنامه‌ریزی مناسبی نیاز دارد.برای برنامه‌ریزی اورهال کارخانه، ابتدا باید تجهیزات و قطعات مورد نیاز برای تعمیر و نگهداری دستگاه‌های کارخانه شناسایی شوند. در این مرحله، باید لیستی از قطعات و تجهیزات مورد نیاز جمع آوری شود و همچنین زمان و هزینه مورد نیاز برای تعمیرات را برآورد کرد.سپس باید برنامه‌ریزی زمانی صورت گیرد. باید تعیین شود که چه زمانی باید تعمیرات انجام شود و چه زمانی باید دستگاه‌های کارخانه قطع و تعمیر گردند. همچنین باید به مسائلی مانند جابجایی دستگاه‌ها، ایمنی و سلامت کارکنان، و هزینه‌های ناشی از توقف تولید توجه شود.در نهایت، برای برنامه‌ریزی اورهال کارخانه، باید یک برنامه‌ریزی پیشگیرانه نیز در نظر گرفته شود. به عنوان مثال، باید نقاط ضعف سیستم‌های کارخانه شناسایی شده و اصلاحات لازم صورت گیرد تا مشکلات در آینده به وجود نیایند.استفاده از نرم‌افزارهای مدیریت تعمیر و نگهداری کارخانه نیز می‌تواند در برنامه‌ریزی اورهال مفید باشد. این نرم‌افزارها به شما کمک می‌کنند تا تعمیرات را برنامه‌ریزی کنید، قطعات و تجهیزات لازم را سفارش دهید و زمانبندی فعالیت‌ها را پیگیری کنید.</description>
                <category>صادق رخصتی</category>
                <author>صادق رخصتی</author>
                <pubDate>Sat, 27 May 2023 22:12:26 +0330</pubDate>
            </item>
                    <item>
                <title>ساخت یک درختواره ساده در HTML</title>
                <link>https://virgool.io/@rokhsati/%D8%B3%D8%A7%D8%AE%D8%AA-%DB%8C%DA%A9-%D8%AF%D8%B1%D8%AE%D8%AA%D9%88%D8%A7%D8%B1%D9%87-%D8%B3%D8%A7%D8%AF%D9%87-%D8%AF%D8%B1-html-bt5pt8rcrzov</link>
                <description>نمونه یک درختوارهدر برنامه نویسی وب گاهی نیاز داریم که اطلاعات را بصورت یک درختواره نمایش بدیم.برای مثال من در اینجا از درختواره برای نمایش ساختار درختی منو به کاربر ( برای دادن دسترسی منو به سایر کاربران ) استفاده کردم.شما با اضافه کردن مقداری CSS ( به مقدار کافی D: ) میتونید رنگ و لعاب بهتری به ظاهر درختواره بدید.کد html + css و همچنین کد جاوا اسکریپت لازم ( که برای باز و بسته شدن منوها استفاده میشه) به این صورت است :&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta name=&amp;quotviewport&amp;quot content=&amp;quotwidth=device-width, initial-scale=1&amp;quot&gt;
&lt;style&gt;
ul, #myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.caret {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */  user-select: none;
}

.caret::before {
  content: &amp;quot\25B6&amp;quot
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */&#039;
  transform: rotate(90deg);  
}

.nested {
  display: none;
}
.active {  display: block;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul id=&amp;quotmyUL&amp;quot&gt;
  &lt;li&gt;&lt;input type=&amp;quotcheckbox&amp;quot&gt;&lt;span class=&amp;quotcaret caret-down&amp;quot&gt;صفحه نخست&lt;/span&gt;
    &lt;ul class=&amp;quotnested active&amp;quot&gt;
      &lt;li&gt;&lt;input type=&amp;quotcheckbox&amp;quot&gt;پروفایل&lt;/li&gt;
      &lt;li&gt;&lt;input type=&amp;quotcheckbox&amp;quot&gt;داشبورد&lt;/li&gt;
      &lt;li&gt;&lt;input type=&amp;quotcheckbox&amp;quot&gt;&lt;span class=&amp;quotcaret caret-down&amp;quot&gt;تنظیمات&lt;/span&gt;
        &lt;ul class=&amp;quotnested active&amp;quot&gt;
          &lt;li&gt;&lt;input type=&amp;quotcheckbox&amp;quot&gt;دسترسی کاربران&lt;/li&gt;
          &lt;li&gt;&lt;input type=&amp;quotcheckbox&amp;quot&gt;&lt;span class=&amp;quotcaret caret-down&amp;quot&gt;اطلاعات پایه&lt;/span&gt;
          &lt;ul class=&amp;quotnested active&amp;quot&gt;
              &lt;li&gt;زیرمنو 1&lt;/li&gt;
              &lt;li&gt;زیرمنو 2&lt;/li&gt;
              &lt;li&gt;زیرمنو 3&lt;/li&gt;
              &lt;li&gt;زیرمنو 4&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;input type=&amp;quotcheckbox&amp;quot&gt;&lt;span class=&amp;quotcaret caret-down&amp;quot&gt;محاسبات&lt;/span&gt;
            &lt;ul class=&amp;quotnested active&amp;quot&gt;
              &lt;li&gt;&lt;input type=&amp;quotcheckbox&amp;quot&gt;سال مالی&lt;/li&gt;
              &lt;li&gt;زیرمنو 5&lt;/li&gt;
              &lt;li&gt;زیرمنو 6&lt;/li&gt;
              &lt;li&gt;زیرمنو 7&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;  
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;input type=&amp;quotcheckbox&amp;quot&gt;داشبورد دوم&lt;/li&gt;
&lt;/ul&gt;


var toggler = document.getElementsByClassName(&amp;quotcaret&amp;quot);
var i;

for (i = 0; i &lt; toggler.length; i++) {
  toggler[i].addEventListener(&amp;quotclick&amp;quot, function() {
    this.parentElement.querySelector(&amp;quot.nested&amp;quot).classList.toggle(&amp;quotactive&amp;quot);
    this.classList.toggle(&amp;quotcaret-down&amp;quot);
  });
}


&lt;/body&gt;
&lt;/html
</description>
                <category>صادق رخصتی</category>
                <author>صادق رخصتی</author>
                <pubDate>Sat, 07 Nov 2020 12:25:51 +0330</pubDate>
            </item>
                    <item>
                <title>مایکروسافت اعلام کرد که پشتیبانی رسمی از PHP در ویندوز را کاهش می دهد</title>
                <link>https://virgool.io/@rokhsati/%D9%85%D8%A7%DB%8C%DA%A9%D8%B1%D9%88%D8%B3%D8%A7%D9%81%D8%AA-%D8%A7%D8%B9%D9%84%D8%A7%D9%85-%DA%A9%D8%B1%D8%AF-%DA%A9%D9%87-%D9%BE%D8%B4%D8%AA%DB%8C%D8%A8%D8%A7%D9%86%DB%8C-%D8%B1%D8%B3%D9%85%DB%8C-%D8%A7%D8%B2-php-%D8%AF%D8%B1-%D9%88%DB%8C%D9%86%D8%AF%D9%88%D8%B2-%D8%B1%D8%A7-%DA%A9%D8%A7%D9%87%D8%B4-%D9%85%DB%8C-%D8%AF%D9%87%D8%AF-zypoexqwhjyi</link>
                <description>مایکروسافت اعلام کرد که پشتیبانی رسمی از PHP در ویندوز را کاهش می دهددیل هیرت ، مدیر پروژه PHP در مایکروسافت ، این هفته در PHP mailing list اعلام کرد که مایکروسافت دیگر قصد ندارد پشتیبانی رسمی از PHP را در ویندوز با شروع ورژن V8 ارائه دهد:ما می دانیم که روند فعلی 2 سال برای رفع اشکال و مدت زمان 1 سال برای رفع مشکلات امنیتی است. این بدان معنی است که PHP 7.2 در ماه نوامبر از پشتیبانی خارج می شود. PHP 7.3 فقط در ماه نوامبر وارد حالت رفع مشکل امنیت خواهد شد. PHP 7.4 همچنان یک سال دیگر برای رفع اشکال و سپس یک سال رفع مشکلات امنیتی خواهد داشت. ما متعهد هستیم تا توسعه و ایجاد PHP در ویندوز را برای 7.2 ، 7.3 و 7.4 حفظ کنیم تا زمانی که آنها به طور رسمی پشتیبانی می‎شوند. با این حال ، ما به هیچ وجه برای نسخه 8.0 و حتی فراتر از آن ، از PHP برای ویندوز پشتیبانی نمی کنیم.برای اکثر ما ، این معنای زیادی ندارد و چون به عنوان یک چیز رسمی در مایکروسافت کنار گذاشته می شود به این معنی نیست که جامعه آن را انتخاب نمی کند. شرکت سازنده PHP SaraMG توضیح می دهد که چرا این مساله مهم است:برای برخی احتمالا مفهوم این خبر مشخص نشده، مایکروسافت https://windows.php.net را اجرا می کند و کلیه فرم های رسمی PHP را برای ویندوز تولید می کند. اگر &quot;php.exe&quot; یا &quot;mod_php7.dll&quot; یا نسخه های websapi را اجرا میکنید ، آنگاه یا از ساختهای PHP مایکروسافت استفاده می کنید یا خودتان آن را کامپایل می کنید.این پیام به این معنی است که مایکروسافت قصد ندارد ساخت های رسمی برای PHP 8 را به بعد ایجاد کند.این پیام به این معنی نیست که هیچ کس نمی خواهد.به احتمال زیاد این پروژه در جایی از ابر که ویندوز اجرا میکند یه ماشین را دوباره قابل استفاده کند (احتمالاً با استفاده از یک مجوز رایگان که بطور سخاوتمندانه توسط MS ، BTW ارائه شده است) و مراحل ساخت خودکار را برای ساختن این موارد &#x60;در خانه&#x60; تنظیم کند.این ماشین (ها) حتی ممکن است توسط همان افرادی که ساخت مایکروسافت را انجام می دهند (مانند cmb که او نیز یکی از 7.3 RM است) راه‌اندازی و نگهداری شوند.ما هنوز در مرحله واکنش اولیه در اینجا هستیم ،اما خط نهایی وجود دارد که احتمالاً تغییرات بسیار اندکی برای کاربران ویندوز ایجاد خواهد کرد.برای مطالعه بیشتر در مورد این موضوع ، Hacker News را مطالعه کنید.</description>
                <category>صادق رخصتی</category>
                <author>صادق رخصتی</author>
                <pubDate>Sun, 12 Jul 2020 14:13:10 +0430</pubDate>
            </item>
                    <item>
                <title>مراحل راه اندازی کسب و کار برنامه نویسی</title>
                <link>https://virgool.io/@rokhsati/%D9%85%D9%86%D9%90-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3-%D9%85%D9%86%D9%90-%D8%AA%D8%A7%D8%AC%D8%B1-wylza7e3kayg</link>
                <description>اگر میخواهید در حوزه برنامه نویسی برای خود کسب و کاری راه بیاندازید در کنار برنامه نویسی باید بازاریابی، فروش، فن بیان و مذاکره؛ حقوق تجارت و ... را هم بدانید.البته این فقط در صورتی است که خدمات کسب و کار شما فقط به ارائه خدمات و سرویس های مربوط به برنامه نویسی محدود شود. در غیر اینصورت به عنوان مثال اگر شما کسب و کاری دارید که خدمات برنامه نویسی در ارتباط با حسابداری ارائه میکند، داشتن اطلاعات حسابداری، مالیات، بیمه و ... الزامی می‎شودهر کدام از این علوم در خود دریایی از اطلاعات و دانش دارند که البته یک شبه به دست نمیاید. و شاید حس کنیم خوب منِ برنامه نویس که به یادگیری حسابداری، عمران، برق و ... علاقه ندارم پس...چه کنم؟یادگیری فن بیان و مذاکره، شبکه‎سازی و مهارت‌هایی از این دست را شروع کنید. هر چه قدر کُند و کم، باز هم پیش بروید و شروع کنید. در هفته ۳ یا ۴ ساعت در این مورد مطالعه کنید و یا می‌توانید آموزش‌های آنلاین ویدئویی ببینید یا در وبینارها شرکت کنید. آنچه را یاد گرفتید سعی کنید در زندگی روزمره خود استفاده و تمرین کنید. یادتان باشد هرچقدر در یادگیری این مهارت‌ها پیش بروید بهتر است اما فراموش نکنید شما یک برنامه نویس هستید و قرار نیست استاد آموزش مهارت‌های ارتباطی شوید!همه ما خواهان این هستیم که به بهترین شکل و ارتباط برقرار کنیم و دارای نفوذ کلام و قدرت بیان باشم پس لازمه آن این است که راه‌های تأثیرگذاری کلام و بیان را بیاموزیم و بکار ببندیم و از آثار آن بهره‌مند شویم.۲.  شریک شوید و اعتماد کنید، این که شما هم برنامه نویس باشید و هم مهندس عمران، امری بعید نیست اما زمان بر است. و ما در عصری زندگی میکنیم که هیچ چیز با ارزش تر از زمان نیست. اگر ایده ای در زمینه نرم افزار حسابداری، معماری، مکانیک و ... دارید نباید وقتتان را بابت یادگیری آن رشته تلف کنید، یک کارشناس مربوطه پیدا کنید (می‎تواند هم دانشگاهی، همکاری در قسمت دیگر، همسایه و فامیل باشد یا اگر هیچکدام در دسترس نیست اصلا آگهی بزنید!). ممکن است همین الان که شما دارید به ایده تان فکر میکنید در ذهن شخص دیگری هم وجود داشته یا اصلا شروع کرده باشد پس وقت را از دست ندهید.نگران شراکت نباشید، قرارداد ببندید (اگر وکیل آشنا دارید که بتواند کمک کند چه بهتر اگر ندارید نمونه های قراردادهای آماده در اینترنت زیاد است)، برای شروع بجای پرداخت حقوق به دیگران، سهام واگذار کنید ( تعداد نفرات را در ابتدای پروژه به راحتی زیاد نکنید !!)مهارت تیم سازی را در خود تقویت کنید، آموزش های آنلاینی در این باره وجود دارد که یکی دو روزه میتوانید اطلاعات خوبی کسب کنید.یک تیم تشکیل شده از چند نفری که مهارت‌هایشان در زمینه‌های مختلفی است ولی به دلیل این که همگی مقصد و اهداف مشترکی دارند به هم پیوند خورده‌اند. تیم‌سازی یکی از کارهایی است که این روزها تمامی سازمان‌های موفق در دنیا در پیش گرفته‌اند. زمانی که افراد یک تیم در مورد هدفی مشارکت کنند موجب بهبود کارها و فرآیند تصمیم‌گیری می‌شود.ادامه در پست های بعد...لطفاً نظر خودتان و علاقه به ادامه این مبحث رو در مورد این موضوع برای من بنویسید</description>
                <category>صادق رخصتی</category>
                <author>صادق رخصتی</author>
                <pubDate>Sat, 11 Jul 2020 10:24:28 +0430</pubDate>
            </item>
                    <item>
                <title>برگه های تقلب برای برنامه نویسی وب</title>
                <link>https://virgool.io/@rokhsati/%D8%A8%D8%B1%DA%AF%D9%87-%D9%87%D8%A7%DB%8C-%D8%AA%D9%82%D9%84%D8%A8-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-%D9%88%D8%A8-e3orxvlqs7gh</link>
                <description>من یکی از طرفداران آموزش به روش خودخوان هستم، از اینکه مطلبی رو در کوتاه ترین زمان ممکن یاد بگیرم لذت میبرم. به نظر من مهترین موردی که در برنامه نویسی باید یاد گرفت، مفاهیم برنامه نویسیه. نباید در گرداب دستورالعمل ها و نگارش (syntax) غرق شد. برای همین برگه های تقلب یا همون Cheat sheet ها خیلی برای من دوست داشتنی هستند. چون من معمولا syntax ها رو حفظ نمیکنم.یکی از خوبی های مطالعه این cheat sheet های یکی دو صفحه ای  اینه که به شما کمک میکنه از بعضی از قابلیت ها و توابع آماده ای که در اون زبان برنامه نویسی وجود داره مطلع بشید، کنجکاو بشید، تحقیق کنید و چیزای جدیدی یاد بگیرید.در این پست من برای شما دوستان 5 فایل مهم و کاربردی برا ی برنامه نویسی وب آماده کردم که شامل cheat sheet های زبان های PHP, SQL, JQuery, HTML و CSS میشه. که میتونید از لینک های زیر بصورت مستقیم دانلود کنید:CSS_cheat_sheetHTML_cheat_sheetJquery_cheat_sheetPHP_advanced_cheart_sheetPHP_intro_cheat_sheetSQL_chat_sheet</description>
                <category>صادق رخصتی</category>
                <author>صادق رخصتی</author>
                <pubDate>Wed, 08 Jul 2020 17:38:25 +0430</pubDate>
            </item>
                    <item>
                <title>آموزش ساده PWA</title>
                <link>https://virgool.io/@rokhsati/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B3%D8%A7%D8%AF%D9%87-pwa-jrl41sp1mmve</link>
                <description>پس از جستجو در وب برای یک آموزش ساده PWA ، هر آنچه پیدا کردم کاملاً پیچیده بود یا به یک کتابخانه / چارچوب / و ... نیاز داشت. من شخصاً هنگام یادگیری یک فناوری جدید ، ترجیح می دهم با جزئیات غیر ضروری کنار بیایم. بنابراین با استفاده از چندین منبع ، من خودم یک آموزش ساده نوشتم که به محتوای دیگری نیاز ندارد: برنامه کلاسیک &quot;سلام جهان&quot; ، به سبک PWA.برنامه کلاسیک &quot;سلام جهان&quot; ، به سبک PWA.اگر با برنامه های وب Progressive آشنا نیستید ، ایده اصلی استفاده از فناوری های مرورگر برای ساختن یک برنامه وب است که به صورت آفلاین کار می کند و ظاهر و احساس یک برنامه بومی را دارد. در این آموزش نحوه استفاده از مانیفست و سرویس دهندگان را برای شما ارائه می دهم تا ساده ترین برنامه ممکن را ایجاد کنید ، برنامه ای که بدون اتصال به اینترنت کار می کند و می تواند به صفحه اصلی شما اضافه شود.برای به دست آوردن بیشترین استفاده از این آموزش باید با HTML ، CSS و JavaScript آشنا شوید. اگر می توانید یک صفحه وب را کدگذاری کنید و از JavaScript ساده برای اضافه کردن برخی تعامل استفاده کنید ، باید بتوانید آنرا دنبال کنید. برای ساخت این برنامه به ویرایشگر متن ، آخرین نسخه Chrome و یک وب سرور محلی نیاز دارید. من از براکت های Adobe در این آموزش استفاده کرده ام ، زیرا دارای یک وب سرور داخلی است ، اما می توانید از هر ویرایشگر متن و سرور که در آن راحت هستید استفاده کنید.راه اندازییک دایرکتوری برای برنامه ایجاد کنید و زیرمجموعه های js ، css و تصاویر را اضافه کنید. پس از پایان کار باید مانند این باشد:/Hello-PWA   # Project Folder
    /css     # Stylesheets
    /js      # Javascript
    /images  # Image files.نوشتن رابط کاربری برنامههنگام نوشتن نشانه گذاری(Markup) برای یک برنامه وب پیشرونده، 2 مورد لازم را در خاطر داشته باشید:1.برنامه باید برخی از محتوا را نشان دهد حتی اگر جاوا اسکریپت غیرفعال باشد. در صورت خراب بودن اتصال اینترنت یا استفاده از یک مرورگر قدیمی ، این کار باعث می شود از دیدن صفحه خالی توسط کاربران جلوگیری شود.2.باید پاسخگو باشد و به درستی در دستگاه های مختلف نمایش داده شود. به عبارت دیگر ، باید دوستانه با موبایل باشد.برای برنامه کوچک ما ، اولین کد موردنظر را با کدنویسی محتوا و دیگری با اضافه کردن یک برچسب مشاهده متنی ، اولین نیاز را برطرف خواهیم کرد.برای این کار ، یک پرونده با نام index.html در پوشه root پروژه خود ایجاد کنید و نشانه گذاری زیر را اضافه کنید:&lt;!doctype html&gt;&lt;html lang=&amp;quoten&amp;quot&gt;&lt;head&gt;  &lt;meta charset=&amp;quotutf-8&amp;quot&gt;  &lt;title&gt;Hello World&lt;/title&gt;  &lt;link rel=&amp;quotstylesheet&amp;quot href=&amp;quotcss/style.css&amp;quot&gt;  &lt;meta name=&amp;quotviewport&amp;quot content=&amp;quotwidth=device-width, initial-scale=1.0&amp;quot&gt;&lt;body class=&amp;quotfullscreen&amp;quot&gt;  &lt;div class=&amp;quotcontainer&amp;quot&gt;    &lt;h1 class=&amp;quottitle&amp;quot&gt;Hello World!&lt;/h1&gt;  &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;و برای فایل style.css :body { font-family: sans-serif;} /* Make content area fill the entire browser window */html,.fullscreen { display: flex; height: 100%; margin: 0; padding: 0; width: 100%;} /* Center the content in the browser window */.container { margin: auto; text-align: center;} .title { font-size: 3rem;}بسیار خوب، تا اینجا ظاهر ساده اپلیکیشن آماده شده و شما میتوانید آن را در مرورگر مشاهده نمائید. برای سادگی استایل بصورت تمام صفحه طراحی شده است.مشاهده اپ در گوگل کرومتست اپلیکیشناکنون که چیزی را در مرورگر مشاهده کردیم ، از Lighthouse Google برای آزمایش برنامه استفاده خواهیم کرد و می فهمیم که چقدر خوب با استانداردهای PWA مطابقت دارد. F12 را فشار دهید تا پانل توسعه دهنده در Chrome باز شود و بر روی زبانه Audits کلیک کنید تا Lighthouse را باز کنید.Google Lighthouse اطمینان حاصل کنید که گزینه &quot;Progressive Web App&quot; بررسی شده است. اکنون می توانید تیک گزینه های دیگر را بردارید. سپس بر روی دکمه &quot;test run&quot; کلیک کنید. بعد از یک یا دو دقیقه Lighthouse باید به شما نمره و لیستی از ممیزی هایی را که برنامه منتقل کرده یا از بین رفته است ، به شما بدهد. برنامه در این مرحله باید در حدود 45 نمره کسب کند. اگر همه چیز به درستی کدگذاری شده بود ، متوجه خواهید شد که بیشتر آزمایشاتی که انجام می شود مربوط به الزاماتی است که در ابتدا بیان کردیم:1. هنگامی که جاوا اسکریپت در دسترس نیست مقداری محتوا را شامل می شود.4- دارای برچسب &lt;meta name = &quot;Viewport&quot; با عرض(width) یا مقیاس اولیه(initial-scale) است.5- محتوا به طور صحیح برای منظره اندازه می گیرد.وقتی برنامه خود را می سازید می توانید به طور دوره ای این ممیزی ها را اجرا کنید تا مطمئن شوید که پیشرفت در مسیر است و مشکلات دیگری که باید برطرف شود را تشخیص می دهد.اضافه کردن Service Workerنیاز بعدی برنامه ما ثبت یک Service Worker است. Service Worker ها در اصل اسکریپتی هستند که در پس زمینه اجرا می شوند تا وظایفی را انجام دهند که نیازی به تعامل کاربر ندارند. این برنامه در حالی که Service Worker از چیزهای کسل کننده مراقبت می کند ، برنامه اصلی را برای کاربران شما آزاد می کند.برای برنامه ما از یکی برای بارگیری و ذخیره کردن محتوای خود استفاده خواهیم کرد و در صورت آفلاین بودن کاربر ، آن را از حافظه پستی پشتیبان تهیه می کند.فایلی به نام sw.js را در پوشه root خود ایجاد کنید و محتویات اسکریپت را در زیر وارد کنید. دلیل ذخیره شده در ریشه برنامه ، دسترسی به همه پرونده های برنامه است. این امر به این دلیل است که Service Worker ها فقط اجازه دسترسی به پرونده ها در همان فهرست و زیر فهرست ها را دارند.var cacheName = &#039;hello-pwa&#039;;var filesToCache = [&#039;/&#039;, &#039;/index.html&#039;, &#039;/css/style.css&#039;, &#039;/js/main.js&#039;]; /* Start the service worker and cache all of the app&#039;s content */self.addEventListener(&#039;install&#039;, function(e) {    e.waitUntil(caches.open(cacheName).then(function(cache) {        return cache.addAll(filesToCache);    }));}); /* Serve cached content when offline */self.addEventListener(&#039;fetch&#039;, function(e) {    e.respondWith(caches.match(e.request).then(function(response) {        return response || fetch(e.request);    }));});اولین خط اسکریپت دو متغیر را نشان می دهد: cacheName و filesToCache. cacheName برای ایجاد حافظه پنهان آفلاین در مرورگر استفاده می شود و از Javascript به ما دسترسی می دهد. filesToCache آرایه ای است که لیستی از تمام پرونده هایی را که باید در آنها ذخیره شود وجود دارد. این پرونده ها باید به صورت URL نوشته شوند. توجه کنید که اولین مورد به سادگی &quot;/&quot; است ، URL پایه. به این ترتیب مرورگر ، فهرست index.html را ذخیره می کند ، حتی اگر کاربر مستقیماً نام آن پرونده را تایپ نکند.بعد ، ما برای نصب Service Worker و ایجاد حافظه نهان مرورگر با استفاده از cacheName ، یک عملکرد اضافه می کنیم. پس از ایجاد حافظه نهان ، تمام پرونده های موجود در آرایه filesToCache را اضافه می کند. (توجه داشته باشید که گرچه این کد برای اهداف نمایشی کار می کند ، اما برای تولید در نظر گرفته نشده است زیرا در صورت عدم بارگیری حتی یکی از پرونده ها متوقف می شود.)سرانجام ، هنگامی که مرورگر آفلاین است ، تابعی را برای بارگذاری در فایلهای ذخیره شده اضافه می کنیم.اکنون که اسکریپت Service Worker ایجاد شده است ، باید آن را با برنامه خود ثبت کنیم. فایلی به نام main.js را در پوشه js ایجاد کرده و کد زیر را وارد کنید: = () =&gt; { &#039;use strict&#039;;  if (&#039;serviceWorker&#039; in navigator) { navigator.serviceWorker             .register(&#039;./sw.js&#039;);  }}این کد به سادگی اسکریپت Service Worker را بارگیری می کند و شروع به کار می کند.کد را قبل از بستن برچسب &lt;/body&gt; در index.html ، کد را به برنامه خود اضافه کنید....
&lt;/div&gt;
  &lt;script src=&amp;quotjs/main.js&amp;quot&gt;
&lt;/body&gt;یعنی index.html نهایی باید مانند این باشد:&lt;!doctype html&gt; &lt;html lang=&amp;quoten&amp;quot&gt; &lt;head&gt; &lt;meta charset=&amp;quotutf-8&amp;quot&gt; &lt;title&gt;Hello World&lt;/title&gt; &lt;link rel=&amp;quotstylesheet&amp;quot href=&amp;quotcss/style.css&amp;quot&gt; &lt;meta name=&amp;quotviewport&amp;quot content=&amp;quotwidth=device-width, initial-scale=1.0&amp;quot&gt; &lt;/head&gt; &lt;body class=&amp;quotfullscreen&amp;quot&gt; &lt;div class=&amp;quotcontainer&amp;quot&gt; &lt;h1 class=&amp;quottitle&amp;quot&gt;Hello World!&lt;/h1&gt; &lt;/div&gt; &lt;script src=&amp;quotjs/main.js&amp;quot&gt; &lt;/body&gt; &lt;/html&gt;اگر ممیزی Lighthouse را اجرا کنید ، اکنون نمره شما باید از 64 بالا برود و نیاز Service Worker قابل قبول شود.اضافه کردن Manifestشرط نهایی برای PWA داشتن یک فایل مانیفست است. مانیفست یک پرونده json است که برای مشخص کردن چگونگی ظاهر و رفتار برنامه در دستگاه ها استفاده می شود. به عنوان مثال ، می توانید جهت گیری برنامه و رنگ موضوع را تنظیم کنید.فایلی با نام manifest.json را در پوشه root خود ذخیره کنید و محتوای زیر را اضافه کنید:{ &amp;quotname&amp;quot: &amp;quotHello World&amp;quot, &amp;quotshort_name&amp;quot: &amp;quotHello&amp;quot, &amp;quotlang&amp;quot: &amp;quoten-US&amp;quot, &amp;quotstart_url&amp;quot: &amp;quot/index.html&amp;quot, &amp;quotdisplay&amp;quot: &amp;quotstandalone&amp;quot, &amp;quotbackground_color&amp;quot: &amp;quotwhite&amp;quot, &amp;quottheme_color&amp;quot: &amp;quotwhite&amp;quot}برای برنامه ما عنوان ، رنگ پس زمینه و رنگ موضوع را تعیین می کنیم و به مرورگر می گوییم که باید بدون کروم مرورگر به عنوان یک برنامه مستقل رفتار شود.فیلدها به صورت خط به صورت زیر است:نامعنوان برنامه. این کار هنگام درخواست کاربر برای نصب برنامه مورد استفاده قرار می گیرد. این باید عنوان کامل برنامه باشد.نام کوتاهآیا نام آن از برنامه خارج است زیرا در نماد برنامه ظاهر می شود. این باید کوتاه و نکته ای باشد.زنگزبان پیش فرض برنامه بومی سازی شده است. در مورد ما ، انگلیسی.start_urlبه مرورگر می گوید که صفحه هنگام بارگذاری برنامه بارگیری شود. این معمولاً index.html خواهد بود اما لازم نیست که باشد.نمایش دادننوع پوستی که برنامه باید در آن ظاهر شود. برای برنامه ما ، ما از مستقل استفاده می کنیم تا این برنامه را مانند یک برنامه بومی استاندارد جلوه داده و احساس کند. تنظیمات دیگری برای ساخت آن به صورت تمام صفحه یا گنجاندن مرورگر کروم وجود دارد.رنگ پس زمینهرنگ صفحه نمایش لحظه ای که هنگام راه اندازی برنامه باز می شود.theme_colorرنگ نوار ابزار و در تعویض کار را تنظیم می کند.برای افزودن مانیفست به برنامه خود ، به آن در برچسب head index.html مانند این پیوند دهید:&lt;head&gt;
...
&lt;link rel=&amp;quotmanifest&amp;quot href=&amp;quot/manifest.json&amp;quot&gt;
...
&lt;/head&gt;همچنین باید با افزودن یک برچسب متا در داخل head، رنگ موضوع را مطابق با مجموعه موجود در مانیفست خود اعلام کنید:&lt;head&gt;
...
&lt;meta name=&amp;quottheme-color&amp;quot content=&amp;quotwhite&amp;quot/&gt;
...
&lt;/head&gt;آیکون های اپیلیکیشنبعد از مرحله قبل ، شاید متوجه شده باشید که لایت هاوس از گم شدن آیکون های برنامه شکایت دارد. اگرچه برای کار کردن برنامه به صورت آفلاین کاملاً ضروری نیست ، آنها به شما امکان می دهند برنامه را به صفحه اصلی خود اضافه کند.برای افزودن صحیح این ویژگی ، به یک نماد برنامه نیاز دارید که اندازه آن برای مرورگر ، Windows ، Mac / iPhone و Android باشد. این حداقل 7 اندازه متفاوت است: 128x128 px ، 144x144 px، 152x152 px، 192x192 px، 256x256 px، 512x512px and favicon 16x16px. به جای ایجاد خود ، می توانید مواردی را که من برای این آموزش ایجاد کردم از Github بارگیری کنید. آنها را در پوشه تصاویر ذخیره کنید و favicon.ico را در پوشه root پروژه قرار دهید.بعد از خاصیت short_name مانند این نمادها را به پرونده مانیفست خود اضافه کنید:{ &amp;quotname&amp;quot: &amp;quotHello World&amp;quot, &amp;quotshort_name&amp;quot: &amp;quotHello&amp;quot, &amp;quoticons&amp;quot: [{ &amp;quotsrc&amp;quot: &amp;quotimages/hello-icon-128.png&amp;quot, &amp;quotsizes&amp;quot: &amp;quot128x128&amp;quot, &amp;quottype&amp;quot: &amp;quotimage/png&amp;quot    }, { &amp;quotsrc&amp;quot: &amp;quotimages/hello-icon-144.png&amp;quot, &amp;quotsizes&amp;quot: &amp;quot144x144&amp;quot, &amp;quottype&amp;quot: &amp;quotimage/png&amp;quot    }, { &amp;quotsrc&amp;quot: &amp;quotimages/hello-icon-152.png&amp;quot, &amp;quotsizes&amp;quot: &amp;quot152x152&amp;quot, &amp;quottype&amp;quot: &amp;quotimage/png&amp;quot    }, { &amp;quotsrc&amp;quot: &amp;quotimages/hello-icon-192.png&amp;quot, &amp;quotsizes&amp;quot: &amp;quot192x192&amp;quot, &amp;quottype&amp;quot: &amp;quotimage/png&amp;quot    }, { &amp;quotsrc&amp;quot: &amp;quotimages/hello-icon-256.png&amp;quot, &amp;quotsizes&amp;quot: &amp;quot256x256&amp;quot, &amp;quottype&amp;quot: &amp;quotimage/png&amp;quot    }, { &amp;quotsrc&amp;quot: &amp;quotimages/hello-icon-512.png&amp;quot, &amp;quotsizes&amp;quot: &amp;quot512x512&amp;quot, &amp;quottype&amp;quot: &amp;quotimage/png&amp;quot    }], &amp;quotlang&amp;quot: &amp;quoten-US&amp;quot, &amp;quotstart_url&amp;quot: &amp;quot/index.html&amp;quot, &amp;quotdisplay&amp;quot: &amp;quotstandalone&amp;quot, &amp;quotbackground_color&amp;quot: &amp;quotwhite&amp;quot, &amp;quottheme_color&amp;quot: &amp;quotwhite&amp;quot}در آخر ، آنها را در برچسب head به index.html اضافه کنید:&lt;head&gt;
...
&lt;link rel=&amp;quoticon&amp;quot href=&amp;quotfavicon.ico&amp;quot type=&amp;quotimage/x-icon&amp;quot /&gt;  
&lt;link rel=&amp;quotapple-touch-icon&amp;quot href=&amp;quotimages/hello-icon-152.png&amp;quot&gt;   
&lt;meta name=&amp;quottheme-color&amp;quot content=&amp;quotwhite&amp;quot/&gt;  
&lt;meta name=&amp;quotapple-mobile-web-app-capable&amp;quot content=&amp;quotyes&amp;quot&gt;  
&lt;meta name=&amp;quotapple-mobile-web-app-status-bar-style&amp;quot content=&amp;quotblack&amp;quot&gt; 
&lt;meta name=&amp;quotapple-mobile-web-app-title&amp;quot content=&amp;quotHello World&amp;quot&gt; 
&lt;meta name=&amp;quotmsapplication-TileImage&amp;quot content=&amp;quotimages/hello-icon-144.png&amp;quot&gt;  
&lt;meta name=&amp;quotmsapplication-TileColor&amp;quot content=&amp;quot#FFFFFF&amp;quot&gt;
...
&lt;/head&gt;اگر همه چیز خوب پیش رفت باید دید که نمره لایت هاوس خود را تا 91 بالا می برد.به پایان رسیددر این مرحله ، برنامه نویسی به پایان رسیده و آخرین کاری که باید انجام دهید بارگذاری برنامه در یک وب سرور است. شرط نهایی یک برنامه وب مترقی این است که باید از طریق https ارائه شود. امیدوارم که از این آموزش لذت برده باشید و مفید واقع شود. لطفاً در قسمت نظرات به من بگویید که نظر شما چیست.</description>
                <category>صادق رخصتی</category>
                <author>صادق رخصتی</author>
                <pubDate>Fri, 10 Jan 2020 11:33:46 +0330</pubDate>
            </item>
            </channel>
</rss>