Buat Layar Offline di Vue 3, Angular 14, atau React

Dalam tutorial ini, kami akan belajar cara membuat layar offline di aplikasi Vue 3, Angular 14, dan React menggunakan Jaringan API. Jaringan 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 dari hanya flag online/offline sederhana, @capgo/capacitor-diagnostik-jaringan Dapat menguji ketersediaan URL, porta TCP, dan tangan WebSocket dari native code.

Prerequisites

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

Setting Up the Project

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

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

Untuk menampilkan layar offline, tambahkan elemen App.vue dengan id <div> untuk menampilkan pesan layar offline: 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 offline, layar offline akan ditampilkan. Ketika pengguna kembali online, layar offline akan disembunyikan.

Angular 14

Buka proyek Angular 14 Anda src/app/app.component.ts dan import modul dari 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);
  };

}

In template aplikasi Anda (app.component.htmlTambahan a) <div> untuk menampilkan pesan layar offline: offline-screen Tambahkan gaya berikut ke file

<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 CSS: app.component.css React

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

React

Buka proyek React Anda src/App.js import file dan impor Network 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 file CSS: 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 offline, layar offline akan ditampilkan. Ketika pengguna kembali online, layar offline akan disembunyikan.

Metode dan Interface yang Dapat Dibantu

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

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

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

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