Progressive Web App အခြေခံများ

နားလည်ထားရမယ့် အချက်

Progressive Web App (PWA) တစ်ခုသည် standard web technology များနှင့် တည်ဆောက်ထားသော ပုံမှန် website တစ်ခုဖြစ်ပြီး install လုပ်ထားသော native application တစ်ခုကဲ့သို့ ခံစားရစေနိုင်သည့် capability များကိုပါ ယူဆောင်ထားသည်။

ဒီ capability တွေထဲက တစ်ခုမှ နေရာတိုင်းမှာ အာမခံချက် မရှိပါဘူး — support က browser နဲ့ operating system အလိုက် ကွဲပြားပါတယ်၊ ဒါကြောင့် PWA ကို feature set အာမခံချက်တစ်ခုတည်းရှိတဲ့ category သတ်မှတ်ချက်တစ်ခုအနေနဲ့ ထက် platform ခွင့်ပြုသလောက် app-like upgrade အနည်းငယ်ပါတဲ့ web app တစ်ခုအနေနဲ့ ဖော်ပြတာက ပိုသင့်တော်ပါတယ်။

• home screen ဒါမှမဟုတ် desktop ပေါ် install ခွင့်
• ယခင်က load ဖြစ်ပြီးသား content ကို offline access
• caching behavior ကို ထိန်းချုပ်ခွင့်
• browser chrome မပါဘဲ app-like launch experience
• support ပြုတဲ့ platform တွေပေါ်က background capability
• platform ခွင့်ပြုသလောက် push notification များ

ဒီ capability တွေရဲ့ နောက်ကွယ်မှာ technology နှစ်ခု များသောအားဖြင့် ရှိပါတယ်။ Web App Manifest သည် app ရဲ့ အမည်, icon, ဖွင့်ရမည့် URL, launch လုပ်တဲ့အခါ browser tab နဲ့ address bar ပြသမည့်အစား screen တစ်ခုလုံး ဖြည့်ပြသကဲ့သို့ ပြသပုံကို ဖော်ပြသည့် metadata file သေးသေးလေးတစ်ခု ဖြစ်ပါတယ်။

Service Worker သည် browser က page ကိုယ်စား run ပေးတဲ့ browser နှင့် network ကြားမှာ ရှိနေသော script သီးခြားတစ်ခုဖြစ်သည်။ ၎င်းသည် network request အချို့ကို ဖြစ်ပေါ်ချိန်တွင် ဖြတ်ကြားယူကာ cache လုပ်ထားသော response ပေးမည်လား network ဆီ ဆက်သွယ်မည်လား ဆုံးဖြတ်နိုင်ပြီး environment အချို့တွင် background ၌ task များကို ဆက်လုပ်နိုင်သည်။

Offline-first သည် site တစ်ခုက PWA အဖြစ် သတ်မှတ်ချက်နှင့်ကိုက်ညီသည့်အတွက် အလိုအလျောက် ဖြစ်ပေါ်လာသည့်အရာ မဟုတ်ဘဲ ဒီအစိတ်အပိုင်းများအပေါ် တည်ဆောက်ထားသော ရည်ရွယ်ချက်ရှိရှိ design ပန်းတိုင်တစ်ခု ဖြစ်ပါတယ်။ ဘာကို cache လုပ်မလဲ, network အစား ဘယ်အချိန် cache ကို သုံးမလဲ, connectivity ပြန်ရလာတဲ့အချိန်ကို ဘယ်လိုကိုင်တွယ်မလဲဆိုတာကို ရှင်းရှင်းလင်းလင်း ဆုံးဖြတ်ဖို့ လိုအပ်ပါတယ်။

Progressive Web App

installability, offline support ကဲ့သို့ app-like capability များကို platform က support ပြုသည့်နေရာတွင် ယူဆောင်ထားနိုင်သော standard web technology ဖြင့် တည်ဆောက်ထားသော website တစ်ခု။

Service Worker

browser နှင့် network ကြားတွင်ရှိနေပြီး request များကို ဖြတ်ကြားယူကာ caching ကို စီမံနိုင်သော page ကိုယ်စား browser run ပေးသည့် script တစ်ခု။

SERVICE WORKER AND OFFLINE-FIRST
--------------------------------
SERVICE WORKER AND OFFLINE-FIRST
------------------------------------
        [ Browser ]
             |
             v
      [ Service Worker ]
       /      |        \
      v       v         v
  [ Cache ] [ Network ] [ Background
                          tasks, where
                          supported ]

OFFLINE-FIRST DECISION FLOW
-------------------------------
   Request for data
         |
         v
   Network available?
      /         \
    Yes          No
     |            |
     v            v
 Use network   Use cached content
  response      (if available)

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

project တစ်ခုကို PWA အဖြစ် ဆောက်လုပ်ထိုက်လား ဆိုတာ ဆုံးဖြတ်ဖို့ သားနပ်တဲ့ မေးခွန်းတစ်ခုက စတင်ပါတယ် — user တွေက ဒါကို install လုပ်ပြီး app လိုဖွင့်တာကနေ တကယ်အကျိုးရနိုင်သလား၊ ဒါမှမဟုတ် connectivity ချို့ယွင်းနေရင်တောင် ဆက်အလုပ်လုပ်နေတာကနေ အကျိုးရနိုင်သလား။

subway tunnel ကနေ ခရီးသွားရင်း သုံးတဲ့ note-taking app တစ်ခုက offline support နဲ့ install လုပ်နိုင်တဲ့ icon ကနေ အများကြီးအကျိုးရပါတယ်။ တစ်ကြိမ်ဖွင့်ပြီး ရှားရှားပါးပါးသာ ပြန်ဖွင့်တဲ့ calculator page တစ်ခုကတော့ ဘယ်ဟာကမှ များများ အကျိုးမရနိုင်ပါဘူး။

team တစ်ခုက PWA approach ကိုက်ညီတယ်လို့ ဆုံးဖြတ်ပြီးရင်တောင် offline-first behavior ကို page တစ်ခုချင်းစီ, resource တစ်ခုချင်းစီအလိုက် ရည်ရွယ်ချက်ရှိရှိ ဒီဇိုင်းဆက်လုပ်ရမှာပါ။ news app တစ်ခုက article text ကို offline ဖတ်နိုင်ဖို့ cache လုပ်နိုင်ပေမယ့် live comment count ကို တမင်ကျန်ခဲ့နိုင်ပါတယ်၊ ဘာလို့လဲဆိုတော့ ဟောင်းနွမ်းနေတဲ့ comment count က ဘာမှမပြတာထက် ပိုပြီး reader ကို လမ်းလွဲစေနိုင်လို့ပါ။

PWA ကို native app ပေါ့ပါးတဲ့ version တစ်ခုလို့ ယူဆမနေဘဲ ရိုးရိုးသားသား နှိုင်းယှဉ်ကြည့်တာက အထောက်အကူပြုပါတယ်။ PWA သည် app store အစား web link တစ်ခုမှတစ်ဆင့် ဖြန့်ဝေလေ့ရှိပြီး codebase တစ်ခုတည်းနဲ့ platform များစွာသို့ ရောက်ရှိနိုင်ကာ store review delay ကို ကျော်နိုင်ပေမယ့် device hardware အချို့နှင့် background capability တချို့ကို fully native app က ပိုတိုက်ရိုက် ချိတ်ဆက်နိုင်တာထက် ပိုကျဉ်းမြောင်းတဲ့ access ရှိပါတယ်။

• PWA သည် installability, offline support ကဲ့သို့ optional app-like capability ရှိသော website တစ်ခုဖြစ်ပြီး အာမခံထားသော feature set သတ်မှတ်ချက် မဟုတ်ပါ။
• Web App Manifest က app ကို ဖော်ပြပြီး Service Worker က network request များကို ဖြတ်ကြားယူကာ caching ကို စီမံသည်။
• Offline-first သည် ဘာကို ဘယ်အချိန် cache လုပ်မည်ဆိုသည့် ရည်ရွယ်ချက်ရှိရှိ ဒီဇိုင်းဆုံးဖြတ်ချက်များ လိုအပ်ပြီး အလိုအလျောက် ဖြစ်ပေါ်လာခြင်း မဟုတ်ပါ။

အတူတူ စမ်းရေးကြည့်မယ်

function handleFetch(requestPath, { cache, isOnline }) {
  if (isOnline) {
    // Network-first: a real service worker might also refresh the cache here.
    return { requestPath, source: "network", data: `LIVE:${requestPath}` };
  }
  if (cache[requestPath]) {
    return { requestPath, source: "cache", data: cache[requestPath] };
  }
  return { requestPath, source: "unavailable", data: null };
}

const cache = {
  "/index.html": "cached homepage markup",
  "/style.css": "cached stylesheet",
};

console.log(handleFetch("/index.html", { cache, isOnline: true }));
console.log(handleFetch("/index.html", { cache, isOnline: false }));
console.log(handleFetch("/new-page.html", { cache, isOnline: false }));

/index.html အတွက် online request ဆိုရင် { source: 'network', data: 'LIVE:/index.html' } ကို ပြန်ပေးပါတယ်။ path တူတူကို offline ဖြစ်နေရင် { source: 'cache', data: 'cached homepage markup' } ကို ပြန်ပေးပါတယ်။ cache မလုပ်ထားတဲ့ path ကို offline ဖြစ်နေချိန် တောင်းရင် { source: 'unavailable', data: null } ကို ပြန်ပေးပါတယ်။

MDN — Progressive web apps (PWAs) — How the Web Works