কীভাবে তৈরি করুন প্রতিক্রিয়া অ্যাপ্লিকেশন এবং কাস্টম পরিষেবা এজেন্ট ব্যবহার করে একটি পিডাব্লুএ তৈরি করবেন

দ্রষ্টব্য: এটি তৈরি করুন এবং প্রতিক্রিয়া অ্যাপ্লিকেশনের কোনও পরিষেবা প্রতিনিধি কী তা কোনও ভূমিকা নয়। এই নিবন্ধটি উভয়ের পূর্ব জ্ঞান প্রয়োজন।

সুতরাং আমি সম্প্রতি একটি প্রতিক্রিয়া প্রকল্পে কাজ করার সুযোগ পেয়েছি যেখানে ফলস্বরূপ ওয়েব অ্যাপ্লিকেশনটি প্রগতিশীল ওয়েব অ্যাপ্লিকেশন (পিডাব্লুএ) হিসাবে প্রকাশিত হয়েছিল।

আমি বুঝতে পেরেছি যে তৈরির প্রতিক্রিয়া অ্যাপ্লিকেশন (সিআরএ) এর জন্য একটি বিল্ডে কনফিগার করা কাস্টম রুটগুলির সাথে একটি পিডাব্লুএ তৈরি করা কতটা কঠিন। আশা করি এটি কাউকে অনুরূপ অবস্থানে সহায়তা করবে।

তৈরি প্রতিক্রিয়া অ্যাপ্লিকেশনটিতে পিডব্লিউএ

আমাদের সিআরএ শেলটিতে পিডব্লিউএ ঠিক কীভাবে কার্যকর করা হয়?

সিআরএ শেল এখন একটি পরিষেবা কর্মীকে ডিফল্টরূপে বান্ডিল করে। আপনার লক্ষ্য করা উচিত ছিল যে সূচক.জেএস ফাইলটিতে একটি সাধারণ সিআরএ শেলটিতে সার্ভিস ওয়ার্কারকে রেজিস্টার করার জন্য কল রয়েছে:

আপনি একটি নতুন সিআরএ অ্যাপ্লিকেশন তৈরি করতে পারেন এবং সার্ভিস ওয়ার্কার ফাইলের নিবন্ধটি দেখতে পারেন।

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

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

ফাইলটির ফর্ম্যাটিংটি ইনলাইন ইএস 5 জাভাস্ক্রিপ্ট, যা এটি পড়া কিছুটা কঠিন করে তোলে makes তবে আপনি এটি যে কোনও প্রাক্টেটিফায়ারে লিখতে পারেন এবং আপনার আরও পঠনযোগ্য ফাইলটি দেখা উচিত।

উপরের ফাইলটি একবার দেখলে দেখাতে হবে যে কেবল স্ট্যাটিক ক্যাশে নিম্নলিখিত ক্যাশে নামটি দিয়ে তৈরি করা হয়েছে: sw-precache-v3-sw-precache-webpack-plugins - + (বিক্রয়.গ্রিফিকেশন? স্ব। নিবন্ধন.স্কোপ)। তারপরে সূচিপত্রের মতো সমস্ত স্থির ফাইল এবং আপনার জেএস এবং সিএসএস ফাইলগুলি এই ক্যাশে ক্যাশে করা হয় ached

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

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

সিআরএতে স্ট্যান্ডার্ড পিডব্লিউএ এর সীমাবদ্ধতা

দুর্ভাগ্যক্রমে, সিআরএ ব্যবহার করার সময়, উপরের পদক্ষেপগুলি অনুসরণ করা সহজ নয়। আপনি যদি বের করে দেওয়ার জন্য প্রস্তুত না হন।

সিআরএ টিম কেন ডিফল্ট পরিষেবা কর্মীকে কাস্টমাইজ করতে সমর্থন করে না তা জানতে এই গিটহাব সমস্যাগুলি দেখুন।

সুতরাং আমরা কীভাবে এটি ব্যবহার করব যেহেতু আমরা ডিফল্ট পরিষেবা কর্মীকে কাস্টমাইজ করতে পারি না?

CRA কীভাবে পরিষেবা এজেন্ট জেনারেট করে তা বুঝুন tand

বিল্ড সিস্টেমের জন্য সমাধান সন্ধানের প্রথম পদক্ষেপটি বিল্ড সিস্টেমটি কীভাবে কাজ করে তা বোঝা।

সুতরাং আসুন যে লাইব্রেরিটি দিয়ে বিল্ড সিস্টেমটি পরিষেবা কর্মী ফাইল তৈরি করতে ব্যবহার করে তা দিয়ে শুরু করি।

sw-precache একটি লাইব্রেরি যা দিয়ে আপনি কোনও টেমপ্লেটের উপর ভিত্তি করে কোনও পরিষেবা কর্মী ফাইল তৈরি করতে পারেন। টেমপ্লেট ফাইলটি আন্ডারস্কোর টেম্পলেট ইঞ্জিন ব্যবহার করে লেখা হয়।

এখানে sw-precache উত্স কোডের টেম্পলেট ফাইলের লিঙ্ক।

আবার, টেমপ্লেট ফাইলটি জটিল দেখায়, তবে আপনি যখন টেমপ্লেট ভাষার সাথে পরিচিত হন তবে বেশ সহজ।

সুতরাং আপনি যখন কোনও পরিষেবা কর্মী তৈরি করতে কোনও সিআরএ শেলটিতে একটি বিল্ড প্রক্রিয়া চালান, নিম্নলিখিতটি ঘটে:

  1. Sw-precache লাইব্রেরি অভ্যন্তরীণভাবে কার্যকর করা হয়
  2. টেমপ্লেট থেকে পরিষেবা কর্মী ফাইল তৈরি করা যেতে পারে যার সাথে sw-precache এর জন্য একটি বিকল্প অবজেক্ট সরবরাহ করা হয়েছে
  3. পরিষেবা কর্মী ফাইলটি সার্ভিস-কর্মী.জেএস নামের সাথে বিল্ড ফোল্ডারে উত্পন্ন হয়

ডিফল্ট পরিষেবা কর্মীকে ওভাররাইড করুন

এখন আমরা কীভাবে উপরের প্রক্রিয়াটিকে ওভাররাইড করতে পারি যাতে আমাদের নিজস্ব কাস্টম সার্ভিস কর্মীর ফাইলটি তৈরি করা যায়?

উত্তরটি জেফ পোজনিকের (sw-precache এর রক্ষণাবেক্ষণকারী) স্ট্যাকওভারফ্লো উত্তরের ভিত্তিতে তৈরি।

প্রথমে আমাদের সাধারণ বিল্ড প্রক্রিয়া শেষে এসডাব্লু প্রিচিচি সি এল এল চালানো দরকার।

নিম্নলিখিত কমান্ডটি চালিয়ে sw-precache লাইব্রেরি ইনস্টল করুন: এনপিএম ইনস্টল --save-dev sw-precache

এখন sw-precache লাইব্রেরি একটি কনফিগারেশন ফাইলে কার্যকর করা হয় যা সি এল এলির একটি বিকল্পের মাধ্যমে সরবরাহ করা হয়। এটি হ'ল কমান্ড: sw-precache --config = sw-precache-config.js, যেখানে sw-precache-config.js হ'ল কনফিগারেশন ফাইলের নাম।

এখানে একটি নমুনা কনফিগারেশন ফাইল।

মডিউল.এক্সপোর্টস = {স্ট্যাটিকফিলগ্লোবস: ['বিল্ড / স্ট্যাটিক / সিএসএস / **। সিএসএস ',' বিল্ড / স্ট্যাটিক / জেএস / **। js '], swFilePath:' ./build/service-worker.js ', ٹیمপ্লেফিলিপথ:' ./service-worker.tmpl ', স্ট্রিপপ্রফিক্স:' বিল্ড / ', হ্যান্ডেলফ্যাচ: মিথ্যা, রানটাইম ক্যাচিং: [{urlPattern: / this \ is .আইস \\। এ re। রেজেেক্স /, হ্যান্ডলার: 'নেটওয়ার্কফার্স্ট'}]}

দ্রষ্টব্য: আপনি swFilePath ./build/service-worker.js হিসাবে নির্দিষ্ট করা গুরুত্বপূর্ণ। এটি এমন যে আপনার কাস্টম বিল্ড প্রক্রিয়াটির ফলাফল হিসাবে উত্পন্ন পরিষেবা কর্মী সিআরএ দ্বারা নির্মিত একটিটিকে ওভাররাইট করে দেবে (এক্ষেত্রে তাদের উভয়েরই একই নাম রয়েছে)। অন্যথায় আপনার বিল্ড ডিরেক্টরিতে দুটি পরিষেবা কর্মী ফাইল থাকবে!

Sw-precache এর জন্য গিটহাব পৃষ্ঠায় আপনি অবজেক্টের বৈশিষ্ট্যগুলির জন্য বিশদ নথিপত্র পাবেন এবং কোন বৈধ মান তাদেরকে নির্ধারিত করা যাবে।

রানটাইম ক্যাচিং বিকল্পটি বিশেষভাবে আগ্রহী, কারণ এটি একটি খুব এক্সটেনসিবল সমাধান যা আপনাকে কাস্টম বিধিগুলি সংজ্ঞায়িত করতে সহায়তা করে যার ভিত্তিতে আপনার পরিষেবা প্রতিনিধি গতিশীল সামগ্রীতে প্রতিক্রিয়া জানাতে পারে।

টেম্পলেটফিলপথটি এমন একটি বিকল্প যা আপনার কাস্টম সার্ভিস কর্মী টেম্পলেট ফাইলটি পেতে সিএলআই দ্বারা ব্যবহার করা উচিত। তবে আপনি প্রায় সবসময় লাইব্রেরির নিজেই সরবরাহিত টেম্পলেট ফাইলটি ব্যবহার করবেন।

অবশেষে, আমাদের কাস্টমাইজড সার্ভিস কর্মী তৈরি করতে সিআরএ বিল্ড সিস্টেমকে সিগন্যাল করার জন্য আমাদের স্ক্রিপ্ট মোতায়েন করতে হবে। এগিয়ে যান এবং sw-precache লাইব্রেরি ইনস্টল করুন।

এরপরে, প্যাকেজটি আপডেট করুন: জেসন বিল্ড স্ক্রিপ্টটি নিম্নরূপ:

বিল্ড: পুনর্নির্মাণ স্ক্রিপ্টগুলি && sw-precache --config = sw-precache-config.js

একবার আপনি এনপিএম রান বিল্ড দিয়ে বিল্ড প্রক্রিয়াটি সম্পন্ন করার পরে আপনি বিল্ড ফোল্ডারটি খুলতে পারেন এবং আপনার উত্পন্ন পরিষেবা কর্মীকে দেখতে পাবেন।

কাস্টম পরিষেবা কর্মী সহ এবং ছাড়াই বিল্ড প্রক্রিয়াটি সম্পূর্ণ করুন এবং উভয়ের মধ্যে পার্থক্য নোট করুন।

উপসংহার

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

কাস্টম সার্ভিস কর্মী তৈরি করার জন্য অন্যান্য পদ্ধতি রয়েছে (প্রতিক্রিয়া-অ্যাপ-রিওয়্যার এবং ওয়ার্কবক্সের সংমিশ্রণটি ব্যবহার করে)। আমি একটি পোস্টে এই পদ্ধতির ব্যাখ্যা করার চেষ্টা করব।