Bagaimana Membuat Tampilan Offline di Vue 3, Angular 14, atau React

Pada tutorial ini, kita akan belajar bagaimana membuat tampilan offline di aplikasi Vue 3, Angular 14, dan React menggunakan Jaringan API. Jaringan API menyediakan informasi jaringan dan koneksi, memungkinkan kita untuk menghandle skenario offline dan memberikan pengalaman pengguna yang lebih baik. Untuk pemeriksaan ketersediaan yang lebih dalam di luar flag online/offline sederhana, @capgo/capacitor-network-diagnostics bisa melakukan pemeriksaan ketersediaan URL, porta TCP, dan tangan-tertangkap WebSocket dari code native.

Persyaratan

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

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

Pengaturan Proyek

Pertama-tama, mari kita buat proyek baru menggunakan alat bantu 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 instruksi, dan ketika diminta fitur tambahan, pilih "Routing" dengan menekan tombol spacebar. spacebar Tunggu sampai proyek dibuat.

React

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

npx create-react-app offline-screen-react

Tunggu sampai proyek dibuat.

Menginstal Jaringan API

Sekarang, mari kita instalasi @capacitor/network paket, yang menyediakan Jaringan API.

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

npm install @capacitor/network

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

npx cap sync

Pastikan Anda memiliki Capacitor CLI terinstal secara global dengan menjalankan:

npm install -g @capacitor/cli

Mengimplementasikan Layar Offline

Selanjutnya, kita akan mengimplementasikan fungsi layar offline di setiap framework. Kita akan menampilkan pesan sederhana ketika pengguna kehilangan koneksi internet.

Vue 3

Dalam proyek Vue 3 Anda, buka file dan import modul dari src/main.js Dalam template aplikasi Anda ( Network ), tambahkan elemen dengan id @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);
};

untuk menampilkan pesan layar offline: App.vueSekarang, ketika pengguna keluar dari jaringan, layar offline akan ditampilkan. Ketika pengguna kembali online, layar offline akan disembunyikan. <div> Angular 14 offline-screen Dalam proyek Angular 14 Anda, buka file dan import modul dari

<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>

Dalam template aplikasi Anda (

), tambahkan elemen dengan id

untuk menampilkan pesan layar offline: src/app/app.component.ts Sekarang, ketika pengguna keluar dari jaringan, layar offline akan ditampilkan. Ketika pengguna kembali online, layar offline akan disembunyikan. Network modul 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 sebuah <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 gaya berikut ke file: app.component.css Sekarang, ketika pengguna offline, layar offline akan ditampilkan. Ketika pengguna kembali online, layar offline akan disembunyikan.

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

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

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

React

Dalam proyek React Anda, buka file

dan import modul dari src/App.js modul dari __CAPGO_KEEP_0__. Network modul dari __CAPGO_KEEP_1__. @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

Menambahkan gaya-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.

Dukungan Metode dan Interface

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

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

Meneruskan dari Layar Offline di Vue, Angular, React dengan Capacitor

Jika Anda menggunakan Layar Offline di Vue, Angular, React dengan Capacitor untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan Menggunakan @capgo/capacitor-live-activities untuk kemampuan asli di Menggunakan @capgo/capacitor-aktivitas-hidup, @capgo/capacitor-aktivitas-hidup, untuk rincian implementasi di @capgo/capacitor-aktivitas-hidup, Menggunakan @capgo/capacitor-pemain-video, untuk kemampuan asli di Menggunakan @capgo/capacitor-pemain-video, @capgo/capacitor-pemain-video, untuk rincian implementasi di @capgo/capacitor-pemain-video, dan Menggunakan @capgo/capacitor-navigasi-asli, untuk kemampuan asli di Menggunakan @capgo/capacitor-navigasi-asli.