কৌণিক পরিসেবা কর্মীর সঙ্গে precaching

দুর্বল সংযোগ সহ নেটওয়ার্কগুলিতে আপনার অ্যাপকে দ্রুত এবং আরও নির্ভরযোগ্য করতে কৌণিক পরিষেবা কর্মী ব্যবহার করুন৷

মিনকো গেচেভ

সীমিত সংযোগ নিয়ে কাজ করা

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

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

কৌণিক সেবা কর্মীর পরিচয়

কৌণিক দলটি প্রিক্যাচিং কার্যকারিতা সহ একটি পরিষেবা কর্মী মডিউল অফার করে যা ফ্রেমওয়ার্ক এবং অ্যাঙ্গুলার কমান্ড লাইন ইন্টারফেস (সিএলআই) এর সাথে ভালভাবে সংহত।

পরিষেবা কর্মী যোগ করতে, CLI তে এই কমান্ডটি চালান:

ng add @angular/pwa

@angular/service-worker এবং @angular/pwa এখন অ্যাপে ইনস্টল করা উচিত এবং package.json এ উপস্থিত হওয়া উচিত। ng-add স্কিম্যাটিক প্রকল্পটিতে ngsw-config.json নামে একটি ফাইল যুক্ত করে, যা আপনি পরিষেবা কর্মীকে কনফিগার করতে ব্যবহার করতে পারেন। (ফাইলটিতে একটি ডিফল্ট কনফিগারেশন রয়েছে যা আপনি একটু পরে কাস্টমাইজ করবেন।)

এখন উত্পাদনের জন্য প্রকল্প তৈরি করুন:

ng build --prod

dist/service-worker-web-dev ডিরেক্টরির ভিতরে আপনি ngsw.json নামে একটি ফাইল পাবেন। এই ফাইলটি কৌণিক পরিষেবা কর্মীকে বলে যে কীভাবে অ্যাপে সম্পদগুলি ক্যাশে করতে হয়। কনফিগারেশন ( ngsw-config.json ) এবং বিল্ড টাইমে উত্পাদিত সম্পদের উপর ভিত্তি করে বিল্ড প্রক্রিয়া চলাকালীন ফাইলটি তৈরি হয়।

এখন আপনার অ্যাপের উৎপাদন সম্পদ সম্বলিত ডিরেক্টরিতে একটি HTTP সার্ভার শুরু করুন, সর্বজনীন URL খুলুন এবং Chrome DevTools-এ এর নেটওয়ার্ক অনুরোধগুলি দেখুন:

  1. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
  2. নেটওয়ার্ক ট্যাবে ক্লিক করুন।

নোট করুন যে নেটওয়ার্ক ট্যাবে ngsw-worker.js স্ক্রিপ্ট দ্বারা সরাসরি ব্যাকগ্রাউন্ডে ডাউনলোড করা স্ট্যাটিক সম্পদের একটি গুচ্ছ রয়েছে:

নমুনা অ্যাপ্লিকেশন

এটি একটি কৌণিক পরিষেবা কর্মী যা জেনারেট করা ngsw.json ম্যানিফেস্ট ফাইলে নির্দিষ্ট করা স্ট্যাটিক সম্পদগুলিকে প্রিক্যাচ করে৷

যদিও একটি গুরুত্বপূর্ণ সম্পদ অনুপস্থিত: nyan.png । এই ইমেজটি প্রিক্যাচ করার জন্য আপনাকে একটি প্যাটার্ন যোগ করতে হবে যাতে এটি ngsw-config.json এ অন্তর্ভুক্ত থাকে, যা ওয়ার্কস্পেসের মূলে থাকে:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js",
        "/assets/*.png"
        ]
      }
    },
    ...
}

এই পরিবর্তনটি /assets ফোল্ডারের সমস্ত PNG ছবি app রিসোর্স অ্যাসেট গ্রুপে যোগ করে। যেহেতু এই সম্পদ গোষ্ঠীর জন্য installMode prefetch জন্য সেট করা আছে, পরিষেবা কর্মী সমস্ত নির্দিষ্ট সম্পদগুলিকে প্রিক্যাচ করবে—যা এখন PNG ছবিগুলি অন্তর্ভুক্ত করে।

প্রিক্যাশেড করার জন্য অন্যান্য সম্পদ নির্দিষ্ট করা ঠিক ততটাই সোজা: app রিসোর্স অ্যাসেট গ্রুপে প্যাটার্ন আপডেট করুন।

উপসংহার

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

  1. আপনার প্রকল্পে @angular/pwa প্যাকেজ যোগ করুন।
  2. ngsw-config.json সম্পাদনা করে পরিষেবা কর্মী কী ক্যাশে করে তা নিয়ন্ত্রণ করুন।