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 koneksi, memungkinkan kita mengatasi skenario offline dan memberikan pengalaman pengguna yang lebih baik.

Prasyarat

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

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

Mengatur Proyek

Pertama-tama, mari kita buat proyek baru menggunakan alat 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 sampai 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 diminta fitur tambahan, pilih "Routing" dengan menekan tombol spasi bar.

Tunggu sampai proyek dibuat.

React

npx create-react-app offline-screen-react

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

Installing the Network API

Menginstal Jaringan __CAPGO_KEEP_0__ @capacitor/network package, which provides the Network API.

paket, yang menyediakan Jaringan __CAPGO_KEEP_0__.

npm install @capacitor/network

For Capacitor projects, also run the following command to sync the native project files:

npx cap sync

Untuk proyek Capacitor, juga jalankan perintah berikut untuk sinkronisasi file proyek native: "CLI" harus terinstal secara global dengan menjalankan: "CLI install"

npm install -g @capacitor/cli

Mengimplementasikan Layar Offline

Selanjutnya, kita akan mengimplementasikan fungsi layar offline pada setiap framework. Kita akan menampilkan pesan sederhana ketika pengguna keluar dari jaringan.

Vue 3

Dalam proyek Vue 3 Anda, buka file src/main.js dan import 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 keluar dari jaringan, layar offline akan ditampilkan. Ketika pengguna kembali online, layar offline akan disembunyikan.

Angular 14

Dalam proyek Angular 14 Anda, buka file dan import modul dari src/app/app.component.ts __CAPGO_KEEP_0__ Network Dalam template aplikasi Anda ( @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);
  };

}

), tambahkan elemen dengan id app.component.htmluntuk menampilkan pesan layar offline: <div> Tambahkan gaya berikut ke file: offline-screen Sekarang, ketika pengguna offline, layar offline akan ditampilkan. Ketika pengguna kembali online, layar offline akan disembunyikan.

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

<!-- Your application content -->

React app.component.css Dalam proyek React Anda, buka file

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

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

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

Dalam proyek React Anda, buka file dan import modul dari

__CAPGO_KEEP_0__

Dalam template aplikasi Anda ( src/App.js file dan import Network __CAPGO_KEEP_0__ 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 App.css file:

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

Metode dan Interface Pendukung

Jaringan API menyediakan beberapa metode dan interface untuk membantu Anda mengelola koneksi jaringan. Berikut beberapa yang paling penting:

• getStatus(): Tanyakan status jaringan saat ini.
• addListener('networkStatusChange', ...): Dengarkan perubahan status jaringan.