Pelajari cara mengimplementasikan layar offline dalam aplikasi Vue, Angular, atau React menggunakan API Network dan Capacitor. Tingkatkan pengalaman pengguna dengan mengelola skenario offline secara efektif.

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 Network API. Network API menyediakan informasi jaringan dan konektivitas, memungkinkan kita untuk menangani skenario offline dan memberikan pengalaman pengguna yang lebih baik.

Prasyarat

Sebelum kita mulai, pastikan Anda telah menginstal hal-hal berikut:

Node.js (versi 14 atau lebih tinggi)
Vue CLI
Angular CLI
Create React App

Menyiapkan Proyek

Pertama, mari buat proyek baru menggunakan alat perancah masing-masing untuk setiap 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 proyek dibuat.

Angular 14

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

ng new offline-screen-angular14

Ikuti petunjuk, dan ketika ditanya untuk fitur tambahan, pilih “Routing” dengan menekan tombol spasi. Tunggu proyek dibuat.

React

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

npx create-react-app offline-screen-react

Tunggu proyek dibuat.

Menginstal Network API

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

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

npm install @capacitor/network

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

npx cap sync

Pastikan Anda telah menginstal Capacitor CLI secara global dengan menjalankan:

npm install -g @capacitor/cli

Mengimplementasikan Layar Offline

Selanjutnya, kita akan mengimplementasikan fungsionalitas layar offline di setiap framework. Kita akan menampilkan pesan sederhana ketika pengguna offline.

Vue 3

Di proyek Vue 3 Anda, buka file src/main.js dan impor modul Network 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);
};

Dalam template aplikasi Anda (App.vue), tambahkan elemen <div> 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, ketika pengguna offline, layar offline akan ditampilkan. Ketika pengguna kembali online, layar offline akan disembunyikan.

Angular 14

Di proyek Angular 14 Anda, buka file src/app/app.component.ts dan impor modul Network 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);
  };

}

Dalam template aplikasi Anda (app.component.html), tambahkan elemen <template> 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 gaya berikut ke file app.component.css:

#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, ketika pengguna offline, layar offline akan ditampilkan. Ketika pengguna kembali online, layar offline akan disembunyikan.

React

Di proyek React Anda, buka file src/App.js dan impor modul Network 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 gaya berikut ke file App.css:

#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, ketika pengguna offline, layar offline akan ditampilkan. Ketika pengguna kembali online, layar offline akan disembunyikan.

Metode dan Antarmuka Pendukung

Network API menyediakan beberapa metode dan antarmuka untuk membantu Anda menangani koneksi jaringan. Berikut adalah beberapa yang utama:

getStatus(): Menanyakan status saat ini dari koneksi jaringan.
addListener('networkStatusChange', ): Mendengarkan perubahan dalam koneksi jaringan.

Cara Membuat Layar Offline di Aplikasi Vue, Angular, dan React dengan API Network dan Capacitor

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

Prasyarat

Menyiapkan Proyek

Vue 3

Angular 14

React

Menginstal Network API

Mengimplementasikan Layar Offline

Vue 3

Angular 14

React

Metode dan Antarmuka Pendukung

Berita terbaru