طراحی سایت گروه فناوران آرتین

طراحی و برنامه نویسی اپلیکیشن موبایل

ساخت وب اپلیکیشن (PWA) و پوش نوتیفیکیشن در ۵ دقیقه

ساخت وب اپلیکیشن (PWA) و پوش نوتیفیکیشن در ۵ دقیقه

یكی از مهمترین ویژگی های برنامه های پیشرونده وب (PWA) "پراگرسیو یا پیش رونده بودن" آن است. لازم نیست که همه ویژگیهای PWA را در نظر بگیرید تا سایت شما PWA در نظر گرفته شود. در عوض ، ایده این است که شما مراحل مختلفی را اجرا می کنید ، هر کدام برنامه خود را برای کاربران نهایی خود بهتر می کنند.

این پست یک فرض اساسی را ایجاد می کند. بسیاری از توسعه دهندگان در خارج وجود دارند که می خواهند برنامه های خود را به تدریج بهتر کنند ، اما آنها می خواهند این کار را در 5 دقیقه یا کمتر انجام دهند. و این همان چیزی است که این پست قصد دارد به شما نشان دهد.
اگر در حال ساخت وب هستید ، من مطمئن هستم که PWA آخرین "کلمه" است که به واژگان کاری شما اضافه شده است. جای تعجب نیست زیرا PWA آرزو نصب برنامه های وب بر روی تلفن را به واقعیت تبدیل کرده است.
ایجاد pwa واکنشگرا بنام hello-world
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My hello world page</title>
    <link rel="stylesheet" type="text/css" href="hello-world.css" media="all">
  </head>
  <body>
    <h1 class="vertical-container">Hello World</h1>
  </body>
</html>
از 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 خود جایگزین کنید.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#008000"/>
    <title>My hello world page</title>
    <link rel="stylesheet" type="text/css" href="hello-world.css" media="all">
  </head>
  <body>
    <h1 class="vertical-container">Hello World</h1>
    <script src="https://www.gstatic.com/firebasejs/4.4.0/firebase.js"></script>
    <script>
      // Initialize Firebase
      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);
    </script>
  </body>
</html>
درپروژه 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#008000"/>
    <title>My hello world page</title>
    <link rel="stylesheet" type="text/css" href="hello-world.css" media="all">
  </head>
  <body>
    <h1 class="vertical-container">Hello World</h1>
    <script src="https://www.gstatic.com/firebasejs/4.4.0/firebase.js"></script>
    <script>
      // Initialize Firebase
      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);
    </script>
    <script>
      if('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/sw.js')
          .then(function() {
                console.log('Service Worker Registered');
          });
      }
    </script>
  </body>
</html>

منابع 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 اضافه کنید
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#008000"/>
    <title>My hello world page</title>
    <link rel="stylesheet" type="text/css" href="hello-world.css" media="all">
    <link rel="manifest" href="manifest.json">
  </head>
  <body>
    <h1 class="vertical-container">Hello World</h1>
    <script src="https://www.gstatic.com/firebasejs/4.4.0/firebase.js"></script>
    <script>
      // Initialize Firebase
      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);
    </script>
    <script>
      if('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/sw.js')
          .then(function() {
                console.log('Service Worker Registered');
          });
      }
    </script>
  </body>
</html>
پوش نوتیفیکیشن را تنظیم کنید
درخواست اجازه کاربر را به index.html اضافه کنید:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#008000"/>
    <title>My hello world page</title>
    <link rel="stylesheet" type="text/css" href="hello-world.css" media="all">
    <link rel="manifest" href="manifest.json">
  </head>
  <body>
    <h1 class="vertical-container">Hello World</h1>
    <script src="https://www.gstatic.com/firebasejs/4.4.0/firebase.js"></script>
    <script>
      // Initialize Firebase
      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);
    </script>
    <script>
      if('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/sw.js')
          .then(function() {
                console.log('Service Worker Registered');
          });
      }
    </script>
    <script>
      const messaging = firebase.messaging();      messaging.requestPermission()
      .then(function() {
        console.log('Notification permission granted.');
        return messaging.getToken();
      })
      .then(function(token) {
        console.log(token);
      })
      .catch(function(err) {
        console.log('Unable to get permission to notify.', err);
      })
    </script>
  </body>
</html>
پوش نوتیفیکیشن فایل 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و اجرا کنید. این کامل نیست اما به تدریج بهبود یافته است:
 

نظرات کاربران

  • مهدی 09 دی 98

    عالی بود،لطفا فیلم اموزش هم قرار بدید. مقادیر پایین رو از کجا بگیرم؟؟ منظورم apikey ، authDomain ،databaseURL،projectId ، storageBucket ،messagingSenderId 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"

نوشتن نظر







نظرات اخیر
مهدی
عالی بود،لطفا فیلم اموزش هم قر...
تاریخ: 09 دی 98
برچسب ها

وبلاگ گروه آرتین

ارائه مطالب مفید و سودمند در زمینه طراحی سایت ، بازاریابی اینترنتی و بهینه سازی موتورهای جستجو (SEO)

تاثیر لینک سازی در افزایش رتبه سایت

تاثیر لینک سازی در افزایش رتبه سایت
  • 24 آذر 97

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

درباره گروه فناوران آرتین

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

نمونه کارها
خدمات گروه آرتین
طراحی سایت