ကိုယ့်မှာ website တစ်ခုရှိတယ်။ အဲ့ website ကို mobile phones , tablets တွေပေါ်မှာ သုံးနိုင်တဲ့ applications ပုံစံမျိုး လုပ်ချင်တယ်။ Well You can use PWA. Progressive web app လို့ခေါ်တဲ့ pwa ဆိုတဲ့ အရာက website ပုံစံမျိုးရော application ပုံစံမျိုးရောကို hybrid serve လုပ်ပေးနိုင်တယ်။ ဆိုလိုချင်တာက ကိုယ့်ရဲ့ website ကို အသုံးပြုတဲ့သူတွေကို mobility experience တစ်ခုကောင်းကောင်းပေးနိုင်တယ်။ ဘယ်လိုပေးနိုင်လဲဆိုတာဆက်ဖတ်ကြည့်ရအောင်။

PWA ကို setup လုပ်ပြီးသွားပြီဆိုရင် ကျနော်တို့ website ကိုဝင်လိုက်တာနဲ့ Add to home screen ဆိုပြီး alert လေးပေါ်လာမယ်။ Add ဆိုတဲ့ ခလုတ်ကိုနှိပ်လိုက်တာနဲ့ ကျနော်တို့ဖုန်း၊tablet ရဲ့ home screen ထဲမှာ တစ်ခြား application တွေနဲ့နည်းတူ application လေးတစ်ခုပေါ်လာလိမ့်မယ်။ ကျနော်တို့ထည့်လိုက်တဲ့ app ပေါ့။ app ကိုဖွင့်ကြည့်လိုက်ပြီဆို တစ်ကယ့် native application ပုံစံမျိုးသုံးနိုင်အောင် ဖန်တီးပေးထားတယ်။(ps. Not a really native application). Browser ရဲ့ components တွေဖြုတ်ပေးထားတယ်။ ဆိုတော့ အသုံးပြုသူက mobility experience ကောင်းကောင်းရနိုင်တယ်။ နောက်တစ်ခုအနေနဲ့ ကိုယ့် website ရဲ့ engagement ကိုတိုးတတ်စေတယ်။ ပုံမှန်ဆို ကိုယ့် website ကိုလာဖို့ browser ဖွင့် url ရိုက်နေရမယ့်အစား application ကိုတစ်ချက်ထဲနှိပ်ပြီး ဝင်လို့ရပြီကိုး ၊ ဆိုတဲ့အတွက် reach ရော engagement ရောကောင်းလာလိမ့်မယ်။

See Below Images.


ဒါတင်ပဲလားဆိုတော့ မဟုတ်သေးဘူး။ ဘာတွေထပ်လုပ်လို့ရသေးလဲဆိုတော့

  • installable ဖြစ်တယ်၊ install လုပ်ရတဲ့ နေရာမှာလည်း လွယ်တယ်။ click တစ်ချက်နှိပ်ပြီးလုပ်ရုံပဲ။
  • Phone, tablet တွေမှ မဟုတ်ဘူး၊ desktop တွေမှာလည်း application ပုံစံအသုံးပြုလို့ရတယ်။
  • Responsive ဖြစ်တယ်။ screen device အမျိုးမျိုးမှာအဆင်ပြေတယ်၊ (ဒါကတော့ နဂိုတည်းက ကိုယ့် website ဘယ်လောက် responsive ဖြစ်လဲပေါ်မူတည်ပါသေးတယ်။)
  • Internet မရှိတဲ့အချိန် Offline mode မှာလည်း run လို့ရအောင်လုပ်ထားလို့ရတယ်။
  • Splash screen ထည့်သုံးလို့ရတယ်။ (application ဖွင့်ဖွင့်ချင်းမှာပေါ်တဲ့ screen). See Example Below.
  • Screen transitions တို့ scrolling experience တို့က browser မှာသုံးရတာထက် အများကြီးပိုကောင်းတယ်။
    တစ်ချို့ကလည်း ကိုယ့် website ရဲ့ အသုံးပြုသူတွေကို mobility experience ပေးချင်လို့၊ တစ်ချို့ကျတော့လည်း native application အထိသွားဖို့ကို budget မရှိတာတို့ ၊ time frame မရှိတာတို့ စတဲ့ အခြေအနေတွေမှာ PWA ကိုသုံးကြပါတယ်။

အိုကေ ဒီလောက်ဆိုရင်တော့ PWA ကဘာတွေလုပ်ပေးနိုင်လဲဆိုတာကိုသိပြီ။ PWA ကို setup လုပ်ရတာတော့ ခက်ခဲတဲ့ အလုပ်တစ်ခုမဟုတ်ပါဘူး၊ Easy. ဘာမှထူးထူးထွေထွေမလိုဘူး။ Framework သုံးထားတဲ့သူတွေကတော့ PWA အတွက် Plugin တွေ library ရှာသုံးလိုက်ရင်ရပီ။ manual setup လုပ်မယ့်သူကတော့ Js နည်းနည်းသိဖို့လိုတယ်။
PWA setup လုပ်တဲ့နေရာမှာ အဓိက အရေးကြီးတာကတော့ service worker ရယ် manifest ရယ်ပဲ။ နောက်တစ်ခုက testing လုပ်ဖို့အတွက် chrome မှာဆို inspect ထောက်ပြီး audit tab မှာ progressive web app အတွက် testing လုပ်လို့ရတယ်။

installable ခေါင်းစဉ်အောက်က check list တွေ pass ဖြစ်ရင် PWA officially run လို့ရပြီ။ ဒါပေမဲ့ ကျန်တဲ့ list တွေလည်း pass ဖြစ်ထားမယ်ဆို ကိုယ့်ရဲ့ PWA app ကို ပိုပြီး ကောင်းကောင်းနဲ့ရတာပေ့ါဗျာ။ လိုတာတွေလိုက်ဖြည့်ပေ့ါ။

နောက်တစ်ချက်အနေနဲ့ website က https ဖြစ်ဖို့တော့လိုသေးတယ်။

Service worker က application က offline mode မှာအဆင်ပြေအောင်လုပ်ပေးတာတို့၊ caching လုပ်ပေးတာတို့အတွက် တာဝန်ယူပေးတယ်။ အဓိက ကတော့ browser နဲ့ network ကြားက communicator ပုံစံမျိုးလုပ်ဆောင်ပေးတယ်။ push notification တို့ဘာတို့ လုပ်မယ်ဆိုလည်း ဒီကနေပဲသွားတယ်ပေ့ါ။

Manifest json file ကတော့ application အတွက် လိုအပ်တဲ့ home screen icon တို့ name တို့ splash screen တို့ theme တို့ setup လုပ်တဲ့နေရာမှာသုံးပါတယ်။ ပြောရမယ်ဆိုရင် application ရဲ့ core information တွေကို setup လုပ်တယ်။

PWA setup လုပ်ဖို့ try ကြည့်မယ်ဆို google ကလုပ်ပေးထားတဲ့ official documentation လေးရှိတယ်။ ရေမီးအစုံ လေထီးခုံပြီးလုပ်ရုံပဲ။ အောက်မှာ link ပေးထားတယ်။
https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0

အပေါ်မှာပြောခဲ့သလိုအားသာချက်တွေရှိသလို draw back လေးတွေကတော့ ရှိနေသေးတယ်။ android မှာတော်တော်လေး compatible ဖြစ်တယ်လို့ပြောလို့ရနေပေမယ့် Ios မှာတော့ ကျနော်သိလောက် issues လေးတွေရှိနေသေးတယ်။ သုံးလို့မရဘူးဆိုပြီး limit လုပ်ထားတဲ့ features လေးတွေလည်းရှိသေးတယ်။ သို့ပေမယ့်လည်း ခြုံပြီးပြောရရင် ပုံမှန် website တစ်ခုကို လွယ်လွယ်ကူကူနဲ့ mobility experience တစ်ခု transform လုပ်ပေးလို့ရတာကိုတော့ သဘောကျပါတယ်။

ဒီလောက်ဆိုရင်တော့ လုံလောက်ပြီလို့ထင်ပါတယ်။

See Ya.