7 tính năng ít được biết tới của PWA

7pwa

Mục lục

1. App Shortcuts
2. Contact Picker
3. Device Motion
4. Bluetooth & External Devices
5. Idle Detection
6. File System
7. Web Share
Reference
VNTechies Dev Blog

Progressive Web App (PWA) là một loại web app được xây dựng dưới các công nghệ của website nhưng có khả năng đưa các ứng dụng web lên một sân chơi bình đẳng với các ứng dụng native dành cho máy tính để bàn, Android hay iOS. Bài viết này sẽ giới thiệu 7 tính năng của PWA ít được biết đến.

1. App Shortcuts

App shortcuts

App Shortcuts

Các shortcuts cho phép người dùng truy cập nhanh vào một số tác vụ phổ biến, đem lại trải nghiệm giống như native app trên các nền tảng khác web.

{
  "name": "VNTechies",
  //...
  "shortcuts": [
    {
      "name": "Series",
      "short_name": "Series",
      "description": "Tổng hợp các bài viết theo chủ đề",
      "url": "/series",
      "icons": [{ "src": "/static/favicons/series.png", "sizes": "192x192" }]
    },
    {
      "name": "Tags",
      "short_name": "Tags",
      "description": "Tổng hợp các bài viết theo tags",
      "url": "/tags",
      "icons": [{ "src": "/static/favicons/tags.png", "sizes": "160x160" }]
    }
  ]
}

2. Contact Picker

Contact Picker

Contact Picker API cung cấp một cách dễ dàng để người dùng chia sẻ contact từ danh bạ của họ.

const btn = document.getElementById('contacts')
btn.addEventListener('click', (event) => getContacts())

const props = ['name', 'email', 'tel', 'address', 'icon']
const opts = { multiple: true }
const supported = 'contacts' in navigator && 'ContactsManager' in window

async function getContacts() {
  if (supported) {
    const contacts = await navigator.contacts.select(props, opts)
    console.log(contacts)
  } else {
    alert('contact picker not supported!')
  }
}

3. Device Motion

Device Motion API cung cấp cho các nhà phát triển web thông tin về chuyển động và hướng của thiết bị.

window.addEventListener('devicemotion', function (event) {
  const el = document.getElementById('motion')
  console.log(event)
  el.innerText = Math.round((event.acceleration.x + Number.EPSILON) * 100) / 100 + ' m/s2'
  // el.innerText = event.rotationRate.beta;
})

window.navigator.geolocation.getCurrentPosition(console.log)

4. Bluetooth & External Devices

Web Bluetooth API cho phép các website giao tiếp thông qua các thiết bị bluetooth.

const button = document.getElementById('ble')
button.addEventListener('click', (event) => connectBluetooth())

async function connectBluetooth() {
  // Connect Device
  const device = await navigator.bluetooth.requestDevice({
    filters: [{ services: ['heart_rate'] }],
  })
  const server = await device.gatt.connect()

  // Get heart rate data
  const hr = await server.getPrimaryService('heart_rate')
  const hrMeasurement = await hr.getCharacteristic('heart_rate_measurement')

  // Listen to changes on device
  await hrMeasurement.startNotifications()

  hrMeasurement.addEventListener('characteristicvaluechanged', (e) => {
    console.log(parseHeartRate(e.target.value))
  })
}

5. Idle Detection

Idle Detection API dùng để phát hiện khi người dùng không sử dụng thiết bị của họ.

if ('IdleDetector' in window) {
  const idleBtn = document.getElementById('idle')
  idleBtn.addEventListener('click', (event) => runIdleDetection())

  async function runIdleDetection() {
    const state = await IdleDetector.requestPermission()
    console.log(state)

    const idleDetector = new IdleDetector()

    idleDetector.addEventListener('change', () => {
      const { userState, screenState } = idleDetector
      console.log(idleDetector)

      if (userState == 'idle') {
        // update database with status
      }
    })

    await idleDetector.start({
      threshold: 120000,
    })
  }
}

6. File System

File System API cho phép ứng dụng web đọc hoặc lưu các thay đổi trực tiếp đối với tệp và thư mục trên thiết bị của người dùng.

const getFileBtn = document.getElementById('fs-get')

getFileBtn.onclick = async () => {
  const [handle] = await window.showOpenFilePicker()
  const file = await handle.getFile()
  console.log(file)
}

const saveFileBtn = document.getElementById('fs-save')

saveFileBtn.onclick = async () => {
  const textFile = new File(['hello world'], 'hello.txt', {
    type: 'text/plain',
  })
  const handle = await window.showSaveFilePicker()
  const writable = await handle.createWritable()
  await writable.write(textFile)
  await writable.close()
}

Web Share Target API

Chia sẻ trên điện thoại và máy tính dễ dàng hơn với Web Share Target API

{
  "name": "VNTechies",
  //...
  "share_target": {
    "action": "/share-photo",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "name",
      "text": "description",
      "url": "link",
      "files": [
        {
          "name": "photos",
          "accept": "image/png"
        }
      ]
    }
  }
}

Web Share API

Web Share API có thể sử dụng các dialog chia sẻ của các hệ thống như các ứng dụng native.

const shareBtn = document.getElementById('share')

shareBtn.onclick = async (filesArray) => {
  if (navigator.canShare) {
    navigator.share({
      url: 'https://vntechies.dev',
      title: 'PWAs are awesome!',
      text: 'I learned how to build a PWA today',
    })
  }
}