প্রগতিশীল ওয়েব অ্যাপস 02.0 বিকাশ করা: অফলাইন কুইকস্টার্ট

এই কোডল্যাবটি ডেভেলপিং প্রগ্রেসিভ ওয়েব অ্যাপস প্রশিক্ষণ কোর্সের অংশ, যা Google বিকাশকারী প্রশিক্ষণ দল দ্বারা তৈরি করা হয়েছে। আপনি যদি ক্রমানুসারে কোডল্যাবগুলির মাধ্যমে কাজ করেন তবে আপনি এই কোর্সের সর্বাধিক মূল্য পাবেন।

কোর্স সম্পর্কে সম্পূর্ণ বিশদ বিবরণের জন্য, ডেভেলপিং প্রগ্রেসিভ ওয়েব অ্যাপস ওভারভিউ দেখুন ।

দ্রষ্টব্য: এই কোর্সটি "কোডল্যাব" এবং "ল্যাব" শব্দগুলিকে বিনিময়যোগ্যভাবে ব্যবহার করে৷

ভূমিকা

এই ল্যাবে আপনি প্রগ্রেসিভ ওয়েব অ্যাপ (PWA) স্ট্যান্ডার্ডের জন্য একটি ওয়েবসাইট অডিট করতে লাইটহাউস ব্যবহার করবেন। আপনি পরিষেবা কর্মী API এর সাথে অফলাইন কার্যকারিতাও যোগ করবেন।

আপনি কি শিখবেন

• লাইটহাউস দিয়ে সাইটগুলি কীভাবে অডিট করবেন
• কীভাবে একটি অ্যাপ্লিকেশনে অফলাইন ক্ষমতা যুক্ত করবেন

আপনি কি জানতে হবে

• বেসিক HTML, CSS, এবং JavaScript
• ES2015 প্রতিশ্রুতির সাথে পরিচিতি

আপনি কি প্রয়োজন হবে

• টার্মিনাল/শেল অ্যাক্সেস সহ কম্পিউটার
• ইন্টারনেটের সাথে সংযোগ
• ক্রোম ব্রাউজার (বাতিঘর ব্যবহারের জন্য)
• একজন টেক্সট এডিটর
• ঐচ্ছিক: একটি Android ডিভাইসে Chrome

github থেকে pwa-training-labs সংগ্রহস্থল ডাউনলোড বা ক্লোন করুন এবং প্রয়োজনে Node.js-এর LTS সংস্করণ ইনস্টল করুন।

offline-quickstart-lab/app/ ডিরেক্টরিতে নেভিগেট করুন এবং একটি স্থানীয় ডেভেলপমেন্ট সার্ভার শুরু করুন:

cd offline-quickstart-lab/app
npm install
node server.js

আপনি যেকোন সময় Ctrl-c দিয়ে সার্ভার বন্ধ করতে পারেন।

আপনার ব্রাউজার খুলুন এবং localhost:8081/ । আপনার দেখতে হবে যে সাইটটি একটি সহজ এবং স্ট্যাটিক ওয়েব পেজ।

দ্রষ্টব্য: যেকোনো পরিষেবা কর্মীদের নিবন্ধনমুক্ত করুন এবং লোকালহোস্টের জন্য সমস্ত পরিষেবা কর্মী ক্যাশে সাফ করুন যাতে তারা ল্যাবে হস্তক্ষেপ না করে। Chrome DevTools-এ, আপনি অ্যাপ্লিকেশন ট্যাবের ক্লিয়ার স্টোরেজ বিভাগ থেকে সাইট ডেটা সাফ করুন ক্লিক করে এটি অর্জন করতে পারেন।

আপনার পছন্দের টেক্সট এডিটরে offline-quickstart-lab/app/ ফোল্ডারটি খুলুন। app/ ফোল্ডারটি হল যেখানে আপনি ল্যাব তৈরি করবেন।

এই ফোল্ডারে রয়েছে:

• images/ ফোল্ডারে নমুনা ছবি রয়েছে
• styles/main.css হল প্রধান স্টাইলশীট
• index.html হল আমাদের নমুনা সাইটের প্রধান HTML পৃষ্ঠা
• package-lock.json এবং package.json ট্র্যাক অ্যাপ নির্ভরতা (এই ক্ষেত্রে একমাত্র নির্ভরতা স্থানীয় উন্নয়ন সার্ভারের জন্য)
• server.js পরীক্ষার জন্য একটি স্থানীয় উন্নয়ন সার্ভার
• service-worker.js হল পরিষেবা কর্মী ফাইল (বর্তমানে খালি)

আমরা সাইটে পরিবর্তন করা শুরু করার আগে, কী উন্নত করা যেতে পারে তা দেখতে Lighthouse-এর সাথে অডিট করা যাক।

অ্যাপে ফিরে যান (Chrome-এ) এবং ডেভেলপার টুলের অডিট ট্যাব খুলুন। আপনি বাতিঘর আইকন এবং কনফিগারেশন বিকল্প দেখতে হবে. ডিভাইসের জন্য "মোবাইল" নির্বাচন করুন, সমস্ত অডিট নির্বাচন করুন, থ্রোটলিং বিকল্পগুলির মধ্যে একটি নির্বাচন করুন এবং সঞ্চয়স্থান সাফ করতে বেছে নিন:

অডিট চালান ক্লিক করুন। অডিট সম্পূর্ণ হতে কয়েক মুহূর্ত লাগে।

ব্যাখ্যা

অডিট সম্পূর্ণ হলে বিকাশকারী সরঞ্জামগুলিতে স্কোর সহ একটি প্রতিবেদন দেখতে হবে৷ এটির স্কোর দেখানো উচিত, এরকম কিছু (স্কোরগুলি ঠিক একই নাও হতে পারে):

দ্রষ্টব্য: বাতিঘর স্কোর একটি আনুমানিক এবং আপনার পরিবেশ দ্বারা প্রভাবিত হতে পারে (উদাহরণস্বরূপ, যদি আপনার কাছে প্রচুর পরিমাণে ব্রাউজার উইন্ডো খোলা থাকে)। আপনার স্কোর এখানে দেখানোর মতো ঠিক একই নাও হতে পারে।

এবং প্রগতিশীল ওয়েব অ্যাপ বিভাগটি এর মতো দেখতে হবে:

প্রতিবেদনটিতে পাঁচটি বিভাগে স্কোর এবং মেট্রিক্স রয়েছে:

• প্রগতিশীল ওয়েব অ্যাপ
• কর্মক্ষমতা
• অ্যাক্সেসযোগ্যতা
• সর্বোত্তম অনুশীলন
• এসইও

আপনি দেখতে পাচ্ছেন, প্রগ্রেসিভ ওয়েব অ্যাপ (PWA) বিভাগে আমাদের অ্যাপের স্কোর খারাপ। আমাদের স্কোর উন্নত করা যাক!

রিপোর্টের PWA বিভাগটি দেখার জন্য একটু সময় নিন এবং দেখুন কী নেই।

একটি সেবা কর্মী নিবন্ধন

প্রতিবেদনে তালিকাভুক্ত ব্যর্থতার মধ্যে একটি হল যে কোনও পরিষেবা কর্মী নিবন্ধিত নয়। আমাদের কাছে বর্তমানে app/service-worker.js এ একটি খালি সার্ভিস ওয়ার্কার ফাইল আছে।

ক্লোজিং </body> ট্যাগের ঠিক আগে, index.html এর নিচের স্ক্রিপ্টটি যোগ করুন:

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('service-worker.js')
      .then(reg => {
        console.log('Service worker registered! 😎', reg);
      })
      .catch(err => {
        console.log('😥 Service worker registration failed: ', err);
      });
  });
}
</script>

ব্যাখ্যা

পৃষ্ঠাটি লোড হয়ে গেলে এই কোডটি খালি service-worker.js পরিষেবা কর্মী ফাইল নিবন্ধন করে। তবে বর্তমান পরিষেবা কর্মী ফাইলটি খালি এবং কিছুই করবে না। পরবর্তী ধাপে সার্ভিস কোড যোগ করা যাক।

Precache সম্পদ

প্রতিবেদনে তালিকাভুক্ত আরেকটি ব্যর্থতা হল অ্যাপটি অফলাইনে থাকা অবস্থায় 200 স্ট্যাটাস কোড দিয়ে সাড়া দেয় না। এটি সমাধান করার জন্য আমাদের পরিষেবা কর্মীকে আপডেট করতে হবে।

পরিষেবা কর্মী ফাইলে নিম্নলিখিত কোড যোগ করুন ( service-worker.js ):

const cacheName = 'cache-v1';
const precacheResources = [
  '/',
  'index.html',
  'styles/main.css',
  'images/space1.jpg',
  'images/space2.jpg',
  'images/space3.jpg'
];

self.addEventListener('install', event => {
  console.log('Service worker install event!');
  event.waitUntil(
    caches.open(cacheName)
      .then(cache => {
        return cache.addAll(precacheResources);
      })
  );
});

self.addEventListener('activate', event => {
  console.log('Service worker activate event!');
});

self.addEventListener('fetch', event => {
  console.log('Fetch intercepted for:', event.request.url);
  event.respondWith(caches.match(event.request)
    .then(cachedResponse => {
        if (cachedResponse) {
          return cachedResponse;
        }
        return fetch(event.request);
      })
    );
});

এখন ব্রাউজারে ফিরে যান এবং সাইটটি রিফ্রেশ করুন। পরিষেবা কর্মী দেখতে কনসোল চেক করুন:

• নিবন্ধিত
• ইনস্টল করা
• সক্রিয়

দ্রষ্টব্য: আপনি যদি আগে থেকেই পরিষেবা কর্মীকে নিবন্ধিত করে থাকেন, বা সমস্ত ইভেন্টগুলিকে বরখাস্ত করতে সমস্যায় পড়েন, তবে কোনও পরিষেবা কর্মীদের নিবন্ধনমুক্ত করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন৷ এটি ব্যর্থ হলে, অ্যাপের সমস্ত দৃষ্টান্ত বন্ধ করুন এবং এটি পুনরায় খুলুন।

এরপরে, Ctrl + c চালিয়ে আপনার কমান্ড লাইনে স্থানীয় ডেভেলপমেন্ট সার্ভারটি বন্ধ করুন। সাইটটি আবার রিফ্রেশ করুন এবং সার্ভার অফলাইন থাকা সত্ত্বেও এটি লোড হচ্ছে তা পর্যবেক্ষণ করুন!

দ্রষ্টব্য: আপনি একটি কনসোল ত্রুটি দেখতে পাচ্ছেন যা নির্দেশ করে যে পরিষেবা কর্মীকে আনা যাবে না: An unknown error occurred when fetching the script. service-worker.js Failed to load resource: net::ERR_CONNECTION_REFUSED । এই ত্রুটিটি দেখানো হয়েছে কারণ ব্রাউজারটি পরিষেবা কর্মী স্ক্রিপ্টটি আনতে পারেনি (কারণ সাইটটি অফলাইন), কিন্তু এটি প্রত্যাশিত কারণ আমরা পরিষেবা কর্মীকে ক্যাশে ব্যবহার করতে পারি না৷ অন্যথায় ব্যবহারকারীর ব্রাউজার একই সেবা কর্মীর সাথে চিরতরে আটকে যেত!

ব্যাখ্যা

একবার পরিষেবা কর্মী index.html এ রেজিস্ট্রেশন স্ক্রিপ্ট দ্বারা নিবন্ধিত হলে, পরিষেবা কর্মী install ইভেন্টটি ঘটে। এই ইভেন্টের সময়, install ইভেন্ট লিসেনার একটি নামযুক্ত ক্যাশে খোলে এবং cache.addAll পদ্ধতিতে নির্দিষ্ট করা ফাইলগুলিকে ক্যাশ করে। এটিকে "প্রেক্যাচিং" বলা হয় কারণ এটি install ইভেন্টের সময় ঘটে, যা সাধারণত প্রথমবার একজন ব্যবহারকারী আপনার সাইট পরিদর্শন করে।

একটি পরিষেবা কর্মী ইনস্টল করার পরে, এবং যদি অন্য কোনও পরিষেবা কর্মী বর্তমানে পৃষ্ঠাটি নিয়ন্ত্রণ না করে, তবে নতুন পরিষেবা কর্মী "সক্রিয়" হয় ( activate ইভেন্ট লিসেনার পরিষেবা কর্মীতে ট্রিগার হয়) এবং এটি পৃষ্ঠাটিকে নিয়ন্ত্রণ করতে শুরু করে।

যখন একটি সক্রিয় পরিষেবা কর্মী নিয়ন্ত্রণ করে এমন একটি পৃষ্ঠা দ্বারা সংস্থানগুলির অনুরোধ করা হয়, তখন অনুরোধগুলি একটি নেটওয়ার্ক প্রক্সির মতো পরিষেবা কর্মীর মাধ্যমে যায়৷ প্রতিটি অনুরোধের জন্য একটি fetch ইভেন্ট ট্রিগার করা হয়৷ আমাদের পরিষেবা কর্মী, fetch ইভেন্ট শ্রোতা ক্যাশে অনুসন্ধান করে এবং যদি এটি উপলব্ধ থাকে তবে ক্যাশে করা সম্পদের সাথে প্রতিক্রিয়া জানায়৷ রিসোর্স ক্যাশে করা না থাকলে, রিসোর্সটি সাধারনভাবে অনুরোধ করা হয়।

ক্যাশিং সংস্থান নেটওয়ার্ক অনুরোধগুলি এড়িয়ে অ্যাপটিকে অফলাইনে কাজ করার অনুমতি দেয়৷ এখন আমাদের অ্যাপ অফলাইনে থাকাকালীন একটি 200 স্ট্যাটাস কোড দিয়ে প্রতিক্রিয়া জানাতে পারে!

দ্রষ্টব্য: সক্রিয় ইভেন্টটি এই উদাহরণে লগ ইন করা ছাড়াও অন্য কিছুর জন্য ব্যবহার করা হয় না। ইভেন্টটি পরিষেবা কর্মী লাইফসাইকেল সমস্যাগুলি ডিবাগ করতে সহায়তা করার জন্য অন্তর্ভুক্ত করা হয়েছিল।

ঐচ্ছিক : আপনি ক্যাশে স্টোরেজ বিভাগটি প্রসারিত করে বিকাশকারী সরঞ্জামগুলির অ্যাপ্লিকেশন ট্যাবে ক্যাশ করা সংস্থানগুলিও দেখতে পারেন:

node server.js দিয়ে ডেভেলপমেন্ট সার্ভার রিস্টার্ট করুন এবং সাইট রিফ্রেশ করুন। তারপরে বিকাশকারী সরঞ্জামগুলিতে অডিট ট্যাবটি আবার খুলুন এবং নতুন অডিট (উপরের বাম কোণে প্লাস চিহ্ন) নির্বাচন করে লাইটহাউস অডিটটি পুনরায় চালান। অডিট শেষ হলে, আপনি দেখতে পাবেন যে আমাদের PWA স্কোর উল্লেখযোগ্যভাবে ভালো, কিন্তু তারপরও উন্নত করা যেতে পারে আমরা নিম্নলিখিত বিভাগে আমাদের স্কোর উন্নত করতে থাকব।

দ্রষ্টব্য: এই বিভাগটি ঐচ্ছিক কারণ ওয়েব অ্যাপ ইনস্টল ব্যানার পরীক্ষা করা ল্যাবের সুযোগের বাইরে। আপনি দূরবর্তী ডিবাগিং ব্যবহার করে এটি আপনার নিজের চেষ্টা করতে পারেন।

আমাদের PWA স্কোর এখনও ভাল নয়। প্রতিবেদনে তালিকাভুক্ত কিছু অবশিষ্ট ব্যর্থতা হল যে ব্যবহারকারীকে আমাদের ওয়েব অ্যাপ ইনস্টল করার জন্য অনুরোধ করা হবে না এবং আমরা ঠিকানা বারে স্প্ল্যাশ স্ক্রিন বা ব্র্যান্ডের রঙগুলি কনফিগার করিনি৷ আমরা এই সমস্যাগুলি সমাধান করতে পারি এবং কিছু অতিরিক্ত মানদণ্ড সন্তুষ্ট করে হোম স্ক্রীনে যুক্ত করুন ক্রমান্বয়ে বাস্তবায়ন করতে পারি৷ সবচেয়ে গুরুত্বপূর্ণ, আমাদের একটি ম্যানিফেস্ট ফাইল তৈরি করতে হবে।

একটি ম্যানিফেস্ট ফাইল তৈরি করুন

manifest.json নামে app/ একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোড যোগ করুন:

{
  "name": "Space Missions",
  "short_name": "Space Missions",
  "lang": "en-US",
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": "#FF9800",
  "background_color": "#FF9800",
  "icons": [
    {
      "src": "images/touch/icon-128x128.png",
      "sizes": "128x128"
    },
    {
      "src": "images/touch/icon-192x192.png",
      "sizes": "192x192"
    },
    {
      "src": "images/touch/icon-256x256.png",
      "sizes": "256x256"
    },
    {
      "src": "images/touch/icon-384x384.png",
      "sizes": "384x384"
    },
    {
      "src": "images/touch/icon-512x512.png",
      "sizes": "512x512"
    }
  ]
}

ম্যানিফেস্টে উল্লেখ করা ছবিগুলি ইতিমধ্যেই অ্যাপে সরবরাহ করা হয়েছে৷

তারপর index.html এ <head> ট্যাগের নীচে নিম্নলিখিত HTML যোগ করুন:

<link rel="manifest" href="manifest.json">

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="Space Missions">
<meta name="apple-mobile-web-app-title" content="Space Missions">
<meta name="theme-color" content="#FF9800">
<meta name="msapplication-navbutton-color" content="#FF9800">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="/index.html">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="icon" sizes="128x128" href="/images/touch/icon-128x128.png">
<link rel="apple-touch-icon" sizes="128x128" href="/images/touch/icon-128x128.png">
<link rel="icon" sizes="192x192" href="icon-192x192.png">
<link rel="apple-touch-icon" sizes="192x192" href="/images/touch/icon-192x192.png">
<link rel="icon" sizes="256x256" href="/images/touch/icon-256x256.png">
<link rel="apple-touch-icon" sizes="256x256" href="/images/touch/icon-256x256.png">
<link rel="icon" sizes="384x384" href="/images/touch/icon-384x384.png">
<link rel="apple-touch-icon" sizes="384x384" href="/images/touch/icon-384x384.png">
<link rel="icon" sizes="512x512" href="/images/touch/icon-512x512.png">
<link rel="apple-touch-icon" sizes="512x512" href="/images/touch/icon-512x512.png">

সাইটে ফিরে যান। বিকাশকারী সরঞ্জামগুলির অ্যাপ্লিকেশন ট্যাবে, স্টোরেজ সাফ করুন বিভাগটি নির্বাচন করুন এবং সাইট ডেটা সাফ করুন ক্লিক করুন। তারপর পৃষ্ঠাটি রিফ্রেশ করুন। এখন ম্যানিফেস্ট বিভাগটি নির্বাচন করুন। আপনি manifest.json ফাইলে কনফিগার করা আইকন এবং কনফিগারেশন বিকল্পগুলি দেখতে পাবেন৷ আপনি যদি আপনার পরিবর্তনগুলি দেখতে না পান তবে একটি ছদ্মবেশী উইন্ডোতে সাইটটি খুলুন এবং আবার চেক করুন৷

ব্যাখ্যা

manifest.json ফাইল ব্রাউজারকে বলে যে কীভাবে আপনার অ্যাপের কিছু প্রগতিশীল দিক যেমন ব্রাউজার ক্রোম, হোম স্ক্রীন আইকন এবং স্প্ল্যাশ স্ক্রীনের স্টাইল এবং ফর্ম্যাট করতে হয়। এটি আপনার ওয়েব অ্যাপটিকে standalone মোডে খোলার জন্য কনফিগার করতেও ব্যবহার করা যেতে পারে, যেমন একটি নেটিভ অ্যাপ করে (অন্য কথায়, ব্রাউজারের বাইরে)।

এই লেখার সময় পর্যন্ত কিছু ব্রাউজারগুলির জন্য সমর্থন এখনও বিকাশাধীন, এবং <meta> ট্যাগগুলি নির্দিষ্ট ব্রাউজারগুলির জন্য এই বৈশিষ্ট্যগুলির একটি উপসেট কনফিগার করে যেগুলি এখনও সম্পূর্ণ সমর্থন নেই৷

আমাদের index.html এর পুরানো ক্যাশে করা সংস্করণটি সরানোর জন্য আমাদের সাইট ডেটা সাফ করতে হয়েছিল (যেহেতু সেই সংস্করণটিতে ম্যানিফেস্ট লিঙ্ক ছিল না)। অন্য লাইটহাউস অডিট চালানোর চেষ্টা করুন এবং দেখুন PWA স্কোর কতটা উন্নত হয়েছে!

ইনস্টল প্রম্পট সক্রিয় করা হচ্ছে

আমাদের অ্যাপ ইনস্টল করার পরবর্তী ধাপ হল ব্যবহারকারীদের ইনস্টল প্রম্পট দেখানো। Chrome 67 ব্যবহারকারীদের স্বয়ংক্রিয়ভাবে প্রম্পট করে, কিন্তু Chrome 68 থেকে শুরু করে , ব্যবহারকারীর অঙ্গভঙ্গির প্রতিক্রিয়া হিসাবে ইনস্টল প্রম্পটটি প্রোগ্রাম্যাটিকভাবে সক্রিয় করা উচিত।

নিম্নলিখিত কোড সহ index.html (শুধু <main> ট্যাগের পরে) শীর্ষে একটি "অ্যাপ ইনস্টল করুন" বোতাম এবং ব্যানার যোগ করুন:

<section id="installBanner" class="banner">
    <button id="installBtn">Install app</button>
</section>

তারপর styles/main.css এ নিম্নলিখিত শৈলী যোগ করে ব্যানারটি স্টাইল করুন:

.banner {
  align-content: center;
  display: none;
  justify-content: center;
  width: 100%;
}

ফাইলটি সংরক্ষণ করুন। অবশেষে, index.html এ নিম্নলিখিত স্ক্রিপ্ট ট্যাগ যোগ করুন:

  <script>
    let deferredPrompt;
    window.addEventListener('beforeinstallprompt', event => {

      // Prevent Chrome 67 and earlier from automatically showing the prompt
      event.preventDefault();

      // Stash the event so it can be triggered later.
      deferredPrompt = event;

      // Attach the install prompt to a user gesture
      document.querySelector('#installBtn').addEventListener('click', event => {

        // Show the prompt
        deferredPrompt.prompt();

        // Wait for the user to respond to the prompt
        deferredPrompt.userChoice
          .then((choiceResult) => {
            if (choiceResult.outcome === 'accepted') {
              console.log('User accepted the A2HS prompt');
            } else {
              console.log('User dismissed the A2HS prompt');
            }
            deferredPrompt = null;
          });
      });

      // Update UI notify the user they can add to home screen
      document.querySelector('#installBanner').style.display = 'flex';
    });
  </script>

ফাইলটি সংরক্ষণ করুন। দূরবর্তী ডিবাগিং ব্যবহার করে একটি Android ডিভাইসে Chrome-এ অ্যাপটি খুলুন। পৃষ্ঠা লোড হলে, আপনি "অ্যাপ ইনস্টল করুন" বোতামটি দেখতে পাবেন (আপনি এটি ডেস্কটপে দেখতে পাবেন না, তাই নিশ্চিত হন যে আপনি মোবাইলে পরীক্ষা করছেন)। বোতামটি ক্লিক করুন এবং হোম স্ক্রীনে যুক্ত করুন প্রম্পটটি পপ আপ হওয়া উচিত। আপনার ডিভাইসে অ্যাপটি ইনস্টল করার জন্য ধাপগুলি অনুসরণ করুন। ইনস্টলেশনের পরে, আপনি নতুন তৈরি হোম স্ক্রীন আইকনে আলতো চাপ দিয়ে স্বতন্ত্র মোডে (ব্রাউজারের বাইরে) ওয়েব অ্যাপ খুলতে সক্ষম হবেন।

ব্যাখ্যা

HTML এবং CSS কোড একটি লুকানো ব্যানার এবং বোতাম যোগ করে যা আমরা ব্যবহারকারীদের ইনস্টলেশন প্রম্পট সক্রিয় করার অনুমতি দিতে ব্যবহার করতে পারি।

একবার beforeinstallprompt ইভেন্ট ফায়ার হয়ে গেলে, আমরা ডিফল্ট অভিজ্ঞতা (যেটিতে Chrome 67 এবং তার আগের ব্যবহারকারীদের স্বয়ংক্রিয়ভাবে ইনস্টল করার জন্য অনুরোধ করে) প্রতিরোধ করি এবং গ্লোবাল deferredPrompt ভেরিয়েবলে beforeinstallevent ক্যাপচার করি। "অ্যাপ ইনস্টল করুন" বোতামটি পূর্বে beforeinstallevent prompt() পদ্ধতির সাথে প্রম্পটটি দেখানোর জন্য কনফিগার করা হয়। একবার ব্যবহারকারী একটি পছন্দ করে (ইনস্টল করা বা না) userChoice প্রতিশ্রুতি ব্যবহারকারীর পছন্দের সাথে সমাধান করে ( outcome )। অবশেষে, সবকিছু প্রস্তুত হয়ে গেলে আমরা ইনস্টল বোতামটি প্রদর্শন করি।

আপনি শিখেছেন কিভাবে লাইটহাউসের মাধ্যমে সাইট অডিট করতে হয় এবং কিভাবে অফলাইন কার্যকারিতার মূল বিষয়গুলো বাস্তবায়ন করতে হয়। আপনি যদি ঐচ্ছিক বিভাগগুলি সম্পূর্ণ করে থাকেন, তাহলে আপনি হোম স্ক্রিনে কীভাবে ওয়েব অ্যাপ ইনস্টল করতে হয় তাও শিখেছেন!

আরও সম্পদ

বাতিঘর ওপেন সোর্স! আপনি এটি কাঁটাচামচ করতে পারেন, আপনার নিজস্ব পরীক্ষা যোগ করতে পারেন এবং বাগ ফাইল করতে পারেন। বাতিঘর নির্মাণ প্রক্রিয়ার সাথে একীকরণের জন্য একটি কমান্ড লাইন টুল হিসাবে উপলব্ধ।

PWA প্রশিক্ষণ কোর্সের সমস্ত কোডল্যাব দেখতে, কোর্সের জন্য স্বাগতম কোডল্যাব দেখুন/