vps

ساخت برنامه های وب پیشرونده با Angular

Progressive web apps برنامه های وب هستند که با فناوری هایی ساخته شده اند که باعث می شود آنها مانند برنامه های بومی (native) رفتار کنند. فواید برنامه های وب پیشرونده ، امکان کار یکنواخت در زمان غیرقابل اطمینان بودن پوشش شبکه است. همچنین بر خلاف برنامه های بومی ، نیازی به نصب نیست اما سریعتر از برنامه های وب معمولی هستند. در این مقاله شما می توانید یک برنامه وب پیشرونده را با Angular بسازید و آن را با Firebase مستقر کنید.
شروع
برای ساختن یک برنامه وب پیشرونده با Angular ، یک وب سایت کوچک در این آموزش ایجاد خواهید کرد. پس از اتمام کار ، از افزونه Lighthouse Chrome برای آزمایش پیشرفت برنامه خود استفاده می کنید. همچنین می توانید این پروژه را از GitHub کلون کنید.

ایجاد یک پروژه جدید Angular
برای ایجاد یک پروژه جدید Angular از طریق Angular CLI ، باید Angular CLI را روی دستگاه خود نصب کنید. اگر Angular CLI هنوز روی دستگاه شما نصب نشده است ، دستور زیر را برای نصب آن در سطح جهانی اجرا کنید:
⦁ $ npm install -g ⦁ @angular/cli

پس از نصب Angular CLI در سطح جهانی ، می توانید یک پروژه جدید را با آن ایجاد کنید. به طور پیش فرض Angular فایلهای آزمایشی تولید می کند که در این پروژه آموزشی استفاده ای ندارند. برای جلوگیری از این تولید ، می توانید فلگ –skip-tests را به دستور زیر اضافه کنید که یک پروژه جدید ایجاد می کند:
⦁ $ ng new ng-pwa –skip-tests

ایجاد مانیفست برنامه وب
مانیفست برنامه وب یک فایل JSON است که شامل پیکربندی میباشد که به یک برنامه وب امکان ذخیره در صفحه اصلی کاربر را می دهد. همچنین ظاهر و رفتار آن را هنگام راه اندازی از صفحه اصلی تعریف می کند. مانیفست برنامه وب یک نیاز اساسی برای برنامه های وب پیشرونده است اما می تواند در هر وب سایتی مورد استفاده قرار گیرد.
برای ایجاد یک مانیفست برنامه وب برای برنامه خود ، به پوشه src / بروید و فایلی با نام manifest.json را در ریشه پوشه ایجاد کنید. محتوای زیر را در فایل اضافه کنید:
src/manifest.json
{
“name”: “Angular Progressive Web App”,
“short_name”: “Ng-PWA”,
“start_url”: “./”,
“theme_color”: “#008080”,
“background_color”: “#008B8B”,
“display”: “standalone”,
“description”: “A PWA that is built with Angular”,
“icons”: [
{
“src”: “/assets/images/icons/icon-16×16.png”,
“sizes”: “16×16”,
“type”: “image/png”
},
{
“src”: “/assets/images/icons/icon-32×32.png”,
“sizes”: “32×32”,
“type”: “image/png”
},
{
“src”: “/assets/images/icons/icon-150×150.png”,
“sizes”: “150×150”,
“type”: “image/png”
},
{
“src”: “/assets/images/icons/icon-180×180.png”,
“sizes”: “180×180”,
“type”: “image/png”
},
{
“src”: “/assets/images/icons/icon-192×192.png”,
“sizes”: “192×192”,
“type”: “image/png”
},
{
“src”: “/assets/images/icons/icon-512×512.png”,
“sizes”: “512×512”,
“type”: “image/png”
}
]

}

در مانیفست برنامه وب ما ، نامی را که در صفحه هوم کاربران به آیکون برنامه ما پیوست خواهد شد و یک short_name که در صورت طولانی بودن آن جایگزین میشود را تعریف کردیم . همچنین صفحه فرود برنامه را هنگامی که از صفحه اصلی با start_url راه اندازی میشود ، مشخص کردیم. theme_color رنگی را که UI مرورگر هنگام بازدید از سایت ما مشاهده می کند را مشخص می نماید. ویژگی background_color رنگ پس زمینه ای را کنترل می کند که هنگام اجرای برنامه توسط کاربران از صفحه هوم آن ها، آیکون برنامه ما را نمایش میدهد . با display ، مشخص میکنید که وقتی کاربر از سایت شما بازدید می کند باید UI مرورگر پنهان شود یا خیر.
انتظار داریم کاربران با انواع مختلف دستگاه ها با اندازه صفحه های مختلف از سایت ما بازدید کنند ، بنابراین نیاز به ایجاد نسخه های تکراری از آیکون های برنامه خود در ابعاد مختلف داریم. realfavicongenerator.net می تواند به خودکارسازی این روند کمک کند.

پس از اتمام کار ، به فایل index.html بروید و موارد زیر را به بخش head اضافه کنید:
src/index.html

<link rel=”manifest” href=”/manifest.json”>
<meta name=”theme-color” content=”#008080″>

مانیفست برنامه وب به پوشه build اضافه نمی شود مگر اینکه ما به Angular دستورالعمل این کار را بدهیم. ما این کار را با اضافه کردن فایل manifest.json به آرایه دارایی ها در بخش apps فایل .angular-cli.json انجام خواهیم داد.
.angular-cli.json

“apps”: [
{

“assets”: [

“manifest.json”
],

اضافه کردن ارائه دهندگان خدمات
ارائه دهندگان خدمات پایه و اساس برنامه های وب پیشرونده هستند که در جاوا اسکریپت نوشته شده اند و به ذخیره کردن دارایی ها و فایل های مهم کمک می کنند ، این ویژگی به شما کمک می کند تا هنگامی که پوشش شبکه غیرقابل دسترسی یا غیرقابل اطمینان باشد ، عملکرد یک برنامه را حفظ کنید. ارائه دهندگان خدمات همچنین می توانند درخواست ها را رهگیری کنند و پاسخ های سرور مجازی را در میان موارد دیگر مدیریت کنند.
ما باید برنامه خود را قبل از وارد کردن آن به تولید ، با Webpack بسازیم و مسئول سرویس ما باید بتواند فایل های ساخت را ردیابی و ذخیره کند. با بسته npm sw-precache-webpack-plugin ، بسته را نصب می کنیم و آن را پیکربندی می کنیم. سپس می توانیم یک فرمان را اجرا کنیم که به صورت خودکار ارائه دهنده سرویس را در پوشه build ایجاد کند.
دستور نصب npm را برای نصب بسته اجرا کنید:
⦁ $ npm install –save-dev sw-precache-webpack-plugin

پس از نصب بسته ، به ریشه برنامه بروید و فایلی با نام precache-config.js ایجاد کنید. موارد زیر را در فایل اضافه کنید:
pre-cache.config.js
var SWPrecacheWebpackPlugin = require(‘sw-precache-webpack-plugin’);

module.exports = {
navigateFallback: ‘/index.html’,
navigateFallbackWhitelist: [],
stripePrefix: ‘dist’,
root: ‘dist/’,
plugins:[
new SWPrecacheWebpackPlugin({
cacheId: ‘ng-pwa’,
filename: ‘service-worker.js’,
staticFileGlobs: [
‘dist/index.html’,
‘dist/**.js’,
‘dist/**.css’
],

})
],
stripePrefix: ‘dist/assets’,
mergeStaticsConfig: true
};

فایل precache-config.js با استفاده از آبجکت های لفظی جفتهای مقدار کلیدی sw-precache-webpack-plugin را پیکربندی می کند.
Angular به عنوان یک چارچوب نرم افزار نهایی برای ایجاد برنامه های تک صفحه ای، از مسیریابی URL سمت کلاینت استفاده می کند و بنابراین می تواند URL های دلخواه تولید کند که توسط ارائه دهنده سرویس خودکار تولید شده، ذخیره نمی شود. در چنین شرایطی ما یک ورودی HTML را تعریف خواهیم کرد که URL درخواستی روی آن نگاشت شود و navigateFallback آن را مدیریت کند. ورودی HTML باید بتواند منابع مورد نظر را تأمین کند. از آنجا که برنامه ما SPA است ، و index.html نقطه ورود است – می تواند URL های دلخواه را اداره کند ، بنابراین باید در بین فایل هایی که برای ذخیره در آرایه staticFileGlobs انتخاب شده اند قرار بگیرد. navigateFallbackWhitelist می تواند خالی و یا حاوی یک regex باشد که نوع / الگوی URL را که برای استفاده از navigateFallback استفاده می شود ، تعریف کند.
برای درک عمیق تر از نحوه پیکربندی افزونه sw-precache-webpack ، مستندات آن را بخوانید.
برای به پایان رساندن راه اندازی ارائه دهنده سرویس ، یک اسکریپت / دستور سفارشی npm ایجاد خواهیم کرد که برای ساختن برنامه ما و تولید خودکار فایل ارائه دهنده سرویس در پوشه build استفاده خواهد شد. به فایل pack.json بروید و موارد زیر را به اسکریپت ها اضافه کنید:
package.json

“scripts”: {

“pwa”: “ng build –prod && sw-precache –root=dist –config=precache-config.js”
},

بررسی نما
از آنجا که تمرکز اصلی ما بر روند ساخت برنامه وب پیشرونده با Angular است، فقط یک نمای واحد داریم .
src/app/app.component.html
<div class=”container”>
<h1>
A Progressive Web App Built with Angular.
</h1>
<img width=”300″ src=”data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=” alt=”Angular logo”>

<h2>Get Started With Progressive Web Apps: </h2>
<ul>
<li>
<h4><a target=”_blank” rel=”noopener” href=”https://developers.google.com/web/fundamentals/primers/service-workers/”>Service Workers</a></h4>
</li>
<li>
<h4><a target=”_blank” rel=”noopener” href=”https://developers.google.com/web/fundamentals/web-app-manifest/”>Web App Manifest</a></h4>
</li>
<li>
<h4><a target=”_blank” rel=”noopener” href=”https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/”>Code Lab (PWA)</a></h4>
</li>
</ul>

</div>

اگر مشخصه target عنصر لنگرگاه به دلایل امنیتی و عملکردی روی _blank تنظیم شود ، ویژگی rel = “noopener” در برنامه های وب پیشرونده ضروری است:
در ادامه کد CSS آمده است:
src/styles.css
body{
background-color: teal;
}

.container{
text-align: center;
}

ul{
list-style: none;
}

h1, h2, a {
color: white;
}

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

برای شروع ، به firebase.google.com مراجعه کنید. اگر از قبل حساب کاربری ندارید ، یک حساب کاربری ایجاد کنید تا به کنسول دسترسی داشته باشید. از کنسول ، یک پروژه Firebase جدید ایجاد کنید.

پس از ایجاد یک پروژه Firebase جدید ، به ترمینال فرمان بروید و به پوشه برنامه وب پیشرونده خود بروید. npm install -g firebase-tools را برای نصب ابزارهای firebase در سطح جهانی اجرا کنید. بسته ابزارهای firebase به ما امکان می دهد برنامه های اجرایی و استقراری را از ترمینال فرمان آزمایش کنیم.
پس از اتمام نصب ، باید برنامه خود را برای آماده سازی جهت استقرار بسازیم. برای ساخت برنامه Angular و تولید خودکار ارائه دهنده سرویس، npm run pwa را اجرا کنید. این دستور اسکریپت سفارشی را که قبلاً ایجاد کردیم اجرا می کند و تولید برنامه ما را آماده می کند.

زمان معرفی Firebase به برنامه ما است. برای ورود به Firebase دستور firebase login را اجرا کنید. دستور firebase init را برای شروع اولیه Firebase در پروژه اجرا کنید. سپس به سؤالات به شرح زیر پاسخ دهید:
• آیا آماده ادامه کار هستید؟ (Y / n) = Y
• کدام ویژگی Firebase CLI را برای تنظیم این پوشه می خواهید؟ = میزبانی
• یک پروژه Firebase پیش فرض برای این فهرست انتخاب کنید = نام پروژه Firebase تان
• به عنوان دایرکتوری عمومی خود می خواهید از چه مواردی استفاده کنید؟ = dist
• به عنوان یک برنامه تک صفحه پیکربندی شود (همه آدرس ها به /index.html بازنویسی شوند) ؟ (y / N) = Y
• فایل dist / index.html از قبل موجود است. بازنویسی شود؟ (y / N) = N

برنامه ما آماده استقرار است. برای استقرار برنامه در Firebase ، firebase deploy را اجرا کنید.
در آخر ، firebase open hosting: site را اجرا کنید تا برنامه خود را ببینید.

تست با Lighthouse
Lighthouse یک افزونه کروم است که توسط گوگل ساخته شده است. می توان از آن علاوه بر سایر آزمایشات، برای تست میزان سازگاری یک برنامه وب پیشرونده با استاندارد برنامه پیشرونده وب استفاده کرد. بالاترین امتیاز 100٪ و امتیاز PWA برای این برنامه 91٪ است.

نتیجه
برنامه های وب پیشرونده تجربه ای مشابه برنامه های بومی را در اختیار کاربران قرار می دهند. با این حال ، PWA ها سبک تر و بسیار انعطاف پذیر هستند. Angular یک چارچوب محبوب نرم افزار نهایی است. در این مقاله شما یک برنامه وب پیشرونده با Angular ایجاد و از طریق Firebase مستقر کرده اید.

 

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکاخرید سرور مجازی ارزان هلندvpsخرید vps هلندخرید سرور مجازی آمریکاخرید vps فرانسهتست vpsسرور مجازی تستسرور مجازی ویندوزارزانترین vpsخرید وی پی اسvps ارزان – 


https://vpsgol.net/product/vps-germany/

https://vpsgol.net/product/vps-usa/

https://vpsgol.net/product/vps-france/

https://vpsgol.net/product/vps-canada/

https://vpsgol.net/product/vps-poland/

https://vpsgol.net/product/vps-netherlands/

https://vpsgol.net/product/vps-england/