Cara Membuat Layar Offline di Vue 3, Angular 14, atau React

Dalam tutorial ini, kita akan belajar cara membuat layar offline di aplikasi Vue 3, Angular 14, dan React menggunakan API Network. API Network menyediakan informasi jaringan dan konektivitas, sehingga kita bisa menangani skenario offline dan memberikan pengalaman pengguna yang lebih baik. Untuk pengecekan reachability yang lebih mendalam di luar flag online/offline sederhana, @capgo/capacitor-network-diagnostics dapat menguji reachability URL, port TCP, dan handshake WebSocket dari code native.

Prerequisites

Sebelum memulai, pastikan Anda sudah menginstal hal-hal berikut:

Node.js (versi 14 atau lebih baru)
Vue CLI
Angular CLI
Buat React App

Menyiapkan Proyek

Pertama, buat proyek baru menggunakan tool scaffolding yang sesuai untuk masing-masing framework.

Vue 3

Buka terminal Anda dan jalankan perintah berikut untuk membuat proyek Vue 3 baru:

vue create offline-screen-vue3

Pilih preset default dan tunggu hingga proyek selesai dibuat.

Angular 14

Buka terminal dan jalankan perintah berikut untuk membuat proyek Angular 14 baru:

ng new offline-screen-angular14

Ikuti petunjuknya, dan saat diminta fitur tambahan, pilih “Routing” dengan menekan tombol spasi lalu tunggu hingga proyek selesai dibuat.

React

Buka terminal dan jalankan perintah berikut untuk membuat proyek React baru:

npx create-react-app offline-screen-react

Tunggu hingga proyek selesai dibuat.

Menginstal Network API

Sekarang, mari kita instal @capacitor/network package, yang menyediakan Network API.

Buka terminal dan masuk ke direktori proyek Anda. Kemudian, jalankan perintah berikut untuk menginstal package:

npm install @capacitor/network

Untuk proyek Capacitor, jalankan juga perintah berikut untuk menyinkronkan file proyek native:

npx cap sync

Pastikan Anda sudah menginstal Capacitor CLI secara global dengan menjalankan:

npm install -g @capacitor/cli

Implementasi Offline Screen

Selanjutnya, kita akan mengimplementasikan fungsi offline screen di setiap framework. Kita akan menampilkan pesan sederhana saat pengguna sedang offline.

Vue 3

Di proyek Vue 3 Anda, buka src/main.js file dan import Network module dari @capacitor/network:

import { createApp } from 'vue';
import { Network } from '@capacitor/network';

const app = createApp(App);

// Your application setup

app.mount('#app');

Network.addListener('networkStatusChange', status => {
  if (status.connected) {
    // User is back online
    // Hide the offline screen
    document.getElementById('offline-screen').style.display = 'none';
  } else {
    // User is offline
    // Display the offline screen
    document.getElementById('offline-screen').style.display = 'block';
  }
});

const logCurrentNetworkStatus = async () => {
  const status = await Network.getStatus();
  console.log('Network status:', status);
};

Di template aplikasi Anda (App.vue), tambahkan <div> elemen dengan id offline-screen untuk menampilkan pesan layar offline:

<template>
  <div id="app">
    <div id="offline-screen">
      <h1>You are offline</h1>
      <p>Please check your internet connection and try again.</p>
    </div>
    <!-- Your application content -->
  </div>
</template>

<style>
#offline-screen {
  display: none;
  text-align: center;
  padding: 20px;
  background-color: #f2f2f2;
}

#offline-screen h1 {
  font-size: 24px;
}

#offline-screen p {
  font-size: 16px;
}
</style>

Sekarang, saat pengguna offline, layar offline akan muncul. Saat pengguna kembali online, layar offline akan disembunyikan.

Angular 14

Di proyek Angular 14 Anda, buka src/app/app.component.ts file dan import Network module dari @capacitor/network:

import { Component } from '@angular/core';
import { Network } from '@capacitor/network';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor() {
    Network.addListener('networkStatusChange', status => {
      if (status.connected) {
        // User is back online
        // Hide the offline screen
        document.getElementById('offline-screen').style.display = 'none';
      } else {
        // User is offline
        // Display the offline screen
        document.getElementById('offline-screen').style.display = 'block';
      }
    });
  }

  logCurrentNetworkStatus = async () => {
    const status = await Network.getStatus();
    console.log('Network status:', status);
  };

}

Di template aplikasi Anda (app.component.html), tambahkan <div> elemen dengan id offline-screen untuk menampilkan pesan layar offline:

<div id="offline-screen">
  <h1>You are offline</h1>
  <p>Please check your internet connection and try again.</p>
</div>

<!-- Your application content -->

Tambahkan style berikut ke app.component.css file Anda:

#offline-screen {
  display: none;
  text-align: center;
  padding: 20px;
  background-color: #f2f2f2;
}

#offline-screen h1 {
  font-size: 24px;
}

#offline-screen p {
  font-size: 16px;
}

Sekarang, saat pengguna offline, layar offline akan muncul. Saat pengguna kembali online, layar offline akan disembunyikan.

React

Di proyek React Anda, buka src/App.js file dan import Network module dari @capacitor/network:

import React, { useEffect } from 'react'
import { Network } from '@capacitor/network'

function App() {

  useEffect(() => {
    Network.addListener('networkStatusChange', (status) => {
      if (status.connected) {
        // User is back online
        // Hide the offline screen
        document.getElementById('offline-screen').style.display = 'none'
      }
      else {
        // User is offline
        // Display the offline screen
        document.getElementById('offline-screen').style.display = 'block'
      }
    })
  }, [])

  const logCurrentNetworkStatus = async () => {
    const status = await Network.getStatus()
    console.log('Network status:', status)
  }

  return (
    <div id="app">
      <div id='offline-screen'>
        <h1>You are offline</h1>
        <p>Please check your internet connection and try again.</p>
      </div>
      {/* Your application content */}
    </div>
  )

}

export default App

Tambahkan style berikut ke App.css file Anda:

#offline-screen {
  display: none;
  text-align: center;
  padding: 20px;
  background-color: #f2f2f2;
}

#offline-screen h1 {
  font-size: 24px;
}

#offline-screen p {
  font-size: 16px;
}

Sekarang, saat pengguna offline, layar offline akan muncul. Saat pengguna kembali online, layar offline akan disembunyikan.

Method dan Interface Pendukung

Network API menyediakan beberapa method dan interface untuk membantu Anda menangani koneksi jaringan. Berikut beberapa yang utama:

getStatus(): Periksa status koneksi jaringan saat ini.
addListener('networkStatusChange', ...): Pantau perubahan koneksi jaringan.

Lanjutkan dari Offline Screen di Vue, Angular, React dengan Capacitor

Jika Anda menggunakan Layar Offline di Vue, Angular, React dengan Capacitor untuk merencanakan perilaku media dan antarmuka native, hubungkan dengan Menggunakan @capgo/capacitor-live-activities untuk kemampuan native di Menggunakan @capgo/capacitor-live-activities, @capgo/capacitor-live-activities untuk detail implementasi di @capgo/capacitor-live-activities, Menggunakan @capgo/capacitor-video-player untuk kapabilitas native saat menggunakan @capgo/capacitor-video-player, @capgo/capacitor-video-player untuk detail implementasi di @capgo/capacitor-video-player, dan Menggunakan @capgo/capacitor-native-navigation untuk kapabilitas native saat menggunakan @capgo/capacitor-native-navigation.