How to Create an Offline Screen in Vue 3, Angular 14, atau React

In tutorial ini, kami akan belajar cara membuat layar offline di aplikasi Vue 3, Angular 14, dan React menggunakan Network API. Network API menyediakan informasi jaringan dan koneksi, sehingga kami dapat menghandle skenario offline dan memberikan pengalaman pengguna yang lebih baik. Untuk pengecekan ketersediaan yang lebih dalam di luar flag online/offline sederhana, @capgo/capacitor-network-diagnostics menguji ketersediaan URL, porta TCP, dan tangan WebSocket dari native code.

Prasyarat

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

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

Pengaturan Proyek

Terlebih dahulu, buatlah 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 instruksi, dan ketika diminta fitur tambahan, pilih "Routing" dengan menekan tombol 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.

Memasang Jaringan API

Sekarang, mari kita install @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 telah menginstal Capacitor CLI secara global dengan menjalankan:

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 kehilangan koneksi internet.

Vue 3

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

Aplikasi template Anda (App.vuetambahkan elemen dengan id <div> untuk menampilkan pesan layar offline: offline-screen Sekarang, ketika pengguna offline, layar offline akan ditampilkan. Ketika pengguna kembali online, layar offline akan disembunyikan.

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

Angular 14

Dalam proyek Angular 14 Anda, buka file

dan import modul src/app/app.component.ts module dari Network Aplikasi template 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> Sekarang, ketika pengguna offline, layar offline akan ditampilkan. Ketika pengguna kembali online, layar offline akan disembunyikan. 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 Tambahkan gaya berikut ke file: Network Sekarang, ketika pengguna offline, layar offline akan ditampilkan. Ketika pengguna kembali online, layar offline akan disembunyikan. @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

Metode dan Interface Pendukung App.css Metode dan Interface Pendukung

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

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

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

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', ...): Dengan mendengarkan perubahan koneksi jaringan.

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

Jika Anda menggunakan __CAPGO_KEEP_0__ untuk merencanakan media dan perilaku antarmuka native, hubungkannya dengan __CAPGO_KEEP_0__ Menggunakan @Capacitor/__CAPGO_KEEP_1__-live-aktivitas Menggunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-aktivitas untuk kemampuan native di Menggunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-aktivitas @capgo/capacitor-live-aktivitas untuk detail implementasi di @capgo/capacitor-live-aktivitas Menggunakan @capgo/capacitor-video-player @capgo/capacitor-live-activities Menggunakan @capgo/capacitor-live-aktivitas Menggunakan @capgo/capacitor-live-aktivitas untuk kemampuan native di Menggunakan @capgo/capacitor-live-aktivitas Menggunakan kemampuan native di @capgo/capacitor-video-player, @capgo/capacitor-video-player Menggunakan detail implementasi di @capgo/capacitor-video-player, dan Menggunakan @capgo/capacitor-native-navigation Menggunakan kemampuan native di Menggunakan @capgo/capacitor-native-navigation.