صادق رخصتی
صادق رخصتی
خواندن ۴ دقیقه·۵ سال پیش

آموزش ساده PWA

پس از جستجو در وب برای یک آموزش ساده PWA ، هر آنچه پیدا کردم کاملاً پیچیده بود یا به یک کتابخانه / چارچوب / و ... نیاز داشت. من شخصاً هنگام یادگیری یک فناوری جدید ، ترجیح می دهم با جزئیات غیر ضروری کنار بیایم. بنابراین با استفاده از چندین منبع ، من خودم یک آموزش ساده نوشتم که به محتوای دیگری نیاز ندارد: برنامه کلاسیک "سلام جهان" ، به سبک 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 پروژه خود ایجاد کنید و نشانه گذاری زیر را اضافه کنید:


<!doctype html><html lang=&quoten&quot><head>  <meta charset=&quotutf-8&quot>  <title>Hello World</title>  <link rel=&quotstylesheet&quot href=&quotcss/style.css&quot>  <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot><body class=&quotfullscreen&quot>  <div class=&quotcontainer&quot>    <h1 class=&quottitle&quot>Hello World!</h1>  </div></body></html>


و برای فایل 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
Google Lighthouse

اطمینان حاصل کنید که گزینه "Progressive Web App" بررسی شده است. اکنون می توانید تیک گزینه های دیگر را بردارید. سپس بر روی دکمه "test run" کلیک کنید. بعد از یک یا دو دقیقه Lighthouse باید به شما نمره و لیستی از ممیزی هایی را که برنامه منتقل کرده یا از بین رفته است ، به شما بدهد. برنامه در این مرحله باید در حدود 45 نمره کسب کند. اگر همه چیز به درستی کدگذاری شده بود ، متوجه خواهید شد که بیشتر آزمایشاتی که انجام می شود مربوط به الزاماتی است که در ابتدا بیان کردیم:

1. هنگامی که جاوا اسکریپت در دسترس نیست مقداری محتوا را شامل می شود.

4- دارای برچسب <meta name = "Viewport" با عرض(width) یا مقیاس اولیه(initial-scale) است.

5- محتوا به طور صحیح برای منظره اندازه می گیرد.

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

اضافه کردن Service Worker

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

var cacheName = 'hello-pwa';
var filesToCache = ['/', '/index.html', '/css/style.css', '/js/main.js']; /* Start the service worker and cache all of the app's content */
self.addEventListener('install', function(e) {
    e.waitUntil(caches.open(cacheName).then(function(cache) {
        return cache.addAll(filesToCache);
    }));
}); /* Serve cached content when offline */
self.addEventListener('fetch', function(e) {
    e.respondWith(caches.match(e.request).then(function(response) {
        return response || fetch(e.request);
    }));
});

اولین خط اسکریپت دو متغیر را نشان می دهد: cacheName و filesToCache. cacheName برای ایجاد حافظه پنهان آفلاین در مرورگر استفاده می شود و از Javascript به ما دسترسی می دهد. filesToCache آرایه ای است که لیستی از تمام پرونده هایی را که باید در آنها ذخیره شود وجود دارد. این پرونده ها باید به صورت URL نوشته شوند. توجه کنید که اولین مورد به سادگی "/" است ، URL پایه. به این ترتیب مرورگر ، فهرست index.html را ذخیره می کند ، حتی اگر کاربر مستقیماً نام آن پرونده را تایپ نکند.

بعد ، ما برای نصب Service Worker و ایجاد حافظه نهان مرورگر با استفاده از cacheName ، یک عملکرد اضافه می کنیم. پس از ایجاد حافظه نهان ، تمام پرونده های موجود در آرایه filesToCache را اضافه می کند. (توجه داشته باشید که گرچه این کد برای اهداف نمایشی کار می کند ، اما برای تولید در نظر گرفته نشده است زیرا در صورت عدم بارگیری حتی یکی از پرونده ها متوقف می شود.)

سرانجام ، هنگامی که مرورگر آفلاین است ، تابعی را برای بارگذاری در فایلهای ذخیره شده اضافه می کنیم.

اکنون که اسکریپت Service Worker ایجاد شده است ، باید آن را با برنامه خود ثبت کنیم. فایلی به نام main.js را در پوشه js ایجاد کرده و کد زیر را وارد کنید:

 = () => { 'use strict';  if ('serviceWorker' in navigator) { navigator.serviceWorker             .register('./sw.js');  }}

این کد به سادگی اسکریپت Service Worker را بارگیری می کند و شروع به کار می کند.

کد را قبل از بستن برچسب </body> در index.html ، کد را به برنامه خود اضافه کنید.

...
</div>
  <script src=&quotjs/main.js&quot>
</body>

یعنی index.html نهایی باید مانند این باشد:

<!doctype html> <html lang=&quoten&quot> <head> <meta charset=&quotutf-8&quot> <title>Hello World</title> <link rel=&quotstylesheet&quot href=&quotcss/style.css&quot> <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot> </head> <body class=&quotfullscreen&quot> <div class=&quotcontainer&quot> <h1 class=&quottitle&quot>Hello World!</h1> </div> <script src=&quotjs/main.js&quot> </body> </html>


اگر ممیزی Lighthouse را اجرا کنید ، اکنون نمره شما باید از 64 بالا برود و نیاز Service Worker قابل قبول شود.

اضافه کردن Manifest

شرط نهایی برای PWA داشتن یک فایل مانیفست است. مانیفست یک پرونده json است که برای مشخص کردن چگونگی ظاهر و رفتار برنامه در دستگاه ها استفاده می شود. به عنوان مثال ، می توانید جهت گیری برنامه و رنگ موضوع را تنظیم کنید.

فایلی با نام manifest.json را در پوشه root خود ذخیره کنید و محتوای زیر را اضافه کنید:

{ &quotname&quot: &quotHello World&quot, &quotshort_name&quot: &quotHello&quot, &quotlang&quot: &quoten-US&quot, &quotstart_url&quot: &quot/index.html&quot, &quotdisplay&quot: &quotstandalone&quot, &quotbackground_color&quot: &quotwhite&quot, &quottheme_color&quot: &quotwhite&quot}

برای برنامه ما عنوان ، رنگ پس زمینه و رنگ موضوع را تعیین می کنیم و به مرورگر می گوییم که باید بدون کروم مرورگر به عنوان یک برنامه مستقل رفتار شود.

فیلدها به صورت خط به صورت زیر است:

نام

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

نام کوتاه

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

زنگ

زبان پیش فرض برنامه بومی سازی شده است. در مورد ما ، انگلیسی.

start_url

به مرورگر می گوید که صفحه هنگام بارگذاری برنامه بارگیری شود. این معمولاً index.html خواهد بود اما لازم نیست که باشد.

نمایش دادن

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

رنگ پس زمینه

رنگ صفحه نمایش لحظه ای که هنگام راه اندازی برنامه باز می شود.

theme_color

رنگ نوار ابزار و در تعویض کار را تنظیم می کند.

برای افزودن مانیفست به برنامه خود ، به آن در برچسب head index.html مانند این پیوند دهید:

<head>
...
<link rel=&quotmanifest&quot href=&quot/manifest.json&quot>
...
</head>

همچنین باید با افزودن یک برچسب متا در داخل head، رنگ موضوع را مطابق با مجموعه موجود در مانیفست خود اعلام کنید:

<head>
...
<meta name=&quottheme-color&quot content=&quotwhite&quot/>
...
</head>

آیکون های اپیلیکیشن

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

برای افزودن صحیح این ویژگی ، به یک نماد برنامه نیاز دارید که اندازه آن برای مرورگر ، 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 مانند این نمادها را به پرونده مانیفست خود اضافه کنید:

{ &quotname&quot: &quotHello World&quot, &quotshort_name&quot: &quotHello&quot, &quoticons&quot: [{ &quotsrc&quot: &quotimages/hello-icon-128.png&quot, &quotsizes&quot: &quot128x128&quot, &quottype&quot: &quotimage/png&quot    }, { &quotsrc&quot: &quotimages/hello-icon-144.png&quot, &quotsizes&quot: &quot144x144&quot, &quottype&quot: &quotimage/png&quot    }, { &quotsrc&quot: &quotimages/hello-icon-152.png&quot, &quotsizes&quot: &quot152x152&quot, &quottype&quot: &quotimage/png&quot    }, { &quotsrc&quot: &quotimages/hello-icon-192.png&quot, &quotsizes&quot: &quot192x192&quot, &quottype&quot: &quotimage/png&quot    }, { &quotsrc&quot: &quotimages/hello-icon-256.png&quot, &quotsizes&quot: &quot256x256&quot, &quottype&quot: &quotimage/png&quot    }, { &quotsrc&quot: &quotimages/hello-icon-512.png&quot, &quotsizes&quot: &quot512x512&quot, &quottype&quot: &quotimage/png&quot    }], &quotlang&quot: &quoten-US&quot, &quotstart_url&quot: &quot/index.html&quot, &quotdisplay&quot: &quotstandalone&quot, &quotbackground_color&quot: &quotwhite&quot, &quottheme_color&quot: &quotwhite&quot}

در آخر ، آنها را در برچسب head به index.html اضافه کنید:

<head>
...
<link rel=&quoticon&quot href=&quotfavicon.ico&quot type=&quotimage/x-icon&quot />  
<link rel=&quotapple-touch-icon&quot href=&quotimages/hello-icon-152.png&quot>   
<meta name=&quottheme-color&quot content=&quotwhite&quot/>  
<meta name=&quotapple-mobile-web-app-capable&quot content=&quotyes&quot>  
<meta name=&quotapple-mobile-web-app-status-bar-style&quot content=&quotblack&quot> 
<meta name=&quotapple-mobile-web-app-title&quot content=&quotHello World&quot> 
<meta name=&quotmsapplication-TileImage&quot content=&quotimages/hello-icon-144.png&quot>  
<meta name=&quotmsapplication-TileColor&quot content=&quot#FFFFFF&quot>
...
</head>

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

به پایان رسید

در این مرحله ، برنامه نویسی به پایان رسیده و آخرین کاری که باید انجام دهید بارگذاری برنامه در یک وب سرور است. شرط نهایی یک برنامه وب مترقی این است که باید از طریق https ارائه شود.

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

صادق رخصتی
صادق رخصتی
متخصص مخابرات ، برنامه نویسی، شبکه و امنیت
شاید از این پست‌ها خوشتان بیاید