README

此包为 Laravel 应用程序提供实时网络连接监控，具有离线检测、重新连接处理和在网络恢复时同步离线数据等功能。

特性

• 实时连接监控：自动检测用户何时离线和何时重新上线。
• 重新连接处理：显示友好的横幅通知用户连接状态。
• 离线数据同步：在网络恢复后，自动同步用户离线时存储的数据（例如，表单提交或其他操作）。
• 可定制 UI：显示可定制的通知以显示连接状态的变化（在线/离线）。
• 可配置超时时间：使用配置文件设置自定义超时时间以检查连接状态。

安装

1. 通过 Composer 安装此包（如果您计划发布此包，否则只需将文件复制到您的 Laravel 项目中）。

   composer require highvertical/offline-detection

2. 发布包资源（视图、配置和 JS 文件）

   php artisan vendor:publish --provider="OfflineDetection\Providers\OfflineDetectionServiceProvider" --tag="config"
   php artisan vendor:publish --provider="OfflineDetection\Providers\OfflineDetectionServiceProvider" --tag="views"
   php artisan vendor:publish --provider="OfflineDetection\Providers\OfflineDetectionServiceProvider" --tag="assets"

3. 可选地，您可以在 .env 中配置此包

   OFFLINE_DETECTION_ENABLED=true
   OFFLINE_DETECTION_TIMEOUT=5000

使用

1. 将以下路由添加到您的 routes/web.php 文件中，以显示离线页面

   Route::get('/offline', function () {
       return view('offlinedetection::offline');
   })->name('offline');

2. 将以下脚本添加到您的主布局文件（通常是 resources/views/layouts/app.blade.php 或类似文件）中，以启用离线检测功能

   <script src="{{ asset('vendor/offlinedetection/offline-detection.js') }}"></script>

3. 当用户离线时，他们将被重定向到 /offline，当用户重新上线时，页面将自动重新加载或显示表示恢复连接的横幅。

配置

配置文件 config/offline-detection.php 允许您设置以下选项

• enabled：全局启用或禁用离线检测。
• timeout：设置检查连接状态的时间间隔（以毫秒为单位）。

定制

• 视图：要定制离线视图，请修改发布视图 resources/views/vendor/offlinedetection/offline.blade.php。
• JS 资产：负责离线检测的 JavaScript 文件位于 public/vendor/offlinedetection/offline-detection.js。您可以根据需要修改它。

离线数据同步

为了在离线时存储和同步用户操作，请使用 localStorage。例如，如果您想在用户离线时存储表单数据

function saveOfflineData(actionData) {
    let offlineData = JSON.parse(localStorage.getItem('offlineData')) || [];
    offlineData.push(actionData);
    localStorage.setItem('offlineData', JSON.stringify(offlineData));
}