আমি কীভাবে তৈরি-প্রতিক্রিয়া অ্যাপ্লিকেশনে ওয়ার্কবক্সের সাথে একটি কাস্টম পিডাব্লুএ তৈরি করব?

দ্রষ্টব্য: প্রতিক্রিয়াতে PWAs এর অবদানের সিরিজের এটি তৃতীয়। পূর্ববর্তী দুটি নিবন্ধে এখানে এবং এখানে একটি সংক্ষিপ্ত পরিচিতি পাওয়া যাবে।

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

ওয়ার্কবক্স লাইব্রেরির একটি সংগ্রহ যা অফলাইনে ফাংশনগুলি তৈরি করা সহজ করে। ওয়ার্কবক্সকে এসডাব্লু প্রিচিচি লাইব্রেরির উত্তরসূরি হিসাবেও দেখা যায় যার সাহায্যে সিআরএ একটি স্ট্যান্ডার্ড এসডাব্লু তৈরি করে।

সিআরএ-কে আগে থেকেই ওয়ার্কবক্সে সিআরএ স্থানান্তরিত করার বিষয়ে আলোচনা হয়েছে (বিশদগুলির জন্য এই বিষয়টি দেখুন)। দুর্ভাগ্যক্রমে, এর থেকে এখনও কিছু বেরিয়ে আসে বলে মনে হচ্ছে না।

দরজা

  1. রিঅ্যাক্ট-অ্যাপ-রি-ওয়্যার ব্যবহার করতে সিআরএ বিল্ডটি কনফিগার করুন। (রিঅ্যাক্ট-অ্যাপ-রিওয়ার্ডটি বের করা ছাড়াই স্ট্যান্ডার্ড সিআরএ বিল্ড কনফিগার করার জন্য একটি গ্রন্থাগার)
  2. কোনও পরিষেবা কর্মী তৈরি করতে ওয়ার্কবক্স ব্যবহার করতে বিল্ডটি কাস্টমাইজ করতে রিঅ্যাক্ট-অ্যাপ-রিওয়ার্ড ব্যবহার করুন
  3. একটি খুব সাধারণ টুডো অ্যাপ্লিকেশন তৈরি করুন
  4. ওয়ার্কবক্সের সাহায্যে টোডো অ্যাপ্লিকেশনটির জন্য অফলাইন কার্যকারিতা কার্যকর করুন। অফলাইন কার্যকারিতা যার জন্য আমরা লক্ষ্য করি: ক) পুনরুদ্ধারকৃত সম্পদগুলি ক্যাশে করুন যাতে তাদের অফলাইনে উপলব্ধ করা যায় খ) অফলাইনে পোস্টের পোস্টের অনুমতি দিন

সিআরএ-তে ওয়ার্কবক্সের পরিচিতি

প্রথমে নিম্নলিখিত কমান্ড সহ একটি নতুন সিআরএ সংগ্রহস্থল তৈরি করুন:

এনপিএক্স তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন রিয়েল-অ্যাপ-রিওয়্যারিং-ওয়ার্কবক্স

এটি উপযুক্ত নামের সাথে একটি নতুন ফোল্ডার তৈরি করা উচিত। আপনি এই ফোল্ডারটি সেট আপ করার পরে, ফোল্ডারে সিডি অনুলিপি করুন এবং সর্বজনীন ফোল্ডারে একটি পরিষেবা কর্মী ফাইল তৈরি করুন। আমি আমার কাস্টম-পরিষেবা-কর্মী.জেএস কল করি।

একবার এটি হয়ে গেলে, নিবন্ধের পরিষেবা NWE_ENV.WS- এ উত্পাদনে সেট করা আছে কিনা তা পরীক্ষা করে দেখুন remove

শেষ অবধি, কাস্টম-পরিষেবা-কর্মী.জএস ফাইলে নিম্নলিখিত কোডটি যুক্ত করুন:

আমি ওয়ার্কবক্স ওয়েবসাইট থেকে সরাসরি এই কোড স্নিপেট পেয়েছি। আপনার ফাইলে ওয়ার্কবক্স নামে একটি বৈশ্বিক পরিবর্তনশীল যুক্ত করতে লাইন আমদানি স্ক্রিপ্টগুলি ব্যবহার করুন। আপনার আমদানি করা স্ক্রিপ্টটি একটি সিডিএন-তে সরবরাহ করা হয়েছে। এরপরে আপনি কেবল স্ক্রিপ্ট দ্বারা ভেরিয়েবলটি সঠিকভাবে লোড করা হয়েছে কিনা তা পরীক্ষা করতে পারেন।

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

সিআরএ-তে রিঅ্যাক্ট-অ্যাপ-রি-ওয়্যার প্রয়োগ করুন

নিম্নলিখিত কমান্ডটি সহ আপনার প্রকল্প ফোল্ডারে "রিঅ্যাক্ট-অ্যাপ-রিওয়ার্ডেড" প্যাকেজ যুক্ত করুন:

এনপিএম ইনস্টল - সেভ-ডেভ রিঅ্যাক্ট-অ্যাপ-রিওয়ার্ড

আপনি যদি এখন নথিগুলি পড়ে থাকেন তবে আপনাকে পরামর্শ দেওয়া হবে যে আপনাকে আপনার প্রকল্পের মূলটিতে একটি কনফিগার-ওভাররাইড.জেএস ফাইল সেট আপ করতে হবে। প্রথমে এটি কী করে তা খুঁজে বার করুন।

আমি একটি খালি ফাইল তৈরি করেছি এবং এর অর্থ কী তা ব্যাখ্যা করছি explain আপনি যদি পরিবর্তে এটি পড়তে চান তবে ডকুমেন্টগুলিতে একটি খুব বিশদ ব্যাখ্যা রয়েছে।

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

আপনি যদি কনফিগারেশন-ওভাররাইড.জেএস ফাইলের ডিভাসবার কীটি দেখেন তবে আপনি দেখতে পাবেন যে আমরা কেবল কনফিগারেশনের পরিবর্তে কনফিগারেশন.টোস্ট্রিং () লগইন করছি। এর কারণ হ'ল নোড কেবলমাত্র কনসোলটিতে [ফাংশন] মুদ্রণ করে যখন পরবর্তীটি কার্যকর করা হয়।

আপনার প্যাকেজ.জসন ফাইলটি খুলুন এবং "রিঅ্যাক্ট-অ্যাপ-রিওয়ার্ড শুরু" দিয়ে কমান্ড স্ক্রিপ্টগুলি প্রতিস্থাপন করুন।

টোডো অ্যাপ্লিকেশন তৈরি করুন

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

টুডো অ্যাপ্লিকেশনটির কয়েকটি চলন্ত অংশ প্রয়োজন যাতে আমরা প্রকৃতপক্ষে পরিষেবা কর্মীদের ব্যবহার করতে পারি।

এটি অন্তর্ভুক্ত করবে:

  1. একটি বেসিক UI স্তর (আমি এর জন্য স্টাইলিংটিকে সম্পূর্ণ উপেক্ষা করব))
  2. একটি জসন সার্ভার যা থেকে আমরা ডেটা অনুরোধ করতে পারি

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

এখানে আমি লিখেছি টোডো উপাদান।

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

JSON সার্ভার সেট আপ করতে নিম্নলিখিত কমান্ডটি চালান:

এনপিএম ইনস্টল - সেভ জসন-সার্ভার

নিম্নলিখিত কাঠামোর সাহায্যে db.json নামে একটি ফাইল তৈরি করুন

অবশেষে, টার্মিনালে নিম্নলিখিত কমান্ডটি প্রয়োগ করুন:

json-server --watch db.json --port 8000

এটি 8000 পোর্টে একটি স্থানীয় সার্ভার চালাবে এবং পরিবর্তনের জন্য db.json ফাইলটি পর্যবেক্ষণ করবে। কিছু পরিবর্তন হলে সার্ভার পুনরায় চালু হয়। আপনার অ্যাপ্লিকেশনটি পরীক্ষা করতে কোনও সার্ভারকে উপহাস করার এটি খুব সহজ উপায়।

অবশেষে, আপনার নতুন টোডো উপাদান প্রতিবিম্বিত করতে আপনার অ্যাপ.জেএস ফাইল আপডেট করুন এবং এই ফাইলটি থেকে ডিফল্ট জেএসএক্স সরান।

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

এখন আপনি সবকিছু সেট আপ করেছেন, আসুন ওয়ার্কবক্স ব্যবহার করে এই জিনিসগুলিকে অফলাইনে ব্যবহার করার একটি উপায় খুঁজে বের করুন।

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

ওয়ার্কবক্সের সাহায্যে ক্যাশে প্রয়োগ করুন

এখন আপনি যখন Chrome সরঞ্জামদণ্ডটি খুলবেন, আপনার অ্যাপ্লিকেশন ট্যাবে নিম্নলিখিতটি দেখা উচিত।

গুগল ক্রোম বিকাশকারী সরঞ্জামদণ্ড

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

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

workbox.routing.registerRoute ('HTTP: // লোকালহোস্ট: 8000 / টোডোস', ওয়ার্কবক্স.স্ট্রেটিজ.net ওয়ার্ক ফার্স্ট ())

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

নেটওয়ার্ক প্রথম কৌশল

এখন অ্যাপটি লোড হচ্ছে না কারণ আমরা এখনও দুটি গুরুত্বপূর্ণ অংশ অনুপস্থিত। আমরা এখনও ক্যাশে করি না

  1. আমাদের স্থানীয় বিকাশকারী সার্ভার দ্বারা সরবরাহ করা জেএস বান্ডিল।
  2. Index.html ফাইল

কাস্টম-পরিষেবা-কর্মী.জগুলিতে নিম্নলিখিত কোডটি যুক্ত করুন

workbox.routing.registerRoute (
/\.(?:js|css|html)$/,
ওয়ার্কবক্স.স্ট্রেটিজ.net ওয়ার্ক ফার্স্ট (),
)
workbox.routing.registerRoute (
"এইচটিটিপি: // লোকালহোস্ট: 3000",
ওয়ার্কবক্স.স্ট্রেটিজ.net ওয়ার্ক ফার্স্ট ()
)

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

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

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

ক্রোম দেব সরঞ্জাম উইন্ডোতে ওয়ার্কবক্স লগ

ওয়ার্কবক্সের সাহায্যে বিলম্বিত POST ডেটা কার্যকর করুন

ঠিক আছে, পরবর্তী: আমরা কীভাবে কোনও নেটওয়ার্ক সংযোগ ছাড়াই সার্ভারে ডেটা পাঠাতে পারি?

প্রথমে অনলাইনে ডেটা অনলাইনে পাওয়ার জন্য একটি উপায় সেট আপ করা যাক এবং নিশ্চিত হয়ে নিন যে এটি কার্যকর হয়েছে। আপনার টোডো উপাদানটিতে আপনার অ্যাডটোডো ফাংশনটি আপডেট করুন যাতে এটি দেখতে দেখতে:

আমরা মাত্র সেটস্টেটের জন্য একটি কলব্যাক হ্যান্ডলার যুক্ত করেছি যাতে স্থিতি আপডেট হওয়ার পরে আমাদের অবহিত করা যায়। এই মুহুর্তে আমরা নতুন টোডো দিয়ে db.json আপডেট করার জন্য জসন সার্ভারে একটি পোস্টের অনুরোধ পাঠিয়েছি।

একটি নতুন টাস্ক জমা দিন, db.json খুলুন এবং আপনার নতুন জিনিসটি আপনার অবজেক্টের অ্যারেতে যুক্ত হওয়া উচিত।

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

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

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

আমাদের জন্য ব্যাকগ্রাউন্ডসাইঙ্ক স্টাফের জন্য কাস্টম-পরিষেবা-কর্মী.জেজে কিছু কোড যুক্ত করতে হবে। নিম্নলিখিত কোডটি ফাইলটিতে যুক্ত করুন:

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

অবশেষে, আমরা POST পদ্ধতিটি ব্যবহার করে একটি নতুন রুটটি নিবন্ধভুক্ত করি এবং যে কৌশলটি আমরা ক্যাশে ব্যবহার করতে চাই সেটি সেট আপ করি set এটি আমরা ইতিমধ্যে যা করেছি তার সাথে অনেকটা অনুরূপ, আমরা অনুরোধের ধরণটি সংজ্ঞায়িত করি এবং আমাদের কৌশলটির জন্য একটি প্লাগইন সংজ্ঞায়িত করি।

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

ওয়ার্কবক্স একটি কাতারে ব্যর্থ অনুরোধটি যুক্ত করে

আপনি ক্রোম ডেভটুলস উইন্ডোর অ্যাপ্লিকেশন ট্যাবে ইনেক্সেক্সড ডিবি অনুসন্ধান করে যুক্ত অনুরোধটি দেখতে পারেন। ইনডেক্সডডিবি ড্রপ-ডাউন মেনুতে তালিকাভুক্ত সাব-ডাইরেক্টরিগুলি খুলুন এবং আপনার দেখতে হবে যে অনুরোধটি সংরক্ষণ হয়েছে এবং এটি খেলার জন্য অপেক্ষা করছে waiting

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

ওয়ার্কবক্স লগ বিশদ যে ব্যর্থ অনুরোধ পুনরাবৃত্তি এবং জমা দেওয়া হয়েছিল

উপরের চিত্রটি দেখায় যে ওয়ার্কবক্স একটি সিঙ্ক্রোনাইজেশন অনুরোধটি পাওয়ার মুহুর্তে ব্যর্থ অনুরোধটি খেলবে এবং আপনাকে অনুরোধটি সফল হয়েছিল কিনা তা নিশ্চিত করে mation আপনি এখন db.json তাকান, আপনি দেখতে পাবেন যে নতুন টাস্কটি ফাইলটিতে যুক্ত করা হয়েছে।

ঠিক আছে, চলুন। আমাদের কাছে এখন পরিষেবা প্রতিনিধির ব্যর্থ অনুরোধগুলি পুনরাবৃত্তি করার একটি উপায় রয়েছে।

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

স্থির সম্পদ আগাম সংরক্ষণ করুন

এটিই হবে শেষ পদক্ষেপ। এই বিভাগটি সিআরএ তৈরির প্রক্রিয়াতে পরিবর্তন করে সার্ভিস ওয়ার্কার ফাইলকে ডাব্লু-প্রাক-স্পেসির পরিবর্তে ওয়ার্কবক্স ব্যবহার করে উত্পন্ন করতে বাধ্য করে।

প্রথমে নিম্নলিখিত প্যাকেজগুলি ইনস্টল করুন: ওয়ার্কবক্স-ওয়েবপ্যাক-প্লাগইন এবং পথ।

প্যাকেজ.জসন ফাইলটি খুলুন এবং স্টার্টআপ স্ক্রিপ্টের মতো "রিঅ্যাক্ট-স্ক্রিপ্টস" এর পরিবর্তে "রিঅ্যাক্ট-অ্যাপ্লিকেশন-রিওয়ায়ার্ড" দিয়ে চলার জন্য বিল্ড স্ক্রিপ্টটি সম্পাদনা করুন।

শেষ অবধি, ফাইলটি কনফিগার করুন - ওভাররাইড.জেগুলি খুলুন এবং নীচে এটি সম্পাদনা করুন:

এই ফাইলটি করার জন্য কয়েকটি জিনিস রয়েছে।

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

আমরা আমদানি ওয়ার্কবক্সফ্রম নামে একটি বিকল্পও অফার করি এবং এটি অক্ষম করে দিয়েছি।

এটি এমন একটি বিকল্প যা উল্লেখ করে যে ওয়ার্কবক্সটি কোথাও থেকে আমদানি করা উচিত নয় যেহেতু আমরা এটি আমাদের এসডাব্লু স্ক্রিপ্টের কোনও সিডিএন থেকে সরাসরি অনুরোধ করি।

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

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

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

উপসংহার

আমরা নিম্নলিখিত লক্ষ্যগুলি অর্জন করেছি:

  1. রিঅ্যাক্ট-অ্যাপ-রি-ওয়্যার ব্যবহার করতে সিআরএ বিল্ডটি কনফিগার করুন
  2. কোনও পরিষেবা কর্মী তৈরি করতে ওয়ার্কবক্স ব্যবহার করতে বিল্ডটি কাস্টমাইজ করতে রিঅ্যাক্ট-অ্যাপ-রিওয়ার্ড ব্যবহার করুন। ওয়ার্কবক্স ওয়েবপ্যাক প্লাগইন ব্যবহার করে এটি অর্জন করা হয়েছিল। বিল্ড প্রক্রিয়া এখন স্বয়ংক্রিয়ভাবে সমস্ত স্থিতিশীল সম্পদ ক্যাশে করে।
  3. একটি খুব সাধারণ টুডো অ্যাপ্লিকেশন তৈরি করুন
  4. ওয়ার্কবক্সের সাহায্যে টোডো অ্যাপ্লিকেশনটির জন্য অফলাইন কার্যকারিতা কার্যকর করুন। অফলাইন কার্যকারিতা যার জন্য আমরা লক্ষ্য করি: ক) পুনরুদ্ধারকৃত সম্পদগুলি ক্যাশে করুন যাতে তাদের অফলাইনে উপলব্ধ করা যায় খ) অফলাইনে পোস্টের পোস্টের অনুমতি দিন

অ্যাপোর কার্যকারী সংস্করণ রয়েছে এমন রেপোর লিঙ্কটি এখানে। আপনি এটি ক্লোন করতে এবং এটির সাথে খেলতে পারেন।

এখানে টুইটারে আমাকে অনুসরণ করুন। আমাকে এখানে গিটহাবে অনুসরণ করুন