​আসসালামুআলাইকুম বন্ধুরা, আশাকরি ভালোই আছেন। আলহামদুলিল্লাহ আমিও ভালোই আছি এবং আপনাদের মাঝে উপস্তিত হলাম নতুন একটি পোস্ট নিয়ে।
​

কি ভাবে ওয়ার্ডপ্রেস এর ওয়েবসাইটে কাষ্টম ডিজাইনেরর “Install As App” popup দেখাবেন।

​

​

আপনারা চাইলে প্লাগিন দিয়ে সেটাপ করতে পারেন কিন্তু সেটাতে কাষ্টম ডিজাইন যোগ করতে পারবেন না। তাই ম্যানুয়ালি যদি PWA শিখে নেন তাহলে নিজের ইচ্ছে মতো ডিজাইন করতে পারবেন।

​

তো বন্ধুরা চলুন শুরু করা যাক।

​

Setup Process:-

​

প্রথমেই বলে রাখি, এই সেটাপের জন্য দুইটা icon লাগবে তাই বলি icon দুটি আগেই বানিয়ে রাখুন।

​

Icon —

  • 192192 size এর একটা png
  • 512512 size এর একটা png

​

আপনারা চাইলে যেকোনো ইমেইজ কে icon হিসেবে রাখতে পারেন শুধু resize করে। Resize করতে চাইলে এখানে ক্লিক করুন।

​

আচ্ছা ধরে নিলাম icon তৈরি করা শেষ, এবার আসুন কোডিং এর বিষয়ে, আপনাকে কোনো কোডিং করতে হবে না হালকা পতলা ইডিট করলেই হবে।

​

Setp -1:-

​

প্রথমে আপনার Cpanel থেকে যে সাইটে pwa এ্যাড করতে চান সেটার root directory তে যান।

​

তারপর নিচের লিংকে গিয়ে manifest ফাইলটি ডাউনলোড করে আপলোড করুন।

​

Download

​

➡️ এরপর manifest json টি ওপেন করে আপনার site অনুযায়ী সাইটনাম এবং ডেসক্রিপশন edit করুন।

​

​

আবার root directory তেই একই ভাবে নিচের ফাইলটি ডাউনলোড করে আপলোড করে দিন।

​

Download

​

➡️ কিছুই এডিট করতে হবে না।

​

এরপর নিচের থেকে কোডটি কপি করে আপনার থিম functions.php তে এ্যাড করুন।

​

Copy code

​

তারপর নিচের HTMl ফাইলটি আপনার থিমের হেডার অথবা footer এর যেকোনো জায়গায় যোগ করুন। যেখানে popup দেখাতে চান আরকি।

​

Copy code

​

➡️ এই HTMl ফাইলটি আপনে ইচ্ছে মতো এডিট করে ডিজাইন করতে পারবেন।

​

এবার নিচের থেকে স্ক্রিপটি copy করে footer এ body ক্লোজিং ট্যাগের আগে বসিয়ে দিন

​

Copy script

​

এবার প্রথমদিকে আমরা যে icon দুটি বানিয়েছিলাম সে দুটিও একই ভাবে root directory তে আপলোড করে দিব এবং icon গুলি rename করে,

​

এইরকম name দিবো

  • pwa-icon-192.png
  • pwa-icon-512.png

​

ব্যাস এবার cache ক্লিয়ার করে সাইটে প্রবেশ করে দেখুন, App install pop-up শো করবে।

​

তো বন্ধুরা এই ছিলো আজকের পোস্ট আশাকরি , টিক ঠিক মতো সেটাপ করতে পেরেছেন। না বুজলে কমেন্ট করুন। ধন্যবাদ।