طراحی اپلیکیشن مهم‌ترین خصوصیت های نرم‌افزار های پیشرونده اینترنت (PWA) \"پراگرسیو یا این که پیش رونده بودن\" آن میباشد. موردنیاز وجود ندارد که کلیه ویژگیهای PWA را در حیث بگیرید تا تارنما شما PWA در لحاظ گرفته گردد. در قبال ، ایده این میباشد که شما پروسه مختلفی را اعمال میکنید ، هرمورد نرم‌افزار خویش را برای یوزرها آخرین خویش بهتر می نمایند.
این پست یک فرض اصلی را ساخت‌و‌ساز می نماید. بخش اعظمی از بسط دهندگان در بیرون وجود دارا‌هستند که میخواهند نرم‌افزار های خویش را به ندرت بهتر نمایند ، ولی آنان میخواهند این فعالیت را در 5 دقیقه یا این که کمتر ایفا دهند. و این به عبارتی چیزی میباشد که‌این پست قصد دارااست به شما علامت دهد.
در شرایطی‌که در اکنون ایجاد کرد اینترنت می باشید ، اینجانب مطمئن هستم که PWA آخری \"واژه\" میباشد که به واژگان کاری شما اضافه گردیده‌است. مکان تعجب وجود ندارد چون PWA امید نصب اپلیکیشن های اینترنت بر روی تلفن را به حقیقت تبدیل نموده است.
ساخت و ساز pwa واکنشگرا بنام hello-world
Hello World
از hello-world.css به کار گیری فرمائید تا متن text-center باشد:
body {
background-color: #FF9800;
color: black;
}.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}h1.vertical-container {
font-size: 275%;
}
نوتیفیکیشن Firebase
پروژه Firebase را در کنسول Firebase ساخت‌و‌ساز فرمائید:
نکته قابل توجه: ما یحتاج میباشد تک تک جزئیات پروژه Firebase در کد مثال در سراسر این مقاله را در پروژه Firebase خویش جایگزین فرمایید.
Hello World
درپروژه Firebase در آغاز یقین نتایج فرمائید که node.js نصب گردیده‌است و آن‌گاه اعمال خواهد شد:
$ npm install -g firebase-tools$ firebase init # Generate a firebase.json (REQUIRED)
با هدایت Firebase ، پروژه خویش را گزینش فرمایید ، دایرکتوری همگانی را به src تغییر تحول دهید ، تحت عنوان اپلیکیشن تک کاغذ تنظیمات فرمائید ، و index.html را ویرایش نکنید.
پروژه Firebase را بومی فرمایید
$ firebase deploy
پروژه ی شما بایستی مانند تصویر تحت باشد:
اجرای Lighthouse:
اکستنشن Lighthouse را نصب فرمائید و در تارنما صاحب خانه اعمال نمایید:
نصب Service Worker :
اضافه کردن Service Worker به index.html
Hello World
منابع cache استاتیک
sw.js راایجاد کرده و index.html و hellow-world-pwa.css را به cache hello-world-page اضافه نمائید:
var cacheName = \'hello-world-page\';
var filesToCache = [
\'/\',
\'/index.html\',
\'/hello-world.css\'
];self.addEventListener(\'install\', function(e) {
console.log(\'[ServiceWorker] Install\');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log(\'[ServiceWorker] Caching app shell\');
return cache.addAll(filesToCache);
})
);
});self.addEventListener(\'activate\', event => {
event.waitUntil(self.clients.claim());
});self.addEventListener(\'fetch\', event => {
event.respondWith(
caches.match(event.request, {ignoreSearch:true}).then(response => {
return response || fetch(event.request);
})
);
});
آزمایش منابع کش گردیده
مجدداً deploy فرمائید ، Chrome DevTools را گشوده کرده و یاد کش را درتب Application محاسبه فرمایید:
ساخت‌و‌ساز آی
یک آی دراندازه های128128X ، 144x144 ، 152x152 ، 192x192 ، 512x512 ساخت‌و‌ساز کرده و ذخیره نمائید.
تولید :manifest.json
جهت مشاهده آی نرم افزار بصورت اسپلش و پیکربندی رنگ بکگراندو نشانی اینترنت-نرم افزار و.
manifest.json راایجاد نمایید
{
\"name\": \"Hello World PWA\",
\"short_name\": \"Hi\",
\"icons\": [{
\"src\": \"icons/icon-128x128.png\",
\"sizes\": \"128x128\",
\"type\": \"image/png\"
}, {
\"src\": \"icons/icon-144x144.png\",
\"sizes\": \"144x144\",
\"type\": \"image/png\"
}, {
\"src\": \"icons/icon-152x152.png\",
\"sizes\": \"152x152\",
\"type\": \"image/png\"
}, {
\"src\": \"icons/icon-192x192.png\",
\"sizes\": \"192x192\",
\"type\": \"image/png\"
},
{
\"src\": \"icons/icon-512x512.png\",
\"sizes\": \"512x512\",
\"type\": \"image/png\"
}
],
\"start_url\": \"/index.html\",
\"gcm_sender_id\": \"103953800507\",
\"display\": \"standalone\",
\"background_color\": \"#FF9800\",
\"theme_color\": \"#FF9800\"
}
بعد تگ پیوند manifest.json را در نصیب هدر index.html اضافه نمایید
Hello World
پوش نوتیفیکیشن را تهیه و تنظیم نمائید
درخواست اذن مخاطب را به index.html اضافه نمائید:
Hello World
پوش نوتیفیکیشن پوشه firebase-messaging-sw.js رااضافه نمائید:
importScripts(\'https://www.gstatic.com/firebasejs/4.4.0/firebase-app.js\');
importScripts(\'https://www.gstatic.com/firebasejs/4.4.0/firebase-messaging.js\');var config = {
apiKey: \"AIzaSyAXK4Orxl2CghIQvKiUPtkhEngSgzteqE0\",
authDomain: \"hello-world-pwa-8669c.firebaseapp.com\",
databaseURL: \"https://hello-world-pwa-8669c.firebaseio.com\",
projectId: \"hello-world-pwa-8669c\",
storageBucket: \"hello-world-pwa-8669c.appspot.com\",
messagingSenderId: \"660239288739\"
};
firebase.initializeApp(config);const messaging = firebase.messaging();messaging.setBackgroundMessageHandler(function(payload) {
const title = \'Hello World\';
const options = {
body: payload.data.body
};
return self.registration.showNotification(title, options);
});
آزمایش پوش نوتیفیکیشن
تهیه و تنظیم پوش نوتیفیکیشن با استعمال از Firebase Cloud Messaging:
１-کلید سرور پروژه Firebase خویش را بدست آورید (Stack Overflow):
２-روی آیکن پیکربندی / چرخ دنده کنار اسم پروژه خویش در بالای کنسول Firebase تازه کلیک فرمائید.
３-روی پیکربندی پروژه کلیک فرمائید.
４-روی تب Cloud Messaging کلیک نمائید.key را تحت کلیدسرور اسکن نمائید.
５-مجدد نرم‌افزار firebase را deploy نمایید
６-کنسول Chrome DevTools را گشوده فرمایید و token را در console log اسکن فرمایید.
７-پوش نوتیفیکیشن از خط دستور را آزمون فرمایید (YOUR_SERVER_KEY را با کلید نسخه برداری گردیده و DEVICE_REGISTRATION_TOKEN را با توکن اسکن گردیده جایگزین فرمایید)
curl -X POST -H \"Authorization: key=YOUR_SERVER_KEY\" -H \"Content-Type: application/json\" -d \'{
\"notification\": {
\"title\": \"Hello World PWA\",
\"body\": \"Hi\",
},
\"to\": \"DEVICE_REGISTRATION_TOKEN\"
}\' \"https://fcm.googleapis.com/fcm/send\"
مجدد Lighthouse را اعمال نمایید
مجدد Lighthouse را deployو اعمال فرمایید. این بی نقص وجود ندارد ولی به‌تدریج بهبود یافته میباشد:
بهترین رابط کاربری اندروید
چه گونه پباده سازی نرم‌افزار تلفن همراه ios را انجام دهیم؟
کلید طلایی طراحی نرم افزار موبایل
ساخت و ساز برنامه فروشگاهی اندروید
اپلیکیشن نویسی موبایل های هوشمند
مزایای پباده سازی برنامه موبایل
اشنایی با اپ های موبایل
,firebase ,hello ,} ,، ,pwa ,hello world , hello ,را در ,png , sizes ,justify content center ,align items center
درباره این سایت