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, sehingga kita dapat menangani skenario offline dan memberikan pengalaman pengguna yang lebih baik. Untuk cek ketersediaan jaringan yang lebih dalam dari hanya flag online/offline sederhana, @capgo/capacitor-network-diagnostics dapat melakukan cek URL ketersediaan, porta TCP, dan handshake WebSocket dari native code.

Persyaratan

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

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

Mengatur Proyek

Pertama, mari kita buat proyek baru menggunakan alat scaffolding masing-masing untuk framework tersebut.

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

Pilih fitur tambahan, dan ketika diminta untuk fitur tambahan, pilih "Routing" dengan menekan tombol spasi tunggu sampai proyek dibuat.

React

Pilih framework 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 ini menyediakan Jaringan __CAPGO_KEEP_0__.

npm install @capacitor/network

For Capacitor proyek, 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 fitur layar offline pada setiap framework. Kita akan menampilkan pesan sederhana ketika pengguna kehilangan koneksi internet.

Vue 3

Pada proyek Vue 3 Anda, buka file dan import modul dari src/main.js Pada 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.vueImplementing the Offline Screen <div> Vue 3 offline-screen In your Vue 3 project, open the

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

Now, ketika pengguna offline, layar offline akan ditampilkan. Ketika pengguna kembali online, layar offline akan disembunyikan.

Angular 14

Dalam proyek Angular 14 Anda, buka file src/app/app.component.ts dan import 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 <div> 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 Now, 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;
}

Capgo

Reaktor

In proyek Reaktor Anda, buka file src/App.js dan import modul dari Network Modul @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 Sekarang, ketika pengguna pergi 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;
}

Metode dan Interface Pendukung

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

The Network API provides several methods and interfaces to help you handle the network connection. Here are some of the key ones:

getStatus(): Dengarkan perubahan status jaringan.
addListener('networkStatusChange', ...)Teruskan dari Layar Offline di Vue, Angular, Reaktor dengan __CAPGO_KEEP_0__

Keep going from Offline Screen in Vue, Angular, React with Capacitor

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