پس از جستجوی وب برای یک آموزش ساده PWA ، هر آنچه که من یافتم بسیار پیچیده بود یا نیاز به یک کتابخانه/ چارچوب / پلت فرم شخص ثالث یا دیگری داشت. شخصاً ، هنگام یادگیری یک فناوری جدید ، ترجیح می دهم جزئیات غیر ضروری را کنار بگذارم. بنابراین ، با استفاده از تعدادی از منابع ، خودم یک آموزش ساده نوشتم که به هیچ محتوای شخص ثالث نیاز ندارد: برنامه کلاسیک “Hello World” ، به سبک PWA.
اگر با برنامه های پیشرو وب آشنایی ندارید ، ایده اصلی استفاده از فن آوری های مرورگر برای ساخت یک برنامه وب است که به صورت آفلاین کار می کند و دارای ظاهر و احساس یک برنامه محلی است. در این آموزش من به شما نشان می دهم که چگونه با استفاده از یک مانیفست و سرویس دهنده ها می توانید ساده ترین برنامه ممکن را ایجاد کنید ، برنامه ای که بدون اتصال به اینترنت کار می کند و می تواند به صفحه اصلی شما اضافه شود.
برای استفاده بهتر از این آموزش باید با HTML ، CSS و JavaScript آشنا باشید. اگر می توانید یک صفحه وب را کدگذاری کنید و از JavaScript برای افزودن تعاملی استفاده کنید ، می توانید آن را دنبال کنید. برای ساخت این برنامه به ویرایشگر متن، آخرین نسخه Chrome و وب سرور محلی نیاز دارید. من از VS Code و Wamp server در این آموزش استفاده کرده ام. اما شما می توانید از ویرایشگر متن و ترکیب سرور مورد نظر خود استفاده کنید.
راه اندازی
یک دایرکتوری برای برنامه ایجاد کنید و زیر شاخه های js ، css و تصاویر را اضافه کنید. بعد از اتمام کار باید به این شکل باشد:
برای شروع پوشه پروژه خود را در VS Code باز کنید.
نوشتن رابط برنامه
هنگام نوشتن نشانه گذاری برای یک برنامه وب پیشرو ، 2 مورد لازم است که باید به خاطر بسپارید:
- برنامه باید حتی اگر JavaScript غیرفعال باشد ، برخی از مطالب را نمایش دهد. در صورتی که اتصال اینترنت آنها خراب باشد یا از مرورگر قدیمی استفاده می کنند ، این امر از دیدن صفحه خالی جلوگیری می کند.
- باید پاسخگو باشد و در دستگاه های مختلف به درستی نمایش داده شود. به عبارت دیگر ، این باید با موبایل دوست باشد.
برای برنامه کوچک ما ، به سادگی و با افزودن برچسب متا viewport ، اولین نیاز را برطرف خواهیم کرد.
برای این کار ، یک پرونده به نام index.html در پوشه ریشه پروژه خود ایجاد کنید و علامت گذاری زیر را اضافه کنید:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body class="fullscreen">
<div class="container">
<h1 class="title">Hello World!</h1>
</div>
</body>
</html>
نتیجه این طراحی این است که در یک صفحه سبک بارگیری می شود و عرض و مقیاس viewport را به طور پیش فرض آنها تنظیم می کند. متن “سلام” در عنصر h1 نوشته شده و سپس در یک div به عنوان ظرف قرار گرفته است.
سپس ، یک فایل به نام style.css در پوشه 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;
}
من body را برای پر کردن کل نمای پنجره مرورگر برای آسان کردن مرکز محتوا ، تنظیم کرده ام. محتوا در مرکز قرار می گیرد و متن در نوع بزرگ ، پررنگ ، sans-serif تنظیم می شود.
در ادامه آموزش موارد اضافی دیگری را به فایل index.html اضافه خواهیم کرد.
اکنون می توانید با اجرای مرورگر و باز کرذن صفحه از طریق آدرس localhost ، اجرای برنامه را ببینید:
آزمایش کردن برنامه
اکنون که چیزی در مرورگر مشاهده کردیم، از Google Lighthouse برای تست برنامه و بررسی میزان مطابقت آن با استانداردهای PWA استفاده خواهیم کرد. F12 را فشار دهید تا صفحه توسعه دهنده در Chrome باز شود و روی برگه ممیزی کلیک کنید تا Lighthouse باز شود.
اطمینان حاصل کنید که گزینه “Progressive Web App” علامت گذاری شده است. فعلاً می توانید علامت دیگران را بردارید. سپس بر روی دکمه “Generate Report” کلیک کنید. بعد از یک یا دو دقیقه Lighthouse باید به شما یک امتیاز و لیستی از ممیزی هایی می دهد که برنامه از آن عبور کرده یا شکست خورده است. در این مرحله برنامه باید حدود 45 امتیاز کسب کند. اگر همه چیز به درستی کدگذاری شده باشد ، متوجه خواهید شد که بیشتر آزمایشاتی که انجام می شود مربوط به الزاماتی است که در ابتدا بیان کردیم:
- حاوی برخی مطالب است که JavaScript در دسترس نیست.
- دارای برچسب <meta name = “viewport> با عرض یا مقیاس اولیه است.
- اندازه محتوا به درستی برای ویوپورت اندازه شده است.
وقتی برنامه ای را ایجاد می کنید می توانید به صورت دوره ای این حسابرسی ها را اجرا کنید تا مطمئن شوید که در مسیر پیشرفت قرار دارد و هر مشکلی که باید برطرف شود را تشخیص می دهید.
یک کارگر سرویس(Service Worker) اضافه کنید
گام بعدی برای برنامه ثبت نام یک کارگر خدمات است. کارگران خدمات اساساً اسکریپت هایی هستند که برای انجام وظایفی که به تعامل کاربر نیاز ندارند ، در پس زمینه اجرا می شوند. در حالی که سرویس دهنده از کارهای خسته کننده مراقبت می کند ، این کار برنامه اصلی را برای کاربران شما آزاد می کند.
در این برنامه از یکی برای بارگیری و پنهان کردن محتوا استفاده خواهیم کرد و سپس وقتی کاربر آفلاین است ، از حافظه پنهان پشتیبان تهیه می کنیم.
در پوشه ریشه پروژه فایلی با نام sw.js ایجاد کنید و محتوای اسکریپت زیر را وارد کنید. دلیل ذخیره شدن آن در ریشه برنامه ، دسترسی به همه پرونده های برنامه است. این امر به این دلیل است که سرویس دهندگان فقط اجازه دسترسی به پرونده های موجود در همان دایرکتوری و زیر فهرست ها را دارند.
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 را ذخیره کند حتی اگر کاربر مستقیماً آن نام فایل را تایپ نکند.
بعد ، یک تابع اضافه می کنیم تا سرویس کارگر نصب شود و حافظه پنهان مرورگر را با استفاده از cacheName ایجاد کنیم. هنگامی که حافظه پنهان ایجاد شد ، تمام پرونده های ذکر شده در آرایه filesToCache را اضافه می کند. (توجه داشته باشید که اگرچه این کد برای اهداف نمایشی کار می کند اما برای تولید در نظر گرفته نشده است زیرا اگر حتی در بارگیری یکی از پرونده ها متوقف شود متوقف می شود.)
در آخر ، یک تابع اضافه می کنیم تا وقتی مرورگر آفلاین است ، پرونده های ذخیره شده بارگذاری شود.
اکنون که اسکریپت سرویس کار ایجاد شده است ، باید آن را در برنامه خود ثبت کنیم. در پوشه js فایلی به نام main.js ایجاد کنید و کد زیر را وارد کنید:
window.onload = () => {
'use strict';
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('./sw.js');
}
}
این کد اسکریپت سرویس کارگر را بارگذاری می کند و شروع به کار می کند.
با قرار دادن اسکریپت دقیقاً قبل از برچسب بسته شدن </ body> در index.html کد را به برنامه خود اضافه کنید.
...
</div>
<script src="js/main.js"></script>
</body>
حالا اگر ممیزی های Lighthouse را اجرا کنید ، نمره شما باید به 64 برسد و نیاز کارگر خدمات از بین می رود.
یک مانیفست اضافه کنید
آخرین نیاز برای PWA داشتن یک پرونده مانیفست است. مانیفست یک فایل json است که برای تعیین نحوه ظاهر و رفتار برنامه در دستگاه ها استفاده می شود. به عنوان مثال ، می توانید جهت برنامه و رنگ تم را تنظیم کنید.
فایلی به نام manifest.json را در پوشه اصلی خود ذخیره کرده و محتوای زیر را اضافه کنید:
{
"name": "Hello World",
"short_name": "Hello",
"lang": "en-US",
"start_url": "/index.html",
"display": "standalone",
"background_color": "white",
"theme_color": "white"
}
در فایل مانیفست برای برنامه عنوان ، رنگ زمینه و زمینه آن را تعیین کرده و به مرورگر می گوییم که باید به آن به عنوان یک برنامه مستقل رفتار کند.
در ادامه فیلدهای آن را خط به خط مرور می کنیم:
name
عنوان برنامه این در هنگام درخواست کاربر برای نصب برنامه استفاده می شود. این باید عنوان کامل برنامه باشد.
short_name
نام کوتاه برای برنامه. این باید کوتاه و دقیق باشد.
lang
زبان پیش فرض برنامه به زبان محلی است. در مورد ما ، انگلیسی.
start_url
به مرورگر می گوید هنگام راه اندازی برنامه ، کدام صفحه بارگیری شود. این معمولا index.html خواهد بود اما نیازی به آن نیست.
display
نوع پوسته برنامه باید در آن نمایش داده شود. برای این برنامه ، ما به صورت مستقل از آن استفاده می کنیم تا مانند یک برنامه بومی استاندارد ظاهر و احساس شود. تنظیمات دیگری نیز برای ایجاد آن به حالت تمام صفحه یا شامل کروم مرورگر وجود دارد.
Background_color
رنگ پس زمینه که هنگام راه اندازی برنامه باز می شود.
theme_color
رنگ نوار ابزار و در تعویض کار را تنظیم می کند.
برای افزودن مانیفست به برنامه خود ، آن را در داخل برچسب head از فایل index.html مانند این پیوند دهید:
<head>
...
<link rel="manifest" href="/manifest.json">
...
</head>
شما همچنین باید با افزودن یک برچسب متا در داخل head ، رنگ تم را متناسب با مجموعه ای از مانیفست خود اعلام کنید:
<head>
...
<meta name="theme-color" content="white"/>
...
</head>
حالا اگر پیش نمایش برنامه را اجرا کرده و Lighthouse را اجرا کنید ، امتیاز باید به 73 برسد.
آیکن های برنامه
بعد از مرحله قبلی ، ممکن است متوجه شده باشید که Lighthouse در مورد از دست رفتن آیکون های برنامه شکایت دارد. اگرچه برای کار آفلاین برنامه کاملاً ضروری نیست ، اما به کاربران شما این امکان را می دهد تا برنامه را به صفحه اصلی خود اضافه کنند.
برای افزودن صحیح این ویژگی ، به نمادی از برنامه نیاز دارید که برای مرورگر ، ویندوز ، Mac / iPhone و Android اندازه شده باشد. حداقل 7 اندازه مختلف وجود دارد:
128×128 px ، 144×144 px ، 152×152 px ، 192×192 px ، 256×256 px ، 512x512px و 16x16px favicon. به جای ایجاد خود ، می توانید مواردی را که من برای این آموزش ایجاد کردم را دانلود کنید. آنها را در پوشه images ذخیره کرده و favicon.ico را در پوشه root پروژه قرار دهید.
پس از ویژگی short_name ، نمادها را به پرونده مانیفست(manifest.json) خود اضافه کنید:
{
"name": "Hello World",
"short_name": "Hello",
"icons": [{
"src": "images/hello-icon-128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "images/hello-icon-144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "images/hello-icon-152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "images/hello-icon-192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "images/hello-icon-256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "images/hello-icon-512.png",
"sizes": "512x512",
"type": "image/png"
}],
"lang": "en-US",
"start_url": "/index.html",
"display": "standalone",
"background_color": "white",
"theme_color": "white"
}
در آخر ، آنها را به index.html در برچسب head اضافه کنید:
<head>
...
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="images/hello-icon-152.png">
<meta name="theme-color" content="white"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Hello World">
<meta name="msapplication-TileImage" content="images/hello-icon-144.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
...
</head>
اگر همه چیز خوب پیش برود ، باید ببینید نمره Lighthouse شما تا 91 بالا می رود.
پایان
در این مرحله ، کدگذاری به پایان رسیده است و آخرین کاری که باید انجام دهید بارگذاری برنامه در وب سرور است. آخرین نیاز یک برنامه وب پیش رونده این است که باید از طریق https ارائه شود. راه اندازی یک وب سرور ایمن از این آموزش خارج است اما من آن را در آدرس زیر نصب کرده ام که می توانید اجرا کنید:
https://blog.webaca.ir/samples/hello-pwa/
همچنین می توانید کد منبع کامل این مثال را در لینک زیر دریافت کنید:
دانلود نمونه برنامه وب پیشرونده
امیدوارم از این آموزش لذت برده باشید و مفید واقع شده باشید. لطفا نظرات خود را در مورد نظرات زیر به من اطلاع دهید.