কিভাবে 2024 সালে ব্লগার সাইটের জন্য একটি PWA (প্রগ্রেসিভ ওয়েব অ্যাপ) তৈরি করবেন

আমাদের সর্বশেষ নির্দেশিকা সহ 2023 সালে আপনার ব্লগার সাইটের জন্য একটি রূপান্তরমূলক অডিসিতে যাত্রা করার জন্য প্রস্তুত হন: "ব্লগার সাইটগুলির জন্য চূড়ান্ত PWA (প্রগতিশীল ওয়েব অ্যাপ) তৈরি করা।" এটি শুধু একটি আপডেট নয়; এটি পিডব্লিউএ তৈরির প্রক্রিয়ার একটি নতুন উদ্ভাবন।

নতুন দিগন্ত কি? মাল্টিপল ক্লাউডফ্লেয়ার ওয়ার্কার অ্যাপ – এখন, শুধুমাত্র একটি সুবিন্যস্ত রুট আপনাকে সেখানে নিয়ে যাবে। আমাদের সরলীকৃত পদ্ধতির জন্য ধন্যবাদ, ফাইল আপডেট পার্কে হাঁটার জন্য পরিণত হয়েছে। আমরা আপনার কর্মীদের জন্য ES মডিউলগুলির কমনীয়তাও গ্রহণ করেছি।

তবে একটি দুর্দান্ত সমাপ্তি রয়েছে: আমরা গিটহাব এবং statically.io নির্ভরতাকে বিদায় জানাচ্ছি। আপনার যা কিছু প্রয়োজন তা একক, শক্তিশালী ক্লাউডফ্লেয়ার ওয়ার্কার অ্যাপের মধ্যে সুরেলাভাবে বান্ডিল করা হয়েছে। এটি 2023 সালে আপনার ব্লগার সাইটের জন্য একটি নতুন যুগের সূচনা, যেখানে সম্ভাবনার কোন সীমা নেই। এই উত্তেজনাপূর্ণ যাত্রায় আমাদের সাথে যোগ দিন এবং PWA হিসাবে আপনার ওয়েবসাইটের পুনর্জন্মের সাক্ষী হোন যা আগের মতো জ্বলেনি।

ব্লগারের জন্য কিভাবে একটি PWA তৈরি করবেন

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

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

এই প্রক্রিয়াটির জন্য ক্লাউডফ্লেয়ারের একীকরণ সহ একটি কাস্টম ডোমেনের প্রয়োজন এবং এটি এই প্রক্রিয়ার সাথে .blogspot সাবডোমেনে করা যাবে না। .blogspot দিয়ে আপনি পরিষেবা কর্মী সেট আপ করতে পারবেন না।

সীমাবদ্ধতা

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

প্রয়োজনীয়তা

আমরা শুরু করার আগে, PWA সক্রিয় করার জন্য প্রয়োজনীয় কিছু জিনিস রয়েছে:

DNS অবশ্যই ক্লাউডফ্লেয়ার দ্বারা পরিচালিত হতে হবে (দ্রষ্টব্য: প্রক্সি সক্ষম হতে হবে)।
1:1 ন্যূনতম আকারের এক্সটেনশন সহ 512x512 অনুপাতের একটি ব্লগ আইকন .png এক্সটেনশন
540x720 এক্সটেনশনে .png (ঐচ্ছিক) আকারের আপনার ওয়েবপৃষ্ঠাগুলির জন্য পূর্বরূপ চিত্রগুলি ।
Windows, Linux, macOS, ইত্যাদি চালু থাকা একটি কম্পিউটার ।

প্রয়োজনীয় সরঞ্জাম ইনস্টল করা হচ্ছে

আপনাকে আপনার সিস্টেমে এই চারটি টুল ইনস্টল করতে হবেঃ Visual Studio Code, Node.js, Wrangler CLI এবং Git.

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

ভিজ্যুয়াল স্টুডিও কোড ইনস্টল করা হচ্ছে

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

ধাপ ১: অফিসিয়াল ভিজ্যুয়াল স্টুডিও কোড ওয়েবসাইট দেখুন (https://code.visualstudio.com/) এবং আপনার অপারেটিং সিস্টেমের জন্য ইনস্টলার ডাউনলোড করুন।

ধাপ ২: ইনস্টলারটি চালান এবং সেটআপ নির্দেশাবলী অনুসরণ করুন। আপনি নির্দিষ্ট এক্সটেনশন এবং থিম নির্বাচন করে আপনার ইনস্টলেশন কাস্টমাইজ করতে পারেন।

ধাপ ৩: VS কোড খুলুন এবং এর বৈশিষ্ট্যগুলি অন্বেষণ করুন। আপনার উন্নয়ন পরিবেশকে আরও উন্নত করতে আপনি ভিজ্যুয়াল স্টুডিও কোড মার্কেটপ্লেস থেকে অতিরিক্ত এক্সটেনশন ইনস্টল করতে পারেন।

Node.js ইনস্টল করা হচ্ছে

Node.js হল একটি রানটাইম এনভায়রনমেন্ট যা আপনাকে সার্ভার সাইডে জাভাস্ক্রিপ্ট কোড এক্সিকিউট করতে দেয়। এটি স্কেলযোগ্য নেটওয়ার্ক অ্যাপ্লিকেশন তৈরির জন্য ব্যাপকভাবে ব্যবহৃত হয় এবং আধুনিক ওয়েব ডেভেলপমেন্টের জন্য অপরিহার্য।

আপনি 16.13.0 সংস্করণের Node.js ইনস্টল করতে হবে

ধাপ ১: অফিসিয়াল Node.js ওয়েবসাইট দেখুন (https://nodejs.org/) এবং সর্বশেষ সংস্করণ ডাউনলোড করুন।

ধাপ ২: ইনস্টলারটি চালান এবং অন-স্ক্রীন নির্দেশাবলী অনুসরণ করুন। Node.js-এর মধ্যে রয়েছে npm (নোড প্যাকেজ ম্যানেজার), যা জাভাস্ক্রিপ্ট প্যাকেজ এবং নির্ভরতা পরিচালনার জন্য একটি গুরুত্বপূর্ণ হাতিয়ার।

ধাপ ৩: ইনস্টলেশন যাচাই করতে, আপনার কমান্ড প্রম্পট বা টার্মিনাল খুলুন এবং টাইপ করুন node -v এবং npm -v. আপনি ইনস্টল সংস্করণ দেখতে পারবেন.

Wrangler CLI ইনস্টল করতে, যা ক্লাউডফ্লেয়ার কর্মীদের সাথে কাজ করার একটি সরঞ্জাম, এই পদক্ষেপগুলি অনুসরণ করুন:

ধাপ ১: আপনার কমান্ড প্রম্পট বা টার্মিনাল খুলুন।

ধাপ ২: Node.js এবং npm ইনস্টল হয়ে গেলে, আপনার কমান্ড প্রম্পট বা টার্মিনাল খুলুন এবং বিশ্বব্যাপী Wrangler CLI ইনস্টল করতে নিম্নলিখিত কমান্ডটি টাইপ করুন:

npm install -g wrangler

এই কমান্ডটি আপনার সিস্টেমে Wrangler CLI ডাউনলোড এবং ইনস্টল করবে।

ধাপ ৩: Wrangler সফলভাবে ইনস্টল করা হয়েছে তা যাচাই করতে, নিম্নলিখিত কমান্ডটি চালান:

wrangler --version

আপনি সফল ইনস্টলেশন নিশ্চিত করে টার্মিনালে প্রদর্শিত র্যাংলারের সংস্করণ নম্বর দেখতে পাবেন।

Git ইনস্টল করা হচ্ছে

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

ধাপ ১: অফিসিয়াল গিট ওয়েবসাইট থেকে আপনার অপারেটিং সিস্টেমের জন্য গিট ইনস্টলারটি ডাউনলোড করুন (https://git-scm.com/).

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

ধাপ ৩: ইনস্টলেশন যাচাই করতে, আপনার কমান্ড প্রম্পট বা টার্মিনাল খুলুন এবং টাইপ করুন git --version. আপনার ইনস্টল করা গিট সংস্করণটি দেখতে হবে।

আপনার সিস্টেমে ভিজ্যুয়াল স্টুডিও কোড, Node.js, Wrangler CLI এবং Git ইনস্টল করার সাথে, আপনি এখন পরবর্তী পদক্ষেপগুলি অনুসরণ করতে প্রস্তুত৷

Wrangler লগইন করুন

কমান্ড লাইন থেকে কর্মীদের মোতায়েন করার জন্য আপনাকে Wrangler এর সাথে আপনার ক্লাউডফ্লেয়ার অ্যাকাউন্টকে প্রমাণীকরণ করতে হবে।

ধাপ ১: কমান্ড প্রম্পট বা টার্মিনাল খুলুন এবং নিম্নলিখিত টাইপ করুন:

wrangler login

ধাপ ২: এটি আপনার ব্রাউজারে একটি পৃষ্ঠা খুলবে। আপনার ক্লাউডফ্লেয়ার অ্যাকাউন্টে লগইন করুন এবং এটিতে অ্যাক্সেসের অনুমতি দিন।

ধাপ ৩: আপনি সফলভাবে লগ ইন করেছেন কিনা তা নিশ্চিত করতে, আপনি নিম্নলিখিত টাইপ করতে পারেন:

wrangler whoami

It আপনার ক্লাউডফ্লেয়ার অ্যাকাউন্ট ইমেল ঠিকানা, অ্যাকাউন্ট আইডি, স্কোপ, ইত্যাদি দেখাবে।

Repository ক্লোন করুন

শুরু করতে, নিম্নলিখিত কমান্ডটি ব্যবহার করে আপনার স্থানীয় মেশিনে এই Repository ক্লোন করুন:

git clone https://github.com/kumardeo/blogger-pwa.git

Dependencies ইনস্টল করুন

ধাপ ১: প্রকল্প ডিরেক্টরিতে নেভিগেট করুন:

cd blogger-pwa

ধাপ ২: ভিজ্যুয়াল স্টুডিও কোডে ফোল্ডার খুলুন:

code .

ধাপ ৩: ভিজ্যুয়াল স্টুডিও কোডে টার্মিনাল খুলুন।

ধাপ ৪: প্রকল্পের Dependencies ইনস্টল করুন:

npm install

পরিবর্তন করা

এখন, আপনাকে প্রকল্প ফোল্ডারে পরিবর্তন করতে হবে যেমন আপনার ফেভিকন, স্ক্রিনশট যোগ করা, অ্যাপ কনফিগার করা ইত্যাদি।

ফেভিকন যোগ করুন

ধাপ ১: .png ন্যূনতম আকারের সাথে এক্সটেনশনে আপনার ব্লগের জন্য একটি আইকন প্রস্তুত করুন 512x512.
*ফাইলটির নাম পরিবর্তন করুন favicon.png

ধাপ ২: আপনার ফাইলের সাথে ডিরেক্টরিতে favicon.png ফাইল প্রতিস্থাপন করুন । uploads favicon.png

স্ক্রিনশট যোগ করুন

স্ক্রিনশট যোগ করা ঐচ্ছিক, আপনি চাইলে এড়িয়ে যেতে পারেন।

ধাপ ১:540x720 এক্সটেনশনে আপনার ওয়েবপৃষ্ঠাগুলির আকারের কয়েকটি স্ক্রিনশট প্রস্তুত করুন .png এটি আপনার PWA এর পূর্বরূপ হিসাবে ব্যবহার করা হবে এবং এটি ইনস্টল বোতামটি দেখালে প্রদর্শিত হতে পারে।

ধাপ ২: ডিরেক্টরিতে বিদ্যমান স্ক্রিনশট মুছুন uploads > screenshots এবং সেই ডিরেক্টরিতে আপনার স্ক্রিনশট যোগ করুন।

অ্যাপ কনফিগার করুন

config.cjs আপনি রুট ডিরেক্টরিতে ফাইলে পরিবর্তন করে আপনার PWA কনফিগার করতে পারেন ।

/** @type {import("./types").Config} */
const config = {
  version: "1.0",
  name: "Plus UI",
  shortName: "Plus UI",
  description: "Hello World!",
  direction: "auto",
  language: "en-US",
  backgroundColor: "#fff",
  themeColor: "#fff",
  display: "standalone",
  orientation: "any",
  scope: "/",
  startUrl: "/?utm_source=homescreen",
  screenshotSize: "540x720",
  appleStatusBarStyle: "black-translucent",
  preferRelatedApplications: false,
  shortcuts: [
    {
      name: "My Shortcut",
      shortName: "My ShortName",
      description: "My Shortcut description goes here...",
      url: "/search/label/my-shortcut.html?utm_source=homescreen"
    }
  ]
};

module.exports = config;

আরও পড়ুন কনফিগারেশন সম্পর্কে.

wrangler.toml সম্পাদনা করুন

/app/* এখন, জেনারেট করা স্ট্যাটিক ফাইলগুলি পরিবেশন করার জন্য আপনাকে কর্মী অ্যাপে রুট করতে হবে ।

এটি করতে, wrangler.toml ফাইল খুলুন এবং রুট প্রতিস্থাপন করুন।

  [env.production]
routes = [
  # zone_name = "fineshopdesign.com"
  # Replace 'fineshopdesign.com' with your domain name (must be added in Cloudflare Account)
  # e.g.: zone_name = "example.com"
  #
  # pattern = "plus-ui.fineshopdesign.com/app/*"
  # Replace 'plus-ui.fineshopdesign.com' with your blogger subdomain and domain (domain name must be same as zone_name)
  # e.g.: pattern = "www.example.com/app/*"
  { pattern = "plus-ui.fineshopdesign.com/app/*", zone_name = "fineshopdesign.com", custom_domain = false }
]

কর্মীদের মোতায়েন করুন

এখন, আপনার Workers অ্যাপটি Cloudflare-এ প্রোডাকশন মোডে স্থাপনের জন্য প্রস্তুত।

আপনার অ্যাপ স্থাপন করতে, আপনি প্রজেক্ট রুট ডিরেক্টরিতে নিম্নলিখিত কমান্ডটি চালাতে পারেন:

npm run deploy

এটি সমস্ত প্রয়োজনীয় ফাইল, বিভিন্ন আকারের আইকন ইত্যাদি তৈরি করবে এবং তারপর এই ফাইলগুলি কেভি স্টোরে আপলোড করবে।

একবার আপনার কর্মী অ্যাপ ক্লাউডফ্লেয়ারে স্থাপন করা হলে, আপনি ফাইলে নির্দিষ্ট রুটের মাধ্যমে আপনার স্ট্যাটিক ফাইলগুলি অ্যাক্সেস করতে পারবেন wrangler.toml

ব্লগার থিম XML সম্পাদনা করুন

এখন, আপনার ব্লগার থিম XML সম্পাদনা করার এবং প্রয়োজনীয় কোড যোগ করার সময়।

ধাপ ১: এখন ব্লগার ড্যাশবোর্ডে যান। থিম বিভাগে যান।

ধাপ ২: Edit HTML এ ক্লিক করুন।

পরবর্তী ধাপে নির্দিষ্ট কোড যোগ করুন।

মেটা ট্যাগ যোগ করুন

আপনার কর্মী অ্যাপ ডিপ্লোয় করার পর দুটি ফাইল output > metatags.html ও output > metatags-no-splash.html জেনারেট হবে।

এই দুটি ফাইলের যেকোনো একটির সমস্ত বিষয়বস্তু অনুলিপি করুন metatags.html আপনি যদি অ্যাপল ডিভাইসের জন্য স্প্ল্যাশ স্ক্রিন দেখাতে চান এবং আপনি যদি এইচটিএমএল আকার এবং নেটওয়ার্ক অনুরোধগুলি কমাতে চান তবে ব্যবহার করুন) এবং এটি নীচে পেস্ট করুন <head>, যদি আপনি এটি খুঁজে না পান তবে এটি থাকবে সম্ভবত পার্স করা হয়েছে যা <head> বিদ্যমান অনুরূপ কোড মুছুন।



এএমপি টেমপ্লেট

আপনি একটি AMP টেমপ্লেট ব্যবহার করলেই এই ধাপগুলি অনুসরণ করুন৷


  পূর্ববর্তী ধাপে আপনি যে মেটা ট্যাগ যোগ করেছেন তার ঠিক নিচে নিচের কোডটি যোগ করুন:



<script async='async' custom-element='amp-install-serviceworker' src='https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js'/>



  </body>ট্যাগের উপরে নিচের কোডগুলো পেস্ট করুন



<amp-install-serviceworker data-iframe-src='/app/fallback/' layout='nodisplay' src='/app/serviceworker.js'/>


নন-এএমপি টেমপ্লেট

আপনি যদি নন-এএমপি টেমপ্লেট ব্যবহার করেন তবেই এই ধাপগুলি অনুসরণ করুন।

পূর্ববর্তী ধাপে আপনি যে মেটা ট্যাগ যোগ করেছেন তার ঠিক নিচে নিচের কোডটি যোগ করুন:


<!--[ Start: Progressive Web App Script ]-->
<script async='true' defer='true' type='module' src='/app/pwa.js'></script>
<!--[ End: Progressive Web App Script ]-->


কাস্টম ইনস্টল বোতাম

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

আপনি যদি AMP টেমপ্লেট ব্যবহার করেন তবে আপনার এটি ব্যবহার করা উচিত নয়।

ধাপ ১: থিম xml-এর ঠিক উপরে নিচের CSS যোগ করুন </head>

<style>/*<![CDATA[*/
/*! Custom PWA install button by Fineshop Design */
.pwa-button{position:fixed;z-index:999;left:20px;bottom:75px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:50%;background:#1900ff;visibility:visible;opacity:1;transition:visibility .5s,opacity .5s}
.pwa-button[hidden]{display:flex;visibility:hidden;opacity:0}
.pwa-button:not([disabled])::before{content:'';position:absolute;z-index:-1;inset:0;background:inherit;border-radius:inherit;animation:1s cubic-bezier(0,0,.2,1) infinite pwa-button-ping}
.pwa-button svg.flash{width:22px;height:22px;fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.4}
@keyframes pwa-button-ping{75%,to{transform:scale(1.6);opacity:0}}
/*]]>*/</style>



ধাপ ২: ঠিক উপরে নিম্নলিখিত জাভাস্ক্রিপ্ট যোগ করুন </body>

<script type='module'>/*<![CDATA[*/
/*! Custom PWA install button by Fineshop Design */
(({button:t,onInstall:n})=>{let i=null;var e=()=>{i&&(t.disabled=!0,i.prompt().then(e=>{"accepted"===e.outcome&&o()}).finally(()=>{t.disabled=!1}),i=null)},l=e=>{e.preventDefault(),i=e,t.hidden=!1};const o=()=>{t.hidden=!0,t.removeEventListener("click",e),window.removeEventListener("beforeinstallprompt",l)};t instanceof HTMLElement&&(t.hidden=!0,t.addEventListener("click",e),window.addEventListener("beforeinstallprompt",l));const d=e=>{t instanceof HTMLElement&&o(),"function"==typeof n&&n(e),window.removeEventListener("appinstalled",d)};window.addEventListener("appinstalled",d)})({
  button: document.getElementById("app_install_button")||Object.assign(document.body.appendChild(document.createElement("button")),{hidden:!0,type:"button",className:"pwa-button",innerHTML:"<svg class='flash' viewBox='0 0 24 24'><path d='M6.08998 13.28H9.17998V20.48C9.17998 22.16 10.09 22.5 11.2 21.24L18.77 12.64C19.7 11.59 19.31 10.72 17.9 10.72H14.81V3.52002C14.81 1.84002 13.9 1.50002 12.79 2.76002L5.21998 11.36C4.29998 12.42 4.68998 13.28 6.08998 13.28Z' stroke-miterlimit='10'></path></svg>"}),
  onInstall(){
    /**
     * Do something on app installed
     * i.e. Display a Thank You message in UI
     */
  }
});
/*]]>*/</script>



পরিবর্তনগুলি সংরক্ষণ করুন, এখন আপনার সাইটে একটি ইনস্টল বোতাম প্রদর্শিত হবে।

পুশ বিজ্ঞপ্তি

PWA এর অন্যতম সেরা বৈশিষ্ট্য হল পুশ নোটিফিকেশন যা আপনাকে পটভূমিতে আপনার দর্শকদের কাছে বিজ্ঞপ্তি পাঠাতে দেয়।

পুশ বিজ্ঞপ্তি পাঠাতে, আমাদের তৃতীয় পক্ষের বিজ্ঞপ্তি পরিষেবাগুলি ব্যবহার করতে হতে পারে, যেমন ফায়ারবেস ক্লাউড মেসেজিং, ওয়ানসিগন্যাল, ইত্যাদি।

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

OneSignal ইন্টিগ্রেশন

AMP টেমপ্লেটের জন্য প্রযোজ্য নয় কারণ এটি OneSignal JavaScript SDK ব্যবহার করে।


  OneSignal ড্যাশবোর্ডে যান.
  আপনার বিদ্যমান ওয়েব অ্যাপে যান বা তাদের ডকুমেন্টেশন ব্যবহার করে একটি নতুন অ্যাপ তৈরি করুন।
  অ্যাপ সেটিংসে যান।
  একীকরণ চয়ন করুন' সেটিংসে 'সাধারণ সাইট' নির্বাচন করুন।
  
    অ্যাডভান্স পুশ সেটিংস'-এ 'সার্ভিস ওয়ার্কার্স'-এ টগল করুন।
    

    নীচে দেওয়া ক্ষেত্রগুলি ইনপুট করুন:
    

    পরিষেবা কর্মী ফাইলগুলির পথ: /app/
    

    প্রধান পরিষেবা কর্মী ফাইলের নাম: onesignalworker.js
    

    আপডেটার পরিষেবা কর্মী ফাইলের নাম : onesignalworker.js
    

    পরিষেবা কর্মী নিবন্ধন সুযোগ: /app/onesignal/
  

  অ্যাপের অ্যাপ আইডি খুঁজুন এবং এটি নোট করুন।
  খোলুন config.cjs ফাইল।
  
    নিম্নলিখিত অংশ খুঁজুন:
    

    
  pwa: {
    consoleLogs: true,
    oneSignalEnabled: false,
    oneSignalConfig: {
      appId: "<appId>",
      allowLocalhostAsSecureOrigin: true
    }
  }

  
  
    *চিহ্নিত অংশগুলি প্রতিস্থাপন করুন, যেমন আপনার OneSignal অ্যাপ আইডি দিয়ে
    
false এখানে একটি উদাহরণ দেওয়া হল: true
    
 <appId>
    

    
    
    ...
    consoleLogs: true,
    oneSignalEnabled: true,
    oneSignalConfig: {
      appId: "********-****-****-****-************",
      allowLocalhostAsSecureOrigin: true
    }
    ...

  
  ব্যবহার করে আপনার কর্মী স্থাপন করুন npm run deploy.


টেমপ্লেট XML-এ OneSignal দ্বারা প্রদত্ত কোনো কোড যোগ করবেন না কারণ আমি এটি ইতিমধ্যেই প্রয়োজন অনুযায়ী যোগ করেছি।

অ্যাপ আপডেট করা হচ্ছে

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

পরিবর্তনগুলি টানুন:


git pull -u origin main


আপনার পরিবর্তন করুন

কর্মী মোতায়েন:


npm run deploy


আপনাকে আপনার ক্লাউডফ্লেয়ার ড্যাশবোর্ড থেকে ক্যাশে পরিষ্কার করতে হতে পারে।

লাইসেন্স

@kumardeo/blogger-pwa MIT লাইসেন্সের লাইসেন্সপ্রাপ্ত

রিপোর্টিং সমস্যা

আপনি যদি কোনো সমস্যার সম্মুখীন হন বা এটি প্রত্যাশিতভাবে কাজ না করে, আপনি এই GitHub সংগ্রহস্থলে একটি সমস্যা খুলতে পারেন: @kumardeo/blogger-pwa

আমি সমস্যাগুলি সমাধান করার চেষ্টা করব এবং পরিবর্তনগুলি কমিট করব৷

উপসংহার

এটি আপনার ব্লগার ওয়েবসাইটের জন্য একটি PWA (প্রগ্রেসিভ ওয়েব অ্যাপ) তৈরির বিষয়ে। আমি আপনি এই আর্টিকেল ভোগ করেন। এই নিবন্ধটি শেয়ার করুন. এবং আপনি যদি কোন বিভাগে সমস্যার সম্মুখীন হন বা আপনার কোন প্রশ্ন থাকে তাহলে কমেন্ট বক্সে আমাদের জিজ্ঞাসা করুন। ধন্যবাদ!









#Add-ons

একটি মন্তব্য পোস্ট করুন

🌟 সম্মানিত ষ্ক্রিপ্ট ষ্টোর ৩৬০ পাঠকরা! 🌟

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

১. গোপনীয়তা রক্ষাঃ অনুগ্রহ করে আপনার মন্তব্যে সংবেদনশীল বা ব্যক্তিগত তথ্য শেয়ার করা থেকে বিরত থাকুন।

২. ইতিবাচকতা ছড়ানোঃ ঘৃণাত্মক বক্তৃতা বা আপত্তিজনক ভাষার প্রতি আমরা শূন্য-সহনশীলতার নীতি বজায় রাখি। আসুন আমাদের কথোপকথনকে সম্মানজনক এবং বন্ধুত্বপূর্ণ রাখি।

৩. পছন্দের ভাষাঃ ইংরেজি বা বাংলা’তে নির্দ্বিধায় নিজেকে প্রকাশ করুন। এই দুটি ভাষা আমাদের পরিষ্কার এবং সুসংগত আলোচনা বজায় রাখতে সাহায্য করবে।

৪. বৈচিত্র্যকে সম্মানঃ একটি অন্তর্ভুক্তিমূলক পরিবেশ গড়ে তোলার জন্য, আমরা দয়া করে অনুরোধ করছি যে আপনি আপনার মন্তব্যে ধর্মীয় বিষয় নিয়ে আলোচনা করা এড়িয়ে চলুন।

মনে রাখবেন, আপনার মতামতগুলি মূল্যবান, এবং আমরা আমাদের পাঠকদের সবার জন্য একটি স্বাগত জানানোর জায়গা করে তোলার জন্য আপনার প্রতিশ্রুতির প্রশংসা করি৷ আসুন গঠনমূলক এবং সম্মানজনক আলোচনার মাধ্যমে একসাথে শিখতে এবং বৃদ্ধি পেতে থাকি।

আমাদের ষ্ক্রিপ্ট ষ্টোর ৩৬০ ওয়েবসাইটে যুক্ত থাকার জন্য আপনাকে ধন্যবাদ! 🌟

আপত্তিজনক অভিযোগ করুন

প্লাস Ui 2.6.3 | ব্লগার অটো থিম চেঞ্জার কোড অ্যাডন

SVG Icon Sets script store 360

স্ক্রিপ্ট ষ্টোর ৩৬০

অটো থিম পরিবর্তন

অটো থিম

কিভাবে 2024 সালে ব্লগার সাইটের জন্য একটি PWA (প্রগ্রেসিভ ওয়েব অ্যাপ) তৈরি করবেন

ব্লগারের জন্য কিভাবে একটি PWA তৈরি করবেন

সীমাবদ্ধতা

প্রয়োজনীয়তা

প্রয়োজনীয় সরঞ্জাম ইনস্টল করা হচ্ছে

ভিজ্যুয়াল স্টুডিও কোড ইনস্টল করা হচ্ছে

Node.js ইনস্টল করা হচ্ছে

Git ইনস্টল করা হচ্ছে

Wrangler লগইন করুন

Repository ক্লোন করুন

Dependencies ইনস্টল করুন

পরিবর্তন করা

ফেভিকন যোগ করুন

স্ক্রিনশট যোগ করুন

অ্যাপ কনফিগার করুন

wrangler.toml সম্পাদনা করুন

কর্মীদের মোতায়েন করুন

ব্লগার থিম XML সম্পাদনা করুন

মেটা ট্যাগ যোগ করুন

এএমপি টেমপ্লেট

নন-এএমপি টেমপ্লেট

কাস্টম ইনস্টল বোতাম

পুশ বিজ্ঞপ্তি

OneSignal ইন্টিগ্রেশন

অ্যাপ আপডেট করা হচ্ছে

লাইসেন্স

রিপোর্টিং সমস্যা

উপসংহার

একটি মন্তব্য পোস্ট করুন

How to add license key protection in Blogger script store 360

ওয়েবসাইট কি? এবং কিভাবে ওয়েবসাইট থেকে ঘরে বসে ইনকাম করবেন?

SVG Icon Sets script store 360

মোঃ মোবারক ভূঁইয়া