আপনার প্রথম প্রগতিশীল ওয়েব অ্যাপ

শেষ আপডেট: 2019-04-30

কী একটি ওয়েব অ্যাপ, একটি প্রগতিশীল ওয়েব অ্যাপ তৈরি করে?

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

দ্রুত এবং নির্ভরযোগ্য

প্রতিটি ওয়েব অভিজ্ঞতা দ্রুত হতে হবে এবং এটি প্রগতিশীল ওয়েব অ্যাপের জন্য বিশেষভাবে সত্য। ফাস্ট বলতে স্ক্রিনে অর্থপূর্ণ বিষয়বস্তু পেতে এবং একটি ইন্টারেক্টিভ অভিজ্ঞতা প্রদান করতে যে সময় লাগে তাকে বোঝায়।

এবং, এটি নির্ভরযোগ্যভাবে দ্রুত হতে হবে। কতটা ভালো নির্ভরযোগ্য পারফরম্যান্স তা যথেষ্ট জোর দেওয়া কঠিন। এটিকে এভাবে ভাবুন: একটি নেটিভ অ্যাপের প্রথম লোড হতাশাজনক। এটি একটি অ্যাপ স্টোর এবং একটি বিশাল ডাউনলোড দ্বারা গেট করা হয়েছে, কিন্তু আপনি একবার যেখানে অ্যাপটি ইনস্টল করা হয়েছে সেখানে পৌঁছে গেলে, সেই আপ-ফ্রন্ট খরচ সমস্ত অ্যাপ স্টার্ট জুড়ে বর্জন করা হয় এবং সেগুলির কোনওটিরই পরিবর্তনশীল বিলম্ব হয় না। প্রতিটি অ্যাপ্লিকেশানের শুরু শেষের মতো দ্রুত, কোনো বৈচিত্র্য নেই৷ একটি প্রগতিশীল ওয়েব অ্যাপ অবশ্যই এই নির্ভরযোগ্য পারফরম্যান্স প্রদান করবে যা ব্যবহারকারীরা যে কোনো ইনস্টল করা অভিজ্ঞতা থেকে আশা করেন।

ইনস্টলযোগ্য

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

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

মোবাইল এবং ডেস্কটপ

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

আপনি কি নির্মাণ করবেন

এই কোডল্যাবে, আপনি PWA কৌশল ব্যবহার করে একটি আবহাওয়া ওয়েব অ্যাপ তৈরি করতে যাচ্ছেন। আপনার অ্যাপ হবে:

  • প্রতিক্রিয়াশীল ডিজাইন ব্যবহার করুন, তাই এটি ডেস্কটপ বা মোবাইলে কাজ করে।
  • কর্মক্ষমতা উন্নত করতে রানটাইমে আবহাওয়ার ডেটা ক্যাশে চালানোর জন্য প্রয়োজনীয় অ্যাপ রিসোর্স (এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, ইমেজ) প্রিক্যাচ করতে পরিষেবা কর্মী ব্যবহার করে দ্রুত হোন।
  • ইনস্টলযোগ্য হোন, একটি ওয়েব অ্যাপ ম্যানিফেস্ট ব্যবহার করে এবং ইন্সটল করার আগে ব্যবহারকারীকে জানাতে beforeinstallprompt ইভেন্ট ব্যবহার করুন।

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

  • কীভাবে একটি ওয়েব অ্যাপ ম্যানিফেস্ট তৈরি এবং যুক্ত করবেন
  • কিভাবে একটি সহজ অফলাইন অভিজ্ঞতা প্রদান করবেন
  • কিভাবে একটি সম্পূর্ণ অফলাইন অভিজ্ঞতা প্রদান করবেন
  • কিভাবে আপনার অ্যাপ ইন্সটলযোগ্য করবেন

এই কোডল্যাবটি প্রগতিশীল ওয়েব অ্যাপের উপর দৃষ্টি নিবদ্ধ করে। অ-প্রাসঙ্গিক ধারণা এবং কোড ব্লকগুলিকে চকচকে করা হয়েছে এবং আপনাকে কেবল অনুলিপি এবং পেস্ট করার জন্য সরবরাহ করা হয়েছে।

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

  • Chrome এর একটি সাম্প্রতিক সংস্করণ (74 বা তার পরে)। PWA গুলি সব ব্রাউজারে কাজ করে, কিন্তু আমরা ব্রাউজার স্তরে কী ঘটছে তা আরও ভালভাবে বোঝার জন্য Chrome DevTools-এর কয়েকটি বৈশিষ্ট্য ব্যবহার করব এবং ইনস্টল অভিজ্ঞতা পরীক্ষা করতে এটি ব্যবহার করব৷
  • HTML, CSS, JavaScript এবং Chrome DevTools এর জ্ঞান।

ডার্ক স্কাই API এর জন্য একটি কী পান

আমাদের আবহাওয়ার ডেটা ডার্ক স্কাই API থেকে আসে। এটি ব্যবহার করার জন্য, আপনাকে একটি API কী অনুরোধ করতে হবে। এটি ব্যবহার করা সহজ এবং অ-বাণিজ্যিক প্রকল্পের জন্য বিনামূল্যে।

API কী-এর জন্য নিবন্ধন করুন

আপনার API কী সঠিকভাবে কাজ করছে তা যাচাই করুন

আপনার API কী সঠিকভাবে কাজ করছে কিনা তা পরীক্ষা করতে, DarkSky API-এ একটি HTTP অনুরোধ করুন। আপনার API কী দিয়ে DARKSKY_API_KEY প্রতিস্থাপন করতে নীচের URLটি আপডেট করুন৷ সবকিছু কাজ করলে, আপনার নিউ ইয়র্ক সিটির সর্বশেষ আবহাওয়ার পূর্বাভাস দেখা উচিত।

https://api.darksky.net/forecast/DARKSKY_API_KEY/40.7720232,-73.9732319

কোড পান

এই প্রজেক্টের জন্য আপনার যা যা প্রয়োজন আমরা তা একটি গিট রেপোতে রেখেছি। শুরু করার জন্য, আপনাকে কোডটি ধরতে হবে এবং আপনার প্রিয় ডেভ পরিবেশে এটি খুলতে হবে। এই কোডল্যাবের জন্য, আমরা গ্লিচ ব্যবহার করার পরামর্শ দিই।

দৃঢ়ভাবে প্রস্তাবিত: রেপো আমদানি করতে গ্লিচ ব্যবহার করুন

এই কোডল্যাবের মাধ্যমে কাজ করার জন্য গ্লিচ ব্যবহার করা হল প্রস্তাবিত পদ্ধতি।

  1. একটি নতুন ব্রাউজার ট্যাব খুলুন এবং https://glitch.com এ যান।
  2. আপনার যদি অ্যাকাউন্ট না থাকে, তাহলে আপনাকে সাইন আপ করতে হবে।
  3. নতুন প্রকল্পে ক্লিক করুন, তারপর গিট রেপো থেকে ক্লোন করুন।
  4. https://github.com/googlecodelabs/your-first-pwapp.git ক্লোন করুন এবং ঠিক আছে ক্লিক করুন।
  5. রেপো লোড হয়ে গেলে, .env ফাইলটি সম্পাদনা করুন এবং আপনার DarkSky API কী দিয়ে আপডেট করুন।
  6. শো বোতামে ক্লিক করুন, তারপরে PWA কার্যকর দেখতে একটি নতুন উইন্ডোতে নির্বাচন করুন।

বিকল্প: কোড ডাউনলোড করুন এবং স্থানীয়ভাবে কাজ করুন

আপনি যদি কোডটি ডাউনলোড করতে এবং স্থানীয়ভাবে কাজ করতে চান, তাহলে আপনার Node.js এর একটি সাম্প্রতিক সংস্করণ এবং একটি কোড এডিটর সেটআপ থাকতে হবে এবং যেতে হবে।

সোর্স কোড ডাউনলোড করুন

  1. ডাউনলোড করা জিপ ফাইলটি আনপ্যাক করুন।
  2. সার্ভার চালানোর জন্য প্রয়োজনীয় নির্ভরতা ইনস্টল করতে npm install চালান।
  3. server.js সম্পাদনা করুন এবং আপনার server.js API কী সেট করুন।
  4. পোর্ট 8000 এ সার্ভার চালু করতে node server.js চালান।
  5. http://localhost:8000- এ একটি ব্রাউজার ট্যাব খুলুন

আমাদের শুরু বিন্দু কি?

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

চেষ্টা করার জন্য কিছু জিনিস...

  1. নীচে ডান কোণায় নীল + বোতাম সহ একটি নতুন শহর যোগ করুন।
  2. উপরের ডান কোণায় রিফ্রেশ বোতাম দিয়ে ডেটা রিফ্রেশ করুন।
  3. প্রতিটি সিটি কার্ডের উপরের ডানদিকে x ব্যবহার করে একটি শহর মুছুন।
  4. Chrome DevTools-এ টগল ডিভাইস টুলবার ব্যবহার করে, দেখুন কিভাবে এটি ডেস্কটপ এবং মোবাইলে কাজ করে।
  5. Chrome DevTools-এ নেটওয়ার্ক প্যানেল ব্যবহার করে, আপনি অফলাইনে গেলে কী হয় তা দেখুন।
  6. Chrome DevTools-এ নেটওয়ার্ক প্যানেল ব্যবহার করে, নেটওয়ার্কটি স্লো 3G-তে থ্রোটল হলে কী হয় তা দেখুন৷
  7. server.js এ FORECAST_DELAY এর মান পরিবর্তন করে পূর্বাভাস সার্ভারে বিলম্ব যোগ করুন

বাতিঘর দিয়ে নিরীক্ষা

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

আমরা আমাদের আবহাওয়া অ্যাপের অডিট করতে এবং আমাদের করা পরিবর্তনগুলি যাচাই করতে Lighthouse ব্যবহার করব।

এর বাতিঘর চালানো যাক

  1. একটি নতুন ট্যাবে আপনার প্রকল্প খুলুন.
  2. Chrome DevTools খুলুন এবং অডিট প্যানেলে স্যুইচ করুন। সব ধরনের অডিট চালু রাখুন।
  3. অডিট চালান ক্লিক করুন। কিছু সময় পরে, বাতিঘর আপনাকে পৃষ্ঠায় একটি প্রতিবেদন দেয়।

প্রগতিশীল ওয়েব অ্যাপ অডিট

আমরা প্রগতিশীল ওয়েব অ্যাপ অডিটের ফলাফলের উপর ফোকাস করতে যাচ্ছি।

এবং ফোকাস করার জন্য অনেক লাল আছে:

  • ❗ ব্যর্থ: অফলাইনে থাকা অবস্থায় বর্তমান পৃষ্ঠা 200 দিয়ে সাড়া দেয় না।
  • ❗ফেইলড: অফলাইনে থাকা অবস্থায় start_url 200 দিয়ে সাড়া দেয় না।
  • ❗বিফল: পৃষ্ঠা এবং start_url.
  • ❗ ব্যর্থ: ওয়েব অ্যাপ ম্যানিফেস্ট ইনস্টল করার প্রয়োজনীয়তা পূরণ করে না।
  • ❗ ব্যর্থ: একটি কাস্টম স্প্ল্যাশ স্ক্রীনের জন্য কনফিগার করা হয়নি।
  • ❗ ব্যর্থ: ঠিকানা-বার থিমের রঙ সেট করে না।

আসুন ঝাঁপিয়ে পড়ি এবং এই সমস্যাগুলির কিছু সমাধান করা শুরু করি!

এই বিভাগের শেষ নাগাদ, আমাদের আবহাওয়া অ্যাপ নিম্নলিখিত অডিটগুলি পাস করবে:

  • ওয়েব অ্যাপ ম্যানিফেস্ট ইনস্টল করার প্রয়োজনীয়তা পূরণ করে না।
  • একটি কাস্টম স্প্ল্যাশ স্ক্রিনের জন্য কনফিগার করা নেই৷
  • ঠিকানা-বার থিমের রঙ সেট করে না।

ওয়েব অ্যাপ ম্যানিফেস্ট তৈরি করুন

ওয়েব অ্যাপ ম্যানিফেস্ট হল একটি সাধারণ JSON ফাইল যা আপনাকে, ডেভেলপারকে, ব্যবহারকারীর কাছে আপনার অ্যাপটি কীভাবে দেখাবে তা নিয়ন্ত্রণ করার ক্ষমতা দেয়।

ওয়েব অ্যাপ ম্যানিফেস্ট ব্যবহার করে, আপনার ওয়েব অ্যাপ করতে পারে:

  • ব্রাউজারকে বলুন যে আপনি আপনার অ্যাপটি একটি স্বতন্ত্র উইন্ডোতে খুলতে চান ( display )।
  • অ্যাপটি প্রথম চালু হলে কোন পৃষ্ঠাটি খোলা হবে তা নির্ধারণ করুন ( start_url )।
  • ডক বা অ্যাপ লঞ্চারে অ্যাপটি কেমন হওয়া উচিত তা সংজ্ঞায়িত করুন ( short_name , icons )।
  • একটি স্প্ল্যাশ স্ক্রিন তৈরি করুন ( name , icons , colors )।
  • ব্রাউজারকে ল্যান্ডস্কেপ বা পোর্ট্রেট মোডে উইন্ডো খুলতে বলুন ( orientation )।
  • এবং আরও অনেক কিছু ।

আপনার প্রকল্পে public/manifest.json নামে একটি ফাইল তৈরি করুন। নিম্নলিখিত বিষয়বস্তু অনুলিপি এবং পেস্ট করুন:

public/manifest.json

{
  "name": "Weather",
  "short_name": "Weather",
  "icons": [{
    "src": "/images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

ম্যানিফেস্ট আইকনগুলির একটি অ্যারে সমর্থন করে, বিভিন্ন স্ক্রীন আকারের জন্য উদ্দিষ্ট৷ এই কোডল্যাবের জন্য, আমরা iOS ইন্টিগ্রেশনের জন্য আরও কয়েকটি অন্তর্ভুক্ত করেছি।

এরপরে, আমাদের অ্যাপের প্রতিটি পৃষ্ঠায় একটি <link rel="manifest"... যোগ করে আমাদের ম্যানিফেস্ট সম্পর্কে ব্রাউজারকে বলতে হবে। আপনার index.html ফাইলের <head> উপাদানে নিম্নলিখিত লাইনটি যোগ করুন।

public/index.html

<!-- CODELAB: Add link rel manifest -->
<link rel="manifest" href="/manifest.json">

DevTools চক্কর

DevTools আপনার manifest.json ফাইল চেক করার একটি দ্রুত, সহজ উপায় প্রদান করে৷ অ্যাপ্লিকেশন প্যানেলে ম্যানিফেস্ট প্যানটি খুলুন। আপনি সঠিকভাবে ম্যানিফেস্ট তথ্য যোগ করে থাকলে, আপনি এই ফলকে এটিকে পার্স করা এবং মানব-বান্ধব বিন্যাসে প্রদর্শিত দেখতে সক্ষম হবেন।

iOS মেটা ট্যাগ এবং আইকন যোগ করুন

iOS-এ Safari ওয়েব অ্যাপ ম্যানিফেস্ট সমর্থন করে না ( এখনও ), তাই আপনাকে আপনার index.html ফাইলের <head> -এ প্রথাগত meta ট্যাগ যোগ করতে হবে:

public/index.html

<!-- CODELAB: Add iOS meta tags and icons -->
<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="Weather PWA">
<link rel="apple-touch-icon" href="/images/icons/icon-152x152.png">

বোনাস: সহজ বাতিঘর সংশোধন

আমাদের লাইটহাউস অডিট আরও কয়েকটি জিনিসকে ডেকেছে যেগুলি ঠিক করা বেশ সহজ, তাই আসুন আমরা এখানে থাকাকালীন সেগুলির যত্ন নিই৷

মেটা বিবরণ সেট করুন

এসইও অডিটের অধীনে, লাইটহাউস আমাদের উল্লেখ করেছে " নথিতে কোনো মেটা বিবরণ নেই৷ " বর্ণনাগুলি Google অনুসন্ধান ফলাফলে প্রদর্শিত হতে পারে৷ উচ্চ-মানের, অনন্য বর্ণনা আপনার ফলাফলগুলিকে সার্চ ব্যবহারকারীদের কাছে আরও প্রাসঙ্গিক করে তুলতে পারে এবং আপনার সার্চ ট্রাফিক বাড়াতে পারে৷

একটি বিবরণ যোগ করতে, আপনার নথির <head> এ নিম্নলিখিত meta ট্যাগ যোগ করুন:

public/index.html

<!-- CODELAB: Add description here -->
<meta name="description" content="A sample weather app">

ঠিকানা বার থিম রঙ সেট করুন

পিডব্লিউএ অডিটে, লাইটহাউস আমাদের অ্যাপটি উল্লেখ করেছে " ঠিকানা-বারের থিমের রঙ সেট করে না "। আপনার ব্র্যান্ডের রঙের সাথে মেলে ব্রাউজারের অ্যাড্রেস বারে থিমিং করা আরও নিমগ্ন ব্যবহারকারীর অভিজ্ঞতা প্রদান করে।

মোবাইলে থিমের রঙ সেট করতে, আপনার নথির <head> -এ নিম্নলিখিত meta ট্যাগ যোগ করুন:

public/index.html

<!-- CODELAB: Add meta theme-color -->
<meta name="theme-color" content="#2F3BA2" />

Lighthouse সঙ্গে পরিবর্তন যাচাই করুন

আবার লাইটহাউস চালান (অডিট ফলকের উপরের বাম কোণে + চিহ্নে ক্লিক করে) এবং আপনার পরিবর্তনগুলি যাচাই করুন।

এসইও অডিট

  • ✅ পাস হয়েছে: নথিতে একটি মেটা বিবরণ রয়েছে।

প্রগতিশীল ওয়েব অ্যাপ অডিট

  • ❗ ব্যর্থ: অফলাইনে থাকা অবস্থায় বর্তমান পৃষ্ঠা 200 দিয়ে সাড়া দেয় না।
  • ❗ফেইলড: অফলাইনে থাকা অবস্থায় start_url 200 দিয়ে সাড়া দেয় না।
  • ❗বিফল: পৃষ্ঠা এবং start_url.
  • ✅ পাস হয়েছে: ওয়েব অ্যাপ ম্যানিফেস্ট ইনস্টল করার প্রয়োজনীয়তা পূরণ করে।
  • ✅ পাস: একটি কাস্টম স্প্ল্যাশ স্ক্রিনের জন্য কনফিগার করা হয়েছে।
  • ✅ পাস: একটি ঠিকানা-বারের থিমের রঙ সেট করে।

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

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

  • অফলাইনে থাকা অবস্থায় বর্তমান পৃষ্ঠা 200 দিয়ে সাড়া দেয় না।
  • start_url অফলাইনে 200 দিয়ে সাড়া দেয় না।
  • পৃষ্ঠা এবং start_url.

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

উদ্ধারকর্মীরা

আপনি যদি পরিষেবা কর্মীদের সাথে অপরিচিত হন, তাহলে আপনি পরিষেবা কর্মীদের পরিচিতি পড়ার মাধ্যমে তারা কী করতে পারেন, তাদের জীবনচক্র কীভাবে কাজ করে এবং আরও অনেক কিছু সম্পর্কে প্রাথমিক ধারণা পেতে পারেন৷

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

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

প্রথম ধাপ হল পরিষেবা কর্মী নিবন্ধন করা। আপনার index.html ফাইলে নিম্নলিখিত কোড যোগ করুন:

public/index.html

// CODELAB: Register service worker.
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
        .then((reg) => {
          console.log('Service worker registered.', reg);
        });
  });
}

এই কোডটি চেক করে যে সার্ভিস ওয়ার্কার এপিআই পাওয়া যায় কিনা, এবং যদি এটি থাকে, তাহলে পৃষ্ঠাটি লোড হয়ে গেলে /service-worker.js এ পরিষেবা কর্মী নিবন্ধিত হয়।

দ্রষ্টব্য, পরিষেবা কর্মীকে রুট ডিরেক্টরি থেকে পরিবেশন করা হয়, একটি /scripts/ ডিরেক্টরি থেকে নয়। এটি আপনার পরিষেবা কর্মীর scope সেট করার সবচেয়ে সহজ উপায়। পরিষেবা কর্মীর scope নির্ধারণ করে যে পরিষেবা কর্মী কোন ফাইলগুলি নিয়ন্ত্রণ করেন, অন্য কথায়, পরিষেবা কর্মী কোন পথ থেকে অনুরোধগুলিকে আটকাবেন৷ ডিফল্ট scope হল পরিষেবা কর্মী ফাইলের অবস্থান, এবং নীচের সমস্ত ডিরেক্টরিতে প্রসারিত। সুতরাং যদি service-worker.js রুট ডিরেক্টরিতে অবস্থিত থাকে তবে পরিষেবা কর্মী এই ডোমেনের সমস্ত ওয়েব পৃষ্ঠা থেকে অনুরোধগুলি নিয়ন্ত্রণ করবে৷

প্রিক্যাশে অফলাইন পৃষ্ঠা

প্রথমে, আমাদের পরিষেবা কর্মীকে বলতে হবে কী ক্যাশে করতে হবে। আমরা ইতিমধ্যেই একটি সাধারণ অফলাইন পৃষ্ঠা তৈরি করেছি ( public/offline.html ) যা আমরা যেকোনো সময় নেটওয়ার্ক সংযোগ না থাকলে প্রদর্শন করব৷

আপনার service-worker.js এ, FILES_TO_CACHE অ্যারেতে '/offline.html', যোগ করুন, চূড়ান্ত ফলাফলটি দেখতে এইরকম হওয়া উচিত:

public/service-worker.js

// CODELAB: Add list of files to cache here.
const FILES_TO_CACHE = [
  '/offline.html',
];

এর পরে, পরিষেবা কর্মীকে অফলাইন পৃষ্ঠাটি প্রি-ক্যাশে করতে বলার জন্য আমাদের install ইভেন্টে নিম্নলিখিত কোড যোগ করতে হবে:

public/service-worker.js

// CODELAB: Precache static resources here.
evt.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log('[ServiceWorker] Pre-caching offline page');
      return cache.addAll(FILES_TO_CACHE);
    })
);

আমাদের install ইভেন্ট এখন caches.open() দিয়ে ক্যাশে খোলে এবং একটি ক্যাশে নাম প্রদান করে। একটি ক্যাশের নাম প্রদান করা আমাদের ফাইল সংস্করণ করতে দেয়, বা ক্যাশে করা সংস্থানগুলি থেকে ডেটা আলাদা করতে দেয় যাতে আমরা সহজেই একটি আপডেট করতে পারি তবে অন্যটিকে প্রভাবিত করতে পারি না।

একবার ক্যাশে খোলা হলে, আমরা cache.addAll() কল করতে পারি, যা ইউআরএলগুলির একটি তালিকা নেয়, সেগুলিকে সার্ভার থেকে নিয়ে আসে এবং ক্যাশে প্রতিক্রিয়া যোগ করে৷ মনে রাখবেন যে cache.addAll() ব্যর্থ হয় যদি কোনো পৃথক অনুরোধ ব্যর্থ হয়। এর মানে আপনি নিশ্চিত যে, যদি ইনস্টল পদক্ষেপ সফল হয়, আপনার ক্যাশে একটি সামঞ্জস্যপূর্ণ অবস্থায় থাকবে। কিন্তু, যদি এটি কোনো কারণে ব্যর্থ হয়, পরের বার যখন পরিষেবা কর্মী শুরু হবে তখন এটি স্বয়ংক্রিয়ভাবে আবার চেষ্টা করবে।

DevTools চক্কর

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

আপনি যখন এইরকম একটি ফাঁকা পৃষ্ঠা দেখতে পান, তখন এর মানে হল যে বর্তমানে খোলা পৃষ্ঠাটিতে কোনও নিবন্ধিত পরিষেবা কর্মী নেই।

এখন, আপনার পৃষ্ঠা পুনরায় লোড করুন. পরিষেবা কর্মী ফলকটি এখন এইরকম হওয়া উচিত:

আপনি যখন এই ধরনের তথ্য দেখতে পান, এর অর্থ হল পৃষ্ঠাটিতে একজন পরিষেবা কর্মী চলছে৷

স্ট্যাটাস লেবেলের পাশে, একটি নম্বর আছে ( এই ক্ষেত্রে 34251 )। আপনি যখন পরিষেবা কর্মীদের সাথে কাজ করছেন সেই নম্বরে নজর রাখুন৷ আপনার পরিষেবা কর্মী আপডেট করা হয়েছে কিনা তা বলার এটি একটি সহজ উপায়৷

পুরানো অফলাইন পৃষ্ঠাগুলি পরিষ্কার করুন

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

আপনার activate ইভেন্টে নিম্নলিখিত কোড যোগ করুন:

public/service-worker.js

// CODELAB: Remove previous cached data from disk.
evt.waitUntil(
    caches.keys().then((keyList) => {
      return Promise.all(keyList.map((key) => {
        if (key !== CACHE_NAME) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
);

DevTools চক্কর

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

আপডেট করা পরিষেবা কর্মী অবিলম্বে নিয়ন্ত্রণ নেয় কারণ আমাদের install ইভেন্টটি self.skipWaiting() দিয়ে শেষ হয় এবং activate ইভেন্ট self.clients.claim() দিয়ে শেষ হয়৷ এগুলি ছাড়া, পুরোনো পরিষেবা কর্মী পৃষ্ঠাটি নিয়ন্ত্রণ করতে থাকবে যতক্ষণ না পৃষ্ঠাটিতে একটি ট্যাব খোলা থাকবে।

ব্যর্থ নেটওয়ার্ক অনুরোধগুলি পরিচালনা করুন৷

এবং অবশেষে, আমাদের fetch ইভেন্টগুলি পরিচালনা করতে হবে। আমরা ক্যাশে কৌশলে ফিরে আসা একটি নেটওয়ার্ক ব্যবহার করতে যাচ্ছি। পরিষেবা কর্মী প্রথমে নেটওয়ার্ক থেকে সম্পদ আনার চেষ্টা করে। যদি এটি ব্যর্থ হয়, পরিষেবা কর্মী ক্যাশে থেকে অফলাইন পৃষ্ঠাটি ফেরত দেয়।

public/service-worker.js

// CODELAB: Add fetch event handler here.
if (evt.request.mode !== 'navigate') {
  // Not a page navigation, bail.
  return;
}
evt.respondWith(
    fetch(evt.request)
        .catch(() => {
          return caches.open(CACHE_NAME)
              .then((cache) => {
                return cache.match('offline.html');
              });
        })
);

fetch হ্যান্ডলারকে শুধুমাত্র পৃষ্ঠা নেভিগেশন পরিচালনা করতে হবে, তাই অন্যান্য অনুরোধগুলি হ্যান্ডলার থেকে ডাম্প করা যেতে পারে এবং ব্রাউজার দ্বারা সাধারণভাবে মোকাবেলা করা যেতে পারে। কিন্তু, যদি অনুরোধ .mode navigate হয়, নেটওয়ার্ক থেকে আইটেমটি পেতে চেষ্টা করতে fetch ব্যবহার করুন। যদি এটি ব্যর্থ হয়, catch হ্যান্ডলার caches.open(CACHE_NAME) দিয়ে ক্যাশে খোলে এবং প্রিক্যাচড অফলাইন পৃষ্ঠা পেতে cache.match('offline.html') ব্যবহার করে। ফলাফল তারপর evt.respondWith() ব্যবহার করে ব্রাউজারে ফেরত পাঠানো হয়।

DevTools চক্কর

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

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

এখন, অফলাইন মোড পরীক্ষা করা যাক। DevTools-এর অ্যাপ্লিকেশন প্যানেলে পরিষেবা কর্মী প্যানে ফিরে যান এবং অফলাইন চেকবক্সটি চেক করুন। এটি চেক করার পরে, আপনি নেটওয়ার্ক প্যানেল ট্যাবের পাশে একটি সামান্য হলুদ সতর্কতা আইকন দেখতে পাবেন। এই আইকনটি নির্দেশ করে যে আপনি অফলাইনে আছেন।

আপনার পৃষ্ঠা পুনরায় লোড করুন এবং... এটি কাজ করে! আমরা Chrome এর অফলাইন ডিনোর পরিবর্তে আমাদের অফলাইন পান্ডা পাই!

পরিষেবা কর্মীদের পরীক্ষার জন্য টিপস

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

DevTools ব্যবহার করুন

অ্যাপ্লিকেশন প্যানেলের পরিষেবা কর্মী প্যানেলে, কয়েকটি চেকবক্স রয়েছে যা আপনার জীবনকে আরও সহজ করে তুলবে।

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

নতুন করে শুরু করুন

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

অতিরিক্ত টিপস:

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

Lighthouse সঙ্গে পরিবর্তন যাচাই করুন

আবার Lighthouse চালান এবং আপনার পরিবর্তন যাচাই করুন. আপনার পরিবর্তনগুলি যাচাই করার আগে অফলাইন চেকবক্সটি আনচেক করতে ভুলবেন না!

এসইও অডিট

  • ✅ পাস হয়েছে: নথিতে একটি মেটা বিবরণ রয়েছে।

প্রগতিশীল ওয়েব অ্যাপ অডিট

  • ✅ পাস করা হয়েছে: অফলাইনে থাকাকালীন বর্তমান পৃষ্ঠাটি 200 দিয়ে সাড়া দেয়।
  • ✅ পাস হয়েছে: অফলাইনে থাকাকালীন start_url 200 দিয়ে সাড়া দেয়।
  • ✅ পাস হয়েছে: একজন পরিষেবা কর্মীকে নিবন্ধন করে যেটি পৃষ্ঠা এবং start_url.
  • ✅ পাস হয়েছে: ওয়েব অ্যাপ ম্যানিফেস্ট ইনস্টল করার প্রয়োজনীয়তা পূরণ করে।
  • ✅ পাস: একটি কাস্টম স্প্ল্যাশ স্ক্রিনের জন্য কনফিগার করা হয়েছে।
  • ✅ পাস: একটি ঠিকানা-বারের থিমের রঙ সেট করে।

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

সেবা কর্মীর জীবনচক্র

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

ইভেন্ট install করুন

একজন পরিষেবা কর্মী প্রথম ইভেন্টটি install । কর্মী কার্যকর করার সাথে সাথে এটি ট্রিগার হয় এবং প্রতি পরিষেবা কর্মী এটিকে শুধুমাত্র একবার বলা হয়। আপনি যদি আপনার পরিষেবা কর্মী স্ক্রিপ্ট পরিবর্তন করেন ব্রাউজার এটিকে একটি ভিন্ন পরিষেবা কর্মী হিসাবে বিবেচনা করে এবং এটি তার নিজস্ব install ইভেন্ট পাবে৷

সাধারণত install ইভেন্টটি আপনার অ্যাপ চালানোর জন্য আপনার প্রয়োজনীয় সমস্ত কিছু ক্যাশে করতে ব্যবহৃত হয়।

ইভেন্ট activate করুন

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

ঘটনা fetch

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

একজন পরিষেবা কর্মী আপডেট করা হচ্ছে

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

সঠিক ক্যাশিং কৌশল নির্বাচন করা

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

স্ট্যাটিক সম্পদ ক্যাশিং

আপনার সংস্থানগুলিকে প্রিক্যাচ করা একটি ব্যবহারকারী যখন একটি ডেস্কটপ বা মোবাইল অ্যাপ ইনস্টল করে তখন কী ঘটে তার অনুরূপ ধারণা৷ অ্যাপটি চালানোর জন্য প্রয়োজনীয় মূল সংস্থানগুলি ডিভাইসে ইনস্টল বা ক্যাশে করা থাকে যাতে নেটওয়ার্ক সংযোগ থাকুক বা না থাকুক সেগুলি পরে লোড করা যেতে পারে।

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

স্থানীয় ক্যাশে থেকে টানা কোনো নেটওয়ার্ক পরিবর্তনশীলতা দূর করে। ব্যবহারকারী যে ধরনের নেটওয়ার্কে থাকুক না কেন (WiFi, 5G, 3G, এমনকি 2G), আমাদের চালানোর জন্য প্রয়োজনীয় মূল সংস্থানগুলি প্রায় অবিলম্বে উপলব্ধ।

অ্যাপ ডেটা ক্যাশে করা হচ্ছে

স্ট্যাল-হোয়াইল-রিভালিডেট কৌশলটি নির্দিষ্ট ধরনের ডেটার জন্য আদর্শ এবং আমাদের অ্যাপের জন্য ভাল কাজ করে। এটি যত তাড়াতাড়ি সম্ভব স্ক্রিনে ডেটা পায়, তারপর নেটওয়ার্ক সর্বশেষ ডেটা ফেরত দিলে আপডেট হয়। Stale-while-revalidate মানে আমাদের দুটি অ্যাসিঙ্ক্রোনাস রিকোয়েস্ট শুরু করতে হবে, একটি ক্যাশে এবং আরেকটি নেটওয়ার্কে।

সাধারণ পরিস্থিতিতে, ক্যাশে করা ডেটা প্রায় অবিলম্বে ফেরত দেওয়া হবে যা অ্যাপটিকে সাম্প্রতিক ডেটা ব্যবহার করতে পারে। তারপর, যখন নেটওয়ার্ক অনুরোধ ফিরে আসে, অ্যাপটি নেটওয়ার্কের সর্বশেষ ডেটা ব্যবহার করে আপডেট করা হবে।

আমাদের অ্যাপের জন্য, এটি নেটওয়ার্কের চেয়ে ভালো অভিজ্ঞতা প্রদান করে, ক্যাশে কৌশলে ফিরে আসে কারণ ব্যবহারকারীকে স্ক্রিনে কিছু দেখার জন্য নেটওয়ার্ক অনুরোধের সময় শেষ হওয়া পর্যন্ত অপেক্ষা করতে হবে না। তারা প্রাথমিকভাবে পুরানো ডেটা দেখতে পারে, কিন্তু নেটওয়ার্ক অনুরোধ ফিরে আসার পরে, অ্যাপটি সর্বশেষ ডেটা সহ আপডেট করা হয়।

অ্যাপ লজিক আপডেট করুন

পূর্বে উল্লিখিত হিসাবে, অ্যাপটিকে দুটি অ্যাসিঙ্ক্রোনাস অনুরোধ করতে হবে, একটি ক্যাশে এবং একটি নেটওয়ার্কে। অ্যাপটি ক্যাশে অ্যাক্সেস করতে এবং সর্বশেষ ডেটা পুনরুদ্ধার করতে window উপলব্ধ caches অবজেক্ট ব্যবহার করে। এটি প্রগতিশীল বর্ধনের একটি চমৎকার উদাহরণ কারণ caches অবজেক্টটি সমস্ত ব্রাউজারে উপলব্ধ নাও হতে পারে এবং যদি এটি না হয়, নেটওয়ার্ক অনুরোধটি এখনও কাজ করা উচিত।

getForecastFromCache() ফাংশন আপডেট করুন, caches অবজেক্ট গ্লোবাল window অবজেক্টে উপলব্ধ আছে কিনা তা পরীক্ষা করতে এবং যদি এটি থাকে তবে ক্যাশে থেকে ডেটার জন্য অনুরোধ করুন।

public/scripts/app.js

// CODELAB: Add code to get weather forecast from the caches object.
if (!('caches' in window)) {
  return null;
}
const url = `${window.location.origin}/forecast/${coords}`;
return caches.match(url)
    .then((response) => {
      if (response) {
        return response.json();
      }
      return null;
    })
    .catch((err) => {
      console.error('Error getting data from cache', err);
      return null;
    });

তারপরে, আমাদের updateData() সংশোধন করতে হবে যাতে এটি দুটি কল করে, একটি নেটওয়ার্ক থেকে পূর্বাভাস পেতে getForecastFromNetwork() () এবং একটি সর্বশেষ ক্যাশে করা পূর্বাভাস পেতে getForecastFromCache() করতে:

public/scripts/app.js

// CODELAB: Add code to call getForecastFromCache.
getForecastFromCache(location.geo)
    .then((forecast) => {
      renderForecast(card, forecast);
    });

আমাদের আবহাওয়া অ্যাপ এখন ডেটার জন্য দুটি অ্যাসিঙ্ক্রোনাস অনুরোধ করে, একটি ক্যাশে থেকে এবং একটি fetch মাধ্যমে। ক্যাশে ডেটা থাকলে, এটি ফেরত দেওয়া হবে এবং অত্যন্ত দ্রুত রেন্ডার করা হবে (দশ মিলিসেকেন্ড)। তারপর, যখন fetch সাড়া দেয়, কার্ডটি সরাসরি আবহাওয়া API থেকে নতুন ডেটা সহ আপডেট করা হবে।

লক্ষ্য করুন কিভাবে ক্যাশে অনুরোধ এবং fetch অনুরোধ উভয়ই পূর্বাভাস কার্ড আপডেট করার জন্য একটি কল দিয়ে শেষ হয়। অ্যাপটি কীভাবে জানে যে এটি সর্বশেষ ডেটা প্রদর্শন করছে কিনা? এটি renderForecast() থেকে নিম্নলিখিত কোডে পরিচালিত হয়:

public/scripts/app.js

// If the data on the element is newer, skip the update.
if (lastUpdated >= data.currently.time) {
  return;
}

প্রতিবার যখন একটি কার্ড আপডেট করা হয়, অ্যাপটি কার্ডের একটি লুকানো বৈশিষ্ট্যে ডেটার টাইমস্ট্যাম্প সংরক্ষণ করে। কার্ডে ইতিমধ্যেই বিদ্যমান টাইমস্ট্যাম্পটি ফাংশনে পাস করা ডেটার চেয়ে নতুন হলে অ্যাপটি বেল করে।

আমাদের অ্যাপ রিসোর্স প্রাক-ক্যাশ করুন

পরিষেবা কর্মীতে, আসুন একটি DATA_CACHE_NAME যোগ করি যাতে আমরা অ্যাপ শেল থেকে আমাদের অ্যাপ্লিকেশনের ডেটা আলাদা করতে পারি। যখন অ্যাপ শেল আপডেট করা হয় এবং পুরানো ক্যাশে শুদ্ধ করা হয়, তখন আমাদের ডেটা অপরিবর্তিত থাকে, একটি অতি দ্রুত লোডের জন্য প্রস্তুত। মনে রাখবেন, যদি ভবিষ্যতে আপনার ডেটা বিন্যাস পরিবর্তন হয়, তাহলে আপনাকে এটি পরিচালনা করার জন্য একটি উপায়ের প্রয়োজন হবে এবং অ্যাপ শেল এবং বিষয়বস্তু সিঙ্কে থাকা নিশ্চিত করতে হবে।

public/service-worker.js

// CODELAB: Update cache names any time any of the cached files change.
const CACHE_NAME = 'static-cache-v2';
const DATA_CACHE_NAME = 'data-cache-v1';

CACHE_NAME আপডেট করতে ভুলবেন না; আমরা আমাদের সমস্ত স্ট্যাটিক রিসোর্সও পরিবর্তন করব।

আমাদের অ্যাপ অফলাইনে কাজ করার জন্য, আমাদের এটির প্রয়োজনীয় সমস্ত সংস্থান প্রিক্যাচ করতে হবে। এটি আমাদের পারফরম্যান্সকেও সাহায্য করবে। নেটওয়ার্ক থেকে সমস্ত সংস্থান পাওয়ার পরিবর্তে, অ্যাপটি স্থানীয় ক্যাশে থেকে তাদের সমস্ত লোড করতে সক্ষম হবে, যে কোনও নেটওয়ার্ক অস্থিরতা দূর করবে।

ফাইলের তালিকা সহ FILES_TO_CACHE অ্যারে আপডেট করুন:

public/service-worker.js

// CODELAB: Add list of files to cache here.
const FILES_TO_CACHE = [
  '/',
  '/index.html',
  '/scripts/app.js',
  '/scripts/install.js',
  '/scripts/luxon-1.11.4.js',
  '/styles/inline.css',
  '/images/add.svg',
  '/images/clear-day.svg',
  '/images/clear-night.svg',
  '/images/cloudy.svg',
  '/images/fog.svg',
  '/images/hail.svg',
  '/images/install.svg',
  '/images/partly-cloudy-day.svg',
  '/images/partly-cloudy-night.svg',
  '/images/rain.svg',
  '/images/refresh.svg',
  '/images/sleet.svg',
  '/images/snow.svg',
  '/images/thunderstorm.svg',
  '/images/tornado.svg',
  '/images/wind.svg',
];

যেহেতু আমরা ম্যানুয়ালি ক্যাশে ফাইলগুলির তালিকা তৈরি করছি, প্রতিবার যখন আমরা একটি ফাইল আপডেট করি আমাদের অবশ্যই CACHE_NAME আপডেট করতে হবে। আমরা আমাদের ক্যাশ করা ফাইলগুলির তালিকা থেকে offline.html সরাতে সক্ষম হয়েছি কারণ আমাদের অ্যাপে এখন অফলাইনে কাজ করার জন্য প্রয়োজনীয় সমস্ত প্রয়োজনীয় সংস্থান রয়েছে এবং অফলাইন পৃষ্ঠাটি আর কখনও দেখাবে না৷

সক্রিয় ইভেন্ট হ্যান্ডলার আপডেট করুন

আমাদের activate ইভেন্ট ভুলবশত আমাদের ডেটা মুছে না যায় তা নিশ্চিত করতে, service-worker.js activate ইভেন্টে if (key !== CACHE_NAME) { এর সাথে প্রতিস্থাপন করুন:

public/service-worker.js

if (key !== CACHE_NAME && key !== DATA_CACHE_NAME) {

ফেচ ইভেন্ট হ্যান্ডলার আপডেট করুন

ওয়েদার এপিআই-তে অনুরোধগুলি আটকাতে এবং তাদের প্রতিক্রিয়াগুলি ক্যাশে সংরক্ষণ করতে আমাদের পরিষেবা কর্মীকে সংশোধন করতে হবে, যাতে আমরা পরে সহজেই সেগুলি অ্যাক্সেস করতে পারি। বাসি-যখন-পুনঃপ্রমাণ কৌশলে, আমরা আশা করি যে নেটওয়ার্ক প্রতিক্রিয়া 'সত্যের উত্স' হবে, সর্বদা আমাদের সাম্প্রতিকতম তথ্য সরবরাহ করে। If the network can't, it's OK to fail because we've already retrieved the latest cached data in our app.

Update the fetch event handler to handle requests to the data API separately from other requests.

public/service-worker.js

// CODELAB: Add fetch event handler here.
if (evt.request.url.includes('/forecast/')) {
  console.log('[Service Worker] Fetch (data)', evt.request.url);
  evt.respondWith(
      caches.open(DATA_CACHE_NAME).then((cache) => {
        return fetch(evt.request)
            .then((response) => {
              // If the response was good, clone it and store it in the cache.
              if (response.status === 200) {
                cache.put(evt.request.url, response.clone());
              }
              return response;
            }).catch((err) => {
              // Network request failed, try to get it from the cache.
              return cache.match(evt.request);
            });
      }));
  return;
}
evt.respondWith(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.match(evt.request)
          .then((response) => {
            return response || fetch(evt.request);
          });
    })
);

The code intercepts the request and checks if it is for a weather forecast. If it is, use fetch to make the request. Once the response is returned, open the cache, clone the response, store it in the cache, and return the response to the original requestor.

We need to remove the evt.request.mode !== 'navigate' check because we want our service worker to handle all requests (including images, scripts, CSS files, etc), not just navigations. If we left that check in, only the HTML would be served from the service worker cache. Everything else would be requested from the network.

Try it out

The app should be completely offline-functional now. Refresh the page to ensure that you've got the latest service worker installed. Then save a couple of cities and press the refresh button on the app to get fresh weather data.

Next, go to the Cache Storage pane on the Application panel of DevTools. Expand the section and you should see the name of your static cache and data cache listed on the left-hand side. Opening the data cache should show the data stored for each city.

Switch to the Service Workers pane, and check the Offline checkbox. Try reloading the page and then go offline and reload the page.

If you're on a fast network and want to see how weather forecast data is updated on a slow connection, set the FORECAST_DELAY property in server.js to 5000 . All requests to the forecast API will be delayed by 5000ms.

Verify changes with Lighthouse

It's also a good idea to run Lighthouse again.

SEO Audit

  • ✅ PASSED: Document has a meta description.

Progressive Web App Audit

  • ✅ PASSED: Current page responds with a 200 when offline.
  • ✅ PASSED: start_url responds with a 200 when offline.
  • ✅ PASSED: Registers a service worker that controls page and start_url.
  • ✅ PASSED: Web app manifest meets the installability requirements.
  • ✅ PASSED: Configured for a custom splash screen.
  • ✅ PASSED: Sets an address-bar theme color.

When a Progressive Web App is installed, it looks and behaves like all of the other installed apps. It launches from the same place that other apps launch. It runs in an app without an address bar or other browser UI. And like all other installed apps, it's a top level app in the task switcher.

In Chrome, a Progressive Web App can either be installed through the three-dot context menu, or you can provide a button or other UI component to the user that will prompt them to install your app.

Audit with Lighthouse

In order for a user to be able to install your Progressive Web App, the app needs to meet certain criteria . The easiest way to check is to use Lighthouse and make sure it meets the installable criteria.

If you've worked through this codelab, your PWA should already meet these criteria.

Add install.js to index.html

First, let's add the install.js to our index.html file.

public/index.html

<!-- CODELAB: Add the install script here -->
<script src="/scripts/install.js"></script>

Listen for beforeinstallprompt event

If the add to home screen criteria are met, Chrome will fire a beforeinstallprompt event that you can use to indicate your app can be 'installed' and then prompt the user to install it. Add the code below to listen for the beforeinstallprompt event:

public/scripts/install.js

// CODELAB: Add event listener for beforeinstallprompt event
window.addEventListener('beforeinstallprompt', saveBeforeInstallPromptEvent);

Save event and show install button

In our saveBeforeInstallPromptEvent function, we'll save a reference to the beforeinstallprompt event so that we can call prompt() on it later and update our UI to show the install button.

public/scripts/install.js

// CODELAB: Add code to save event & show the install button.
deferredInstallPrompt = evt;
installButton.removeAttribute('hidden');

Show the prompt and hide the button

When the user clicks the install button, we need to call .prompt() on the saved beforeinstallprompt event. We also need to hide the install button, because .prompt() can only be called once on each saved event.

public/scripts/install.js

// CODELAB: Add code show install prompt & hide the install button.
deferredInstallPrompt.prompt();
// Hide the install button, it can't be called twice.
evt.srcElement.setAttribute('hidden', true);

Calling .prompt() will show a modal dialog to the user, asking them to add your app to their home screen.

Log the results

You can check to see how the user responded to the install dialog by listening for the promise returned by the userChoice property of the saved beforeinstallprompt event. The promise returns an object with an outcome property after the prompt has shown and the user has responded to it.

public/scripts/install.js

// CODELAB: Log user response to prompt.
deferredInstallPrompt.userChoice
    .then((choice) => {
      if (choice.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt', choice);
      } else {
        console.log('User dismissed the A2HS prompt', choice);
      }
      deferredInstallPrompt = null;
    });

One comment about userChoice : the spec defines it as a property , not a function as you might expect.

Log all install events

In addition to any UI that you add to install your app, users can also install your PWA through other methods, for example Chrome's three-dot menu. To track these events, listen for the appinstalled event.

public/scripts/install.js

// CODELAB: Add event listener for appinstalled event
window.addEventListener('appinstalled', logAppInstalled);

Then, we'll need to update the logAppInstalled function. For this codelab, we'll just use console.log , but in a production app you probably want to log this as an event with your analytics software.

public/scripts/install.js

// CODELAB: Add code to log the event
console.log('Weather App was installed.', evt);

Update the service worker

Don't forget to update the CACHE_NAME in your service-worker.js file since you've made changes to files that are already cached. Enabling the Bypass for network checkbox in the Service Workers pane of the Application panel in DevTools will work in development, but won't help in the real world.

Try it out

Let's see how our install step went. To be safe, use the Clear site data button in the Application panel of DevTools to clear everything away and make sure we're starting fresh. If you previously installed the app, be sure to uninstall it, otherwise the install icon won't show up again.

Verify the install button is visible

First, let's verify our install icon shows up properly. Be sure to try this on both desktop and mobile.

  1. Open the URL in a new Chrome tab.
  2. Open Chrome's three-dot menu (next to the address bar).
    ▢ Verify you see " Install Weather... " in the menu.
  3. Refresh the weather data using the refresh button in the upper right corner to ensure we meet the user engagement heuristics .
    ▢ Verify that the install icon is visible in the app header.

Verify the install button works

Next, let's make sure everything installs properly and our events are properly fired. You can do this either on desktop or mobile. If you want to test this on mobile, be sure you're using remote debugging so you can see what's logged to the console.

  1. Open Chrome, and in a new browser tab, navigate to your Weather PWA.
  2. Open DevTools and switch to the Console panel.
  3. Click the install button in the upper right corner.
    ▢ Verify the install button disappears
    ▢ Verify the install modal dialog is shown.
  4. Click Cancel.
    ▢ Verify " User dismissed the A2HS prompt " is shown in the console output.
    ▢ Verify the install button reappears.
  5. Click the install button again, then click the install button in the modal dialog.
    ▢ Verify " User accepted the A2HS prompt " is shown in the console output.
    ▢ Verify " Weather App was installed " is shown in the console output.
    ▢ Verify the Weather app is added to the place where you'd typically find apps.
  6. Launch the Weather PWA.
    ▢ Verify the app opens as a standalone app, either in an app window on desktop, or full screen on mobile.

.

Verify iOS installation works properly

Let's also check the behavior on iOS. If you have an iOS device, you can use that, or if you're on a Mac, try the iOS Simulator available with Xcode.

  1. Open Safari and in a new browser tab, navigate to your Weather PWA.
  2. Click the Share button.
  3. Scroll right and click on the Add to Home Screen button.
    ▢ Verify the title, URL, and icon are correct.
  4. Click Add.
     ▢ Verify the app icon is added to the home screen.
  5. Launch the Weather PWA from the home screen.
    ▢ Verify the app launches full screen.

Bonus: Detecting if your app is launched from the home screen

The display-mode media query makes it possible to apply styles depending on how the app was launched, or determine how it was launched with JavaScript.

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

You can also check the display-mode media query in JavaScript to see if you're running in standalone .

Bonus: Uninstalling your PWA

Remember, the beforeinstallevent doesn't fire if the app is already installed, so during development you'll probably want to install and uninstall your app several times to make sure everything is working as expected.

Android

On Android, PWAs are uninstalled in the same way other installed apps are uninstalled.

  1. Open the app drawer.
  2. Scroll down to find the Weather icon.
  3. Drag the app icon to the top of the screen.
  4. Choose Uninstall.

ChromeOS

On ChromeOS, PWAs are easily uninstalled from the launcher search box.

  1. Open the launcher.
  2. Type " Weather " into the search box, your Weather PWA should appear in the results.
  3. Right click (alt-click) on the Weather PWA.
  4. Click Remove from Chrome...

macOS and Windows

On Mac and Windows, PWAs may be uninstalled through Chrome:

  1. In a new browser tab, open chrome://apps .
  2. Right click (alt-click) on the Weather PWA.
  3. Click Remove from Chrome...

You can also open the installed PWA, click the the three-dot context menu in the upper right corner, and choose " Uninstall Weather PWA... "

Congratulations, you've successfully built your first Progressive Web App!

You added a web app manifest to enable it to be installed and you added a service worker to ensure that your PWA is always fast and reliable. You learned how to use DevTools to audit an app and how it can help you improve your user experience.

You now know the key steps required to turn any web app into a Progressive Web App.

What's next?

Check out some of these codelabs...

Further reading

Reference docs