সুচিপত্র:

ন্যানো 33 IoT + EC/pH/ORP + WebAPK: 8 টি ধাপ
ন্যানো 33 IoT + EC/pH/ORP + WebAPK: 8 টি ধাপ

ভিডিও: ন্যানো 33 IoT + EC/pH/ORP + WebAPK: 8 টি ধাপ

ভিডিও: ন্যানো 33 IoT + EC/pH/ORP + WebAPK: 8 টি ধাপ
ভিডিও: Arduino Nano 33 IoT - Getting Started 2024, জুলাই
Anonim
ন্যানো 33 IoT + EC/pH/ORP + WebAPK
ন্যানো 33 IoT + EC/pH/ORP + WebAPK

UfireFollow আরো লেখকের দ্বারা:

টিক স্ট্যাক এবং নোক্যান প্ল্যাটফর্মের সাথে ইসি/পিএইচ/ওআরপি ডেটা স্টোর এবং গ্রাফ করুন
টিক স্ট্যাক এবং নোক্যান প্ল্যাটফর্মের সাথে ইসি/পিএইচ/ওআরপি ডেটা স্টোর এবং গ্রাফ করুন
টিক স্ট্যাক এবং নোক্যান প্ল্যাটফর্মের সাথে ইসি/পিএইচ/ওআরপি ডেটা স্টোর এবং গ্রাফ করুন
টিক স্ট্যাক এবং নোক্যান প্ল্যাটফর্মের সাথে ইসি/পিএইচ/ওআরপি ডেটা স্টোর এবং গ্রাফ করুন
থিংসবোর্ডের সাথে আইওটি পুল মনিটরিং
থিংসবোর্ডের সাথে আইওটি পুল মনিটরিং
থিংসবোর্ডের সাথে আইওটি পুল মনিটরিং
থিংসবোর্ডের সাথে আইওটি পুল মনিটরিং
আইওটি হাইড্রোপনিক্স - পিএইচ এবং ইসি পরিমাপের জন্য আইবিএমের ওয়াটসন ব্যবহার করা
আইওটি হাইড্রোপনিক্স - পিএইচ এবং ইসি পরিমাপের জন্য আইবিএমের ওয়াটসন ব্যবহার করা
আইওটি হাইড্রোপনিক্স - পিএইচ এবং ইসি পরিমাপের জন্য আইবিএমের ওয়াটসন ব্যবহার করা
আইওটি হাইড্রোপনিক্স - পিএইচ এবং ইসি পরিমাপের জন্য আইবিএমের ওয়াটসন ব্যবহার করা

সম্পর্কে: আপনার Arduino বা Raspberry Pi প্রকল্পে pH, ORP, EC বা লবণাক্ততা পরিমাপ করার ক্ষমতা যোগ করুন। Ufire সম্পর্কে আরো

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

ধাপ 1: এই সব শর্তাবলী কি?

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

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

ধাপ 2: হার্ডওয়্যার

হার্ডওয়্যার
হার্ডওয়্যার
হার্ডওয়্যার
হার্ডওয়্যার

আমরা হার্ডওয়্যার একত্রিত করার আগে, একটি বিষয় সম্বোধন করতে হবে। ইউফায়ার আইএসই সেন্সর ডিভাইসগুলি একই আই 2 সি ঠিকানা দিয়ে আসে এবং আমরা দুটি ব্যবহার করছি, তাই একটি পরিবর্তন করতে হবে। এই প্রকল্পের জন্য, আমরা ISE বোর্ডগুলির মধ্যে একটি বাছাই করতে যাচ্ছি এবং ORP পরিমাপ করতে এটি ব্যবহার করব। এখানে ধাপগুলি অনুসরণ করে, ঠিকানাটি 0x3e এ পরিবর্তন করুন।

এখন ঠিকানা পরিবর্তন করা হয়েছে, হার্ডওয়্যার একসাথে রাখা সহজ। সমস্ত সেন্সর ডিভাইস Qwiic কানেক্ট সিস্টেম ব্যবহার করে তাই সবকিছুকে একসঙ্গে একটি শৃঙ্খলে সংযুক্ত করুন। একটি সেন্সরকে ন্যানো 33 এর সাথে সংযুক্ত করতে আপনার একটি Qwiic থেকে পুরুষ তারের প্রয়োজন হবে। তারগুলি সামঞ্জস্যপূর্ণ এবং রঙ কোডেড। ন্যানোর GND- এর সাথে কালো, +3.3V বা +5V পিনে লাল, SDA পিনে নীল যা A4, এবং A5 তে এসসিএল পিনে হলুদ।

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

যদি আপনার একটি ঘের থাকে, তাহলে এই সব ভিতরে রাখা একটি ভাল ধারণা হবে, বিশেষত জলকে বিবেচনা করা হচ্ছে।

ধাপ 3: সফটওয়্যার

এর সফ্টওয়্যার অংশটি দুটি প্রধান বিভাগে বিভক্ত: ন্যানো 33 এর ফার্মওয়্যার এবং ওয়েবপৃষ্ঠা।

মৌলিক প্রবাহ হল:

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

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

ধাপ 4: BLE পরিষেবা এবং বৈশিষ্ট্য

BLE কীভাবে কাজ করে তার প্রাথমিক বিষয়গুলি শিখতে হবে।

অনেক উপমা আছে, তাই একটি বই বাছাই করা যাক। একটি পরিষেবা একটি বই হবে, এবং একটি বৈশিষ্ট্য পৃষ্ঠা হবে। এই "BLE বই" -এ, পৃষ্ঠাগুলির কিছু বই-বহির্ভূত বৈশিষ্ট্য রয়েছে যেমন পৃষ্ঠা যা বলে তা পরিবর্তন করতে সক্ষম হওয়া এবং যখন এটি ঘটে তখন একটি বিজ্ঞপ্তি পাওয়া।

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

এই ডিভাইসের ফার্মওয়্যারে, একটি পরিষেবা রয়েছে, যা সংজ্ঞায়িত করা হয়েছে:

BLEService uFire_Service ("4805d2d0-af9f-42c1-b950-eae78304c408");

এবং দুটি বৈশিষ্ট্য:

BLEStringCharacteristic tx_Characteristic ("50fa7d80-440a-44d2-967a-ec7731ec736a", BLENotify, 20);

BLEStringCharacteristic rx_Characteristic ("50fa7d80-440b-44d2-967b-ec7731ec736b", BLEWrite, 20);

Tx_Characteristic হবে যেখানে ডিভাইসগুলি ওয়েব পেজ প্রদর্শনের জন্য EC পরিমাপের মত তথ্য পাঠায়। Rx_Characteristic হল যেখানে এটি চালানোর জন্য ওয়েবপেজ থেকে কমান্ড পাবে।

এই প্রকল্পটি ArduinoBLE লাইব্রেরি ব্যবহার করে। আপনি যদি দেখেন, আপনি দেখতে পাবেন যে একটি দম্পতি একটি চরিত্রগত ঘোষণার চেয়ে আলাদা ছিল। এই প্রকল্পটি BLEStringCharacteristic ব্যবহার করে কারণ আমরা স্ট্রিং টাইপ নিয়ে কাজ করব এবং এটি আরও সহজ, কিন্তু আপনি মুষ্টিমেয় অন্যদের মধ্যে থেকে BLECharCharacteristic বা BLEByteCharacteristic বেছে নিতে পারেন।

উপরন্তু, কিছু বৈশিষ্ট্য আছে যা আপনি বৈশিষ্ট্য দিতে পারেন। tx_Characteristic এর একটি বিকল্প হিসেবে BLENotify আছে। এর মানে হল যে আমাদের ওয়েবপেজ একটি বিজ্ঞপ্তি পাবে যখন এর মান পরিবর্তন হবে। rx_Characteristic এর BLEWrite আছে যা আমাদের ওয়েবপৃষ্ঠাকে এটি সংশোধন করার অনুমতি দেবে। অন্যরা আছে।

তারপরে এই সমস্ত জিনিসগুলিকে একসাথে বাঁধার জন্য কিছুটা কোড-আঠালো রয়েছে:

BLE.setLocalName ("uFire BLE");

BLE.setAdvertisedService (uFire_Service); uFire_Service.addCharacteristic (tx_Characteristic); uFire_Service.addCharacteristic (rx_Characteristic); BLE.addService (uFire_Service); rx_Characteristic.setEventHandler (BLEWritten, rxCallback); BLE.advertise ();

এটি কমবেশি স্ব-ব্যাখ্যামূলক, তবে আসুন কয়েকটি পয়েন্ট স্পর্শ করি।

rx_Characteristic.setEventHandler (BLEWritten, rxCallback);

যেখানে আপনি মান পরিবর্তিত হওয়ার বিষয়ে অবহিত হওয়ার সুবিধা গ্রহণ করেন। লাইনটি মান পরিবর্তন হলে rxCallback ফাংশনটি চালাতে বলে।

BLE.advertise ();

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

ধাপ 5: টেক্সট কমান্ড

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

এই প্রকল্পটি JSON ব্যবহার করবে কারণ এটি MsgPack ফরম্যাটের বিপরীতে কাজ করা একটু সহজ এবং পাঠযোগ্য, যা বাইনারি।

এটি কীভাবে একসঙ্গে সংযুক্ত হয় তার একটি উদাহরণ এখানে দেওয়া হল:

  • ওয়েবপৃষ্ঠাটি ইসি পাঠিয়ে একটি ইসি পরিমাপের জন্য ডিভাইসটি জিজ্ঞাসা করে (অথবা আরো বিশেষভাবে rx_Characteristic বৈশিষ্ট্যের জন্য ec লিখে)
  • ডিভাইস কমান্ড গ্রহণ করে এবং এটি চালায়। এটি তারপর tx_Characteristic বৈশিষ্ট্যের কাছে লিখে "{ec": 1.24} এর একটি JSON ফর্ম্যাটেড প্রতিক্রিয়া পাঠায়।
  • ওয়েবপেজ তথ্য গ্রহণ করে এবং প্রদর্শন করে

ধাপ 6: ওয়েবপেজ

এই প্রজেক্টের ওয়েবপেজটি ফ্রন্ট-এন্ডের জন্য Vue.js ব্যবহার করবে। কোন ব্যাকএন্ডের প্রয়োজন নেই। অতিরিক্তভাবে, জিনিসগুলিকে একটু সহজ রাখতে, কোনও বিল্ড সিস্টেম ব্যবহার করা হয় না। এটি সাধারণ ফোল্ডারে বিভক্ত, জাভাস্ক্রিপ্টের জন্য js, CSS এর জন্য CSS, আইকনগুলির জন্য সম্পদ। এর html অংশ বিশেষ কিছু নয়। এটি স্টাইলিংয়ের জন্য bulma.io ব্যবহার করে এবং ইউজার ইন্টারফেস তৈরি করে। বিভাগে আপনি অনেক কিছু লক্ষ্য করবেন। এটি সমস্ত CSS এবং আইকন যোগ করছে, কিন্তু বিশেষ করে একটি লাইন যোগ করছে।

এটি আমাদের ম্যানিফেস্ট.জসন ফাইল লোড করছে যা সমস্ত PWA স্টাফ ঘটায়। এটি এমন কিছু তথ্য ঘোষণা করে যা আমাদের ফোনকে বলে যে এই ওয়েবপৃষ্ঠাটি একটি অ্যাপে পরিণত হতে পারে।

জাভাস্ক্রিপ্ট যেখানে সবচেয়ে আকর্ষণীয় জিনিস ঘটে। এটি ফাইলগুলিতে বিভক্ত হয়ে গেছে, app.js- এ সব UI- সম্পর্কিত ভেরিয়েবল এবং কয়েকটি অন্যান্য জিনিসের সাথে Vue ওয়েবপেজ পাওয়ার মূল বিষয়গুলি রয়েছে। ble.js ব্লুটুথ জিনিস আছে

ধাপ 7: জাভাস্ক্রিপ্ট এবং ওয়েব ব্লুটুথ

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

এখন যদি আপনি ble.js- এ দেখেন, আপনি connect () এবং disconnect () ফাংশন দেখতে পাবেন।

কানেক্ট () ফাংশনটিতে ইউআইকে সিঙ্কে রাখার জন্য কিছু যুক্তি রয়েছে, তবে এটি বৈশিষ্ট্যগুলির উপর তথ্য প্রেরণ এবং গ্রহণের জন্য বেশিরভাগ জিনিস সেট করছে।

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

একটি সংযোগ শুরু করার কোডটি এইরকম দেখাচ্ছে:

this.device = navigator.bluetooth.requestDevice ({

ফিল্টার: [{namePrefix: "uFire"}], optionalServices: [this.serviceUuid]};

ফিল্টারগুলি: আপনি মনে করেন শুধু ফিল্টার বিভাগ ঠিক হবে, কিন্তু আপনার theচ্ছিক পরিষেবা অংশগুলিরও প্রয়োজন।

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

বাকি কোডটি পরিষেবা এবং বৈশিষ্ট্যগুলি স্থাপন করছে। লক্ষ্য করুন যে আমরা একটি কলব্যাক রুটিন সেট আপ করেছি, ফার্মওয়্যারের বিজ্ঞপ্তি কলব্যাকের মতো:

service = wait server.getPrimaryService (this.serviceUuid);

চরিত্রগত = অপেক্ষা service.getCharacteristic (this.txUuid); বৈশিষ্ট্যের জন্য অপেক্ষা করুন। startNotifications (); characteristic.addEventListener ("characteristicvaluechanged", this.value_update);

this.value_update এখন প্রতিবার tx বৈশিষ্ট্যের উপর নতুন তথ্য পাওয়া যাবে।

শেষ কাজগুলির মধ্যে একটি হল প্রতি 5 সেকেন্ডে তথ্য আপডেট করার জন্য টাইমার সেট করা।

value_update () হল একটি দীর্ঘ ফাংশন যা নতুন JSON তথ্য আসার জন্য অপেক্ষা করে এবং এর সাথে UI আপডেট করে।

ec.js, ph.js, এবং orp.js অনেক ছোট ফাংশন ধারণ করে যা তথ্য পুনরুদ্ধার এবং ডিভাইসগুলিকে ক্যালিব্রেট করার জন্য কমান্ড পাঠায়।

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

ধাপ 8: PWA অংশ

PWA অংশ
PWA অংশ

ওয়েবপেজটিকে একটি আসল অ্যাপে পরিণত করার কয়েকটি ধাপ রয়েছে। প্রগতিশীল ওয়েব অ্যাপস এই প্রজেক্ট তাদের ব্যবহার করার চেয়ে অনেক বেশি করতে পারে।

  • ওয়েবপেজ ইনস্টলেশন
  • একবার ইনস্টল হয়ে গেলে, অফলাইন অ্যাক্সেস সম্ভব
  • শুরু হয়েছে এবং একটি নিয়মিত অ্যাপের আইকন সহ একটি সাধারণ অ্যাপ হিসেবে চলে

শুরু করার জন্য, আমাদের একগুচ্ছ ফাইল তৈরি করতে হবে। প্রথমটি একটি manifest.json ফাইল। এমন কয়েকটি সাইট রয়েছে যা আপনার জন্য এটি করবে, অ্যাপ ম্যানিফেস্ট জেনারেটর, তাদের মধ্যে অন্যতম।

কিছু জিনিস বোঝার জন্য:

  • আবেদনের সুযোগ গুরুত্বপূর্ণ। আমি এই ওয়েবপেজটি ufire.co/uFire-BLE/ এ রেখেছি। তার মানে আমার আবেদনের সুযোগ হল /uFire-BLE /।
  • শুরু URL খুব গুরুত্বপূর্ণ। এটি আপনার নির্দিষ্ট ওয়েবপৃষ্ঠার পথ যা ইতিমধ্যেই অনুমিত বেস ডোমেইন সহ। সুতরাং যেহেতু আমি এটি ufire.co/uFire-BLE/ এ রেখেছি, শুরু URL হল/uFire-BLE/too।
  • ডিসপ্লে মোড অ্যাপটি কেমন দেখায় তা নির্ধারণ করবে, স্বতন্ত্র এটিকে ক্রোম বাটন বা ইন্টারফেস ছাড়াই একটি নিয়মিত অ্যাপ হিসেবে দেখাবে।

আপনি একটি json ফাইল দিয়ে শেষ করবেন। এটি অবশ্যই index.html সহ ওয়েবপেজের মূলে স্থাপন করতে হবে।

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

FavIcon জেনারেটরের দিকে যান এবং কিছু আইকন তৈরি করুন।

শেষ জিনিস হল Vue mount () ফাংশনে কিছু কোড যোগ করা।

মাউন্ট করা: ফাংশন () {যদি ('serviceWorker' ন্যাভিগেটরে)} {navigator.serviceWorker.register ('service-worker.js'); }}

এটি ব্রাউজারে কর্মীকে নিবন্ধন করবে।

আপনি যাচাই করতে পারেন যে সবকিছু কাজ করছে, এবং যদি না হয়, তাহলে হয়তো বুঝতে পারেন কেন বাতিঘর ব্যবহার করে, এটি সাইটটি বিশ্লেষণ করবে এবং আপনাকে সব ধরণের বিষয় বলবে।

যদি সবকিছু কাজ করে, যখন আপনি ওয়েবপৃষ্ঠায় যান, ক্রোম জিজ্ঞাসা করবে আপনি এটি একটি পপআপ ব্যানার দিয়ে ইনস্টল করতে চান কিনা। আপনি মোবাইল ক্রোমে থাকলে এটি ufire.co/uFire-BLE/ এ কাজ করতে পারেন। আপনি যদি একটি ডেস্কটপে থাকেন, আপনি এটি ইনস্টল করার জন্য একটি মেনু আইটেম খুঁজে পেতে পারেন।