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 Jaringan API. Jaringan API menyediakan informasi jaringan dan koneksi, memungkinkan kita untuk menghandle skenario offline dan memberikan pengalaman pengguna yang lebih baik. Untuk pengecekan ketersediaan yang lebih dalam dari hanya flag online/offline sederhana, @capgo/capacitor-network-diagnostics dapat menguji ketersediaan URL, porta TCP, dan tangan-tertangkap WebSocket dari code native.

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 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 petunjuk, dan ketika diminta fitur tambahan, pilih “Routing” dengan menekan tombol spasi 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 instal @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 fitur layar offline di setiap framework. Kita akan menampilkan pesan sederhana ketika pengguna kehilangan koneksi internet.

Vue 3

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

), tambahkan elemen App.vuedengan id <div> untuk menampilkan pesan layar offline: offline-screen __CAPGO_KEEP_2__

<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 src/app/app.component.ts dan import modul dari 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 keluar dari jaringan, 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 -->

Dalam template aplikasi Anda ( app.component.css untuk menampilkan pesan layar offline:

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

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

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

Tambahkan gaya berikut ke file

React

Dalam proyek React Anda, buka file dan import modul dari src/App.js module dari Network Tambahkan gaya berikut ke file: @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

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

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

: Tanyakan status jaringan saat ini.

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

getStatus()Teruskan dari Layar Offline di Vue, Angular, React dengan __CAPGO_KEEP_0__
addListener('networkStatusChange', ...)Dalam proyek React Anda, buka file __CAPGO_KEEP_0__ dan import modul dari __CAPGO_KEEP_1__

Tambahkan gaya berikut ke file Capacitor: __CAPGO_KEEP_1__

Jika Anda menggunakan Offline Screen 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 asli dalam Menggunakan @capgo/capacitor-native-navigation.