ทำ Application Offline ด้วย VueJs

Photo by Sigmund on Unsplash

สวัสดีครับ วันนี้ผมได้รับโจทย์มาว่า อยากทำ Application ที่มันสามารถทำงานแบบ Offline ได้ ผมก็เลยลอง Research มาแล้วก็พับกบ แฮ้ะ พบกับเจ้าตัว Progressive web application ที่มันสามารถแก้ปัญหาที่เราเจอได้ เรามาทำความรู้จักกับมันสักหน่อยดีกว่า

Progressive web application (PWA)

อธิบายแบบสั้นๆคือ การทำ website ของเรา ให้กลายเป็น application ที่สามารถติดตั้งและใช้งานได้โดยไม่ผ่านการเปิด browser โดยตรง (แต่จริงๆไส้ในมันก็คือ web browser นั้นแหละ) โดย เราจะมาใช้ข้อมูลของมันในการแก้โจทย์ในครั้งนี้ คือตัว Application ที่เป็น PWA นี้ มันสามารถ เปิดได้ แม้เราจะไม่ได้ Online อยู่ก็ตาม แถมมันยัง มีความเร็ว และ Responsive ตามหน้าจอ Device ที่เราเปิดใช้งานด้วย

สร้าง Project ด้วย VueJs

ก่อนอื่นติดตั้ง vue cli เพื่อใช้งานตัว Vuejs

npm install -g @vue/cli

จากนั้น สร้าง Project ด้วย command

vue create pwa-101

vue create without pwa feature

ในขั้นตอนนี้ผมได้ติดตั้งแบบ ไม่ได้เลือก Feature PWA เข้ามาตอนติดตั้งนี้ แต่เราก็สามารถเลือกเพิ่ม เข้ามาด้วยก็ได้ ตอนเลือก Feature แบบ Manual ครับ

vue create with pwa feature

จากนั้น run command

npm run serve

เปิด browser ตาม local URL

หน้าแรกของ Application เรา

จากนั้น เราจะทำ Application นี้ให้สามารถติดตั้งแบบ PWA ได้ ด้วยการติดตั้ง Plugin เพิ่ม

vue add pwa

หลังจากติดตั้งเสร็จแล้ว เราจะได้ไฟล์ registerServiceWorker.js เพิ่มเข้ามาใน Folder src

registerServiceWorker.js

และหากเรา Refresh local URL เราอีกทีก็จะพบกับ icon ทางด้านบนขวา

Install PWA Application

ที่จะทำให้เราสามารถติดตั้ง Application นี้ลงที่เครื่องของเราได้

หลังจากที่กด Install ตัว Application ก็จะแสดงในเครื่องของเรา

ถ้ายัง run command npm run server ไว้อยู่ เมื่อเปิด Application pwa-101 ก็จะเจอกับจอดังนี้

Stand alone application

แต่ถ้าหาก ไม่ได้ run command นั้นไว้ หน้า Application นั้นก็จะไม่สามารถใช้งานได้

หากต้องการปรับ Logo หรือใส่ Title ของ Application เราจะต้องทำการเพิ่มไฟล์ public/manifest.json เข้าไป Project

โดยในไฟล์ public/index.html ให้ทำการเพิ่ม meta tag นี้เข้าไปใน tag head

<link rel="manifest" href="/manifest.json">

ส่วนในไฟล์ minifest.json ให้ทำการเพิ่ม รายละเอียดตามที่เราต้องการ

{
    "name": "My Vue.js PWA",
    "short_name": "My PWA",
    "description": "A Vue.js Progressive Web App",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "orientation": "portrait",
    "icons": [
      {
        "src": "/img/icons/icon-32x32.png",
        "sizes": "32x32",
        "type": "image/png"
      },
      {
        "src": "/img/icons/icon-16x16.png",
        "sizes": "16x16",
        "type": "image/png"
      },
      {
        "src": "/img/icons/android-chrome-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "/img/icons/android-chrome-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ]
  }

เราสามารถ ระบุ icon ใหม่ของ Application เราได้ โดยทำการ เพิ่ม icon เข้าไปที่ folder public/img/icons

และเมื่อเรา Refresh หน้า local URL เราอีกครั้ง ก็จะพบว่า ตัว Application ของเรา title และ icon จะเปลี่ยนไปตามที่เราตั้งค่าไว้

Deploy to server

หากต้องการให้ application เราสามารถใช้งานได้ โดยไม่ต้อง run command นั้นทิ้งไว้ เราจะต้อง build Application และนำ folder dist นี้ไป deploy บน Server ที่เรามี ก่อนอื่นให้ run command

npm run build

จะได้ Folder dist มา

dist folder

จากนั้น copy ไฟล์ ทั้งหมด ใน folder dist ไปไว้บน Server ของเรา และเรียก URL ดูก็จะสามารถ Install Application ได้

copy ไฟล์ใน Folder dist ไปวางบน Server

Uninstall application

หากต้องการลบ Application ที่เราติดตั้งไว้ สำหรับ Google Chrome ให้เราเรียก URL นี้ chrome://apps/ แล้วทำการ Uninstall Application ของเราได้

Next step

เรายังมีโจทย์ที่ค้างไว้อยู่อีก 2 ข้อคือ ตัว Application นั้นจะต้องสามารถเก็บข้อมูลไว้กับตัวเองได้ และ มันจะต้องสามารถทำงานแบบ Offline และ พอมันกลับมา Online มันจะต้องสามารถ ส่งข้อมูลกลับไปยัง Server เพื่อบันทึกต่อไป

สำหรับ บทความต่อไปมาแล้วครับ ตามไปอ่านที่ได้นี้เลย เก็บข้อมูลบน IndexedDB ด้วย VueJs