চলুন ফ্লাটার ইনঅ্যাপওয়েবভিউ (InAppWebView) দিয়ে ওয়েবভিউ কন্টেন্ট ব্লকার তৈরি করি

01 October 2023

1 min read

এই ব্লগ পোস্টে, আমরা আপনাকে Flutter InAppWebView ব্যবহার করে কাস্টম কন্টেন্ট ব্লকার তৈরি করা দেখাবো 

--—লার্নিং //

এই আর্টিকেলে, আমরা flutter_inappwebview প্লাগইন ব্যবহার করে আমাদের ওয়েবভিউ ইন্সট্যান্সের জন্য একটি কাস্টম কনটেন্ট ব্লকার তৈরি করা শিখবো।

কন্টেন্ট ব্লকার সাধারণত বিজ্ঞাপন ব্লক করার জন্য ব্যবহার করা হয়, কিন্তু আপনি অন্য কোনো কন্টেন্ট ব্লক করতেও ব্যবহার করতে পারেন। ব্লকিং বিহেভিয়ারের মধ্যে রয়েছে এলিমেন্টস হাইড করা, লোড ব্লক করা এবং iOS এবং macOS-এ, WebView রিকুয়েস্ট থেকে কুকি রিমুভ করা।

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

InAppWebViewSettings ক্লাসের contentBlockers প্রোপার্টির মাধ্যমে আমরা ContentBlocker এর এমন ইন্সট্যান্সের একটি লিস্ট তৈরি করতে পারি ওয়েবভিউয়ের ব্যবহারের জন্য।


দ্যা কনটেন্টব্লকার ক্লাস (The ContentBlocker class)

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

এখানে একটি বেসিক উদাহরণ দেওয়া হলো:









এই উদাহরণে, কন্টেন্টব্লকার প্রতিটি ছবি এবং প্রতিটি ইউআরএলের জন্য স্টাইলশীট লোড হওয়া ব্লক করে।



অ্যাড ট্রিগারস টু ইওর কনটেন্ট ব্লকার (Add triggers to your Content Blocker)

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

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








ডীপ ট্রিগার কাস্টমাইজেশনের জন্য, আপনি ContentBlockerTrigger এর অন্যান্য প্রোপার্টিগুলো ব্যবহার করতে পারেন:

  • urlFilterIsCaseSensitive: যদি URL ম্যাচিং কেস-সেনসিটিভ হয়। বাই ডিফল্ট, এটি কেস-সেনসিটিভ। 

  • resourceType: "ContentBlockerTriggerResourceType" এর একটি লিস্ট যা রিসোর্স টাইপকে প্রতিনিধিত্ব করে (যেভাবে ব্রাউজার রিসোর্স ব্যবহার করতে চায়) যা রুলসের সাথে ম্যাচ করা উচিত। যদি এটি নির্দিষ্ট করা না থাকে, তাহলে রুলটি সমস্ত রিসোর্স টাইপের সাথে মিলে যায়। 

  • ifDomain: URL এর ডোমেনের সাথে মিলে যাওয়া স্ট্রিংগুলোর একটি তালিকা; এটি নির্দিষ্ট ডোমেনের একটি লিস্টের অ্যাকশান লিমিট করে। ভ্যালুগুলো অবশ্যই ছোট হাতের ASCII বা Punycode হতে হবে non-ASCII অক্ষরগুলোর জন্য। ডোমেইন এবং সাবডোমেন ম্যাচের সামনে * যোগ করুন। এটি unlessDomain এর সাথে ব্যবহার করা যাবে না।

  • unlessDomain: একটি URL এর ডোমেনের সাথে মিলে যাওয়া স্ট্রিংগুলোর একটি লিস্ট; এটি প্রদত্ত লিস্টের ডোমেন ছাড়া যে কোনো সাইটে কাজ করে। ভ্যালুগুলো অবশ্যই ছোট হাতের ASCII বা Punycode হতে হবে non-ASCII অক্ষরগুলোর জন্য। ডোমেইন এবং সাবডোমেন ম্যাচের সামনে * যোগ করুন। এটি ifDomain এর সাথে ব্যবহার করা যাবে না। 

  • loadType: ContentBlockerTriggerLoadType এর একটি লিস্ট যা দুটির মধ্যে একটি মিউচুয়ালি এক্সক্লুসিভ ভ্যালুকে অন্তর্ভুক্ত করে। যদি নির্দিষ্ট করা না থাকে, তাহলে রুলটি সমস্ত লোড টাইপের সাথে মিলে যায়। ContentBlockerTriggerLoadType.FIRST_PARTY ট্রিগার হয় যখন রিসোর্সটির মেইন পেজের রিসোর্সের মতো একই স্কিম, ডোমেন এবং পোর্ট থাকে। ContentBlockerTriggerLoadType.THIRD_PARTY ট্রিগার হয় যখন রিসোর্সটির ডোমেন আর মেইন পেজ রিসোর্সের ডোমেন এক না হয়।

  • ifTopUrl: মেইন ডকুমেন্ট URL-এর সাথে মিলে যাওয়া স্ট্রিং এর একটি লিস্ট; এটি URL প্যাটার্নের একটি নির্দিষ্ট লিস্টের অ্যাকশানকে লিমিট করে। ভ্যালুগুলো অবশ্যই ছোট হাতের ASCII বা Punycode হতে হবে non-ASCII অক্ষরগুলোর জন্য। এটি unlessTopUrl এর সাথে ব্যবহার করা যাবে না। 

  • unlessTopUrl: মেইন ডকুমেন্ট URL-এর সাথে মিলে যাওয়া স্ট্রিংয়ের একটি অ্যারে; এটি প্রদত্ত লিস্টের URL প্যাটার্ন ব্যতীত যেকোনো সাইটে কাজ করে। ভ্যালুগুলো অবশ্যই ছোট হাতের ASCII বা Punycode হতে হবে non-ASCII অক্ষরগুলোর জন্য। এটি ifTopUrl এর সাথে ব্যবহার করা যাবে না। 

  • loadContext: স্ট্রিংগুলির একটি অ্যারে যা লোডিং কনটেক্সটকে নির্দিষ্ট করে৷ 

  • ifFrameUrl: iframes এর URL এর সাথে ম্যাচ করে এমন রেগুলার এক্সপ্রেশনের একটি লিস্ট।

প্রতিটি নির্দিষ্ট প্রোপার্টির জন্য কোড ডকুমেন্টেশন চেক করুন; কোন প্ল্যাটফর্ম সেই ফিচারকে সাপোর্ট করে তা খুঁজে বের করতে।


অ্যাড অ্যাকশনস টু ইউর কন্টেন্ট ব্লকার (Add actions to your Content Blocker) 

যখন একটি ট্রিগার একটি প্রোপার্টির সাথে ম্যাচ করে, তখন WebView সমস্ত ট্রিগারকে ইভালুয়েট করে এবং ক্রমানুসারে অ্যাকশান এক্সেকিট করে।

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

অ্যাকশনের জন্য শুধুমাত্র দুটি বৈধ প্রোপার্টি আছে: type এবং selector. একটি অ্যাকশন টাইপও প্রয়োজন। 

টাইপটি যদি ContentBlockerActionType.CSS_DISPLAY_NONE  হয়, তাহলে একটি selector ও প্রয়োজন; অন্যথায়, selector অপশনাল। 

এখানে একটি সিম্পল উদাহরণ দেখানো হলো:






ভ্যালিড টাইপগুলো হলো:

  • BLOCK: রিসোর্সের লোডিং বন্ধ করে। রিসোর্স ক্যাশে করা হলে, ক্যাশে ইগনোর করতে হবে। 

  • BLOCK_COOKIES: সার্ভারে পাঠানোর আগে হেডার থেকে কুকি স্ট্রিপ করে। এটি শুধুমাত্র এমন কুকিজ ব্লক করে যা অন্যথায় WebView এর প্রাইভেসী পলিসিতে গ্রহণযোগ্য। BLOCK_COOKIES কে IGNORE_PREVIOUS_RULES এর সাথে একত্রিত করা ব্রাউজারের প্রাইভেসী সেটিংসকে ওভাররাইড না করে।

  • CSS_DISPLAY_NONE: CSS সিলেক্টরের উপর ভিত্তি করে পেইজ এলিমেন্টগুলোকে হাইড করে। একটি সিলেক্টর ফিল্ডের একটি সিলেক্টর লিস্ট রয়েছে। যে ম্যাচিং এলিমেন্টের ডিসপ্লে প্রোপার্টি none এ সেট করা থাকে, তারা এটিকে হাইড করে। 

  • MAKE_HTTPS: একটি URL কে http থেকে https তে পরিবর্তন করে । যে URL এর একটি নির্দিষ্ট (ননডিফল্ট) পোর্ট এবং লিংক অন্য প্রোটোকল ব্যবহার করে সেগুলো আনএফেক্টেড থাকে। 

  • IGNORE_PREVIOUS_RULES: পূর্বে ট্রিগার করা হয়েছে এমন অ্যাকশন্গুলোকে ইগনোর করে।

প্রতিটি নির্দিষ্ট প্রোপার্টি জন্য কোড ডকুমেন্টেশন চেক করুন কোন প্ল্যাটফর্ম সেই ফিচারকে সাপোর্ট করে তা খুঁজে বের করতে।



ক্রিয়েটিং অ্যা সিম্পল অ্যাড ব্লকার (Creating a simple ad blocker)

আসুন আমরা যা শিখেছি তা ব্যবহার করে একটি সাধারণ অ্যাড ব্লকার তৈরি করি। 

































এই রুলগুলো ব্যবহার করলে গুগল অ্যাডের মতো একগুচ্ছ অ্যাড প্রদর্শনে বাধা দেবে।

অ্যাড ব্লকার ফিচার ডিসএবল বা অ্যানাবল করতে ডিসএবল/অ্যানাবল বাটনে ক্লিক করুন ।

উপসংহার

কনটেন্ট ব্লকাররা ব্যবহারকারীর গোপনীয়তাকে সম্মান করার সময় ওয়েবভিউতে কনটেন্ট ব্লক করার জন্য পারফরমেন্ট রুলস লিখতে দেয়।

সম্পূর্ণ প্রোজেক্ট কোডটি GitHub এ অ্যাভেইল্যাবল আছে। আজকের জন্য এতটুকুই। ধন্যবাদ!

Share this article

RELATED ARTICLES

What Are The Benefits Of Flutter App Development?

ফ্লাটার অ্যাপ ডেভেলপমেন্টের সুবিধা || What Are The Benefits Of Flutter App Development? || About Flutter App Benefits টেকনোলজির ব্যবহার মানুষের জীবনকে আগের তুলনায় অনেক সহজ করেছে। ধরুন, আপনি যদি কোডিং লেখা ছাড়াই, কোনো অ্যাপের মাধ্যমে , একটা লাইন ইনপুট দিলেন, আর সাথে সাথে এর নির্ভুল একটা কোড পেয়ে যান, তাহলে কি আপনার আর কোডিং শেখার  মতো কাজটি আর করতে হবে? আপনি নিশ্চয়ই আর কোডিং শিখতে যাবেন না। কেননা, মানুষ যে উপায়ে সহজে ও নির্ভুল ভাবে কোন একটি কাজ করতে পারে, সে সেটিই সবসময় ইউজ করে। তাই বর্তমানে ক

11 July 2024

1 min read

ফ্লাটার কি ফ্রন্টেড নাকি ব্যাকেন্ড? ।। Is Flutter Frontend Or Backend (Uses of Flutter)?

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

08 July 2024

1 min read

ডাটা সায়েন্টিস্ট হওয়ার ৮ টি স্টেপ

আপনার কি মনে হচ্ছে না, ডেটা সাইনটিস্ট হওয়ার এখনি সময়? একবার চারপাশে খেয়াল করুন তো! তাহলে দেখতে পাবেন ডেটা সায়েন্স এখন সব জায়গায়। একের পর এক, ওয়ার্ল্ডওয়াইড কোম্পানিগুলো সবচেয়ে ডাইভার্স প্রবলেমগুলোর সলিউশনের জন্য ডেটা সায়েন্সের দিকে ঝুঁকছে।  এই পরিস্থিতি ডেটা সাইনটিস্টদের জব সেক্টর ও স্যালারি স্ট্রাকচার কিন্তু খুবই অ্যাডভান্টেজ পজিশনে আছে। তাই আর দেরি কেন?? ৮ টি স্টেপ ফলো করে, আপনিও হতে পারেন একজন ডাটা সায়েন্টিস্ট। 1. Learn data wrangling, data visualization, and reporting  আপনি যখন ডেটা সায

15 May 2024

দ্য ফিউচার অফ আর্টিফিশিয়াল ইন্টেলিজেন্স

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

13 May 2024

অনলাইন লাইভ স্কিল ডেভেলপমেন্ট প্ল্যাটফর্ম।

ডাউনলোড করুন ওস্তাদ অ্যাপ

কমিউনিটি -এর সাথে কানেক্টেড থাকতে