مدیریت دکمه بک مرورگر در فلاتر با استفاده از GoRouter

در انتخاب ابزار مدیریت روتینگ در فلاتر، گزینههای زیادی وجود دارد. اما زمانی که به محبوبترین پکیجها نگاه میکنیم، GoRouter به عنوان یکی از بهترینها شناخته میشود. با وجود مزایای بسیار، GoRouter نیز با چالشهایی مواجه است و یکی از مشکلات قابل توجه آن، مدیریت دکمه بک مرورگر است. در این مقاله، به بررسی این مشکل و ارائه راهحل آن خواهیم پرداخت.

مشکل:

در یک برنامه معمولی، ناوبری بین صفحات به صورت پیوسته و منظم است. این ساختار اطمینان میدهد که کاربران روند خاصی را دنبال کنند. اما استفاده از دکمه بک مرورگر میتواند این روند را مختل کرده و باعث شود که برنامه به صورت غیرمنتظرهای رفتار کند یا توالی ناوبری مورد نظر از بین برود.

علاوه بر این، مدیریت این مسئله در چندین پلتفرم پیچیدگی دیگری را اضافه میکند. مهم است که کد به طور یکپارچه در تمام پلتفرمها، از جمله وب، بدون مشکل کار کند. هدف داشتن راهحلی است که نه تنها دکمه بک مرورگر را در وب مدیریت کند بلکه در سایر پلتفرمها نیز به درستی عمل کند.

راهحل:

گام 1: ایجاد یک فایل جاوا اسکریپت برای محدود کردن دکمه بک به صفحه اول PWA
اولین قدم، ایجاد یک فایل جاوا اسکریپت است که عملکرد دکمه بک را به صفحه اول برنامه وب پیشرفته (PWA) محدود کند.

نام فایل: clear_browser_history.js

function clearBrowserHistory(redirectUrl) {
  // جایگزین کردن وضعیت فعلی با وضعیت جدید
  history.replaceState(null, document.title, location.pathname);
  // پاک کردن تاریخچه جلو
   = function(event) {
    // هدایت به یک صفحه خاص
    .href = redirectUrl;
  };
}

گام 2: درج فایل جاوا اسکریپت در HTML

در مرحله بعد، باید این فایل جاوا اسکریپت را به فایل HTML خود اضافه کنید. خط کد زیر را درست بالای تگ </body> اضافه کنید.

<script src=&quotclear_browser_history.js&quot>

گام 3: کپی فایل جاوا اسکریپت

اطمینان حاصل کنید که فایل clear_browser_history.js در همان دایرکتوری که فایل HTML شما قرار دارد، کپی شده است.

گام 4: وارد کردن پکیج js و فراخوانی تابع جاوا اسکریپت در Dart

قبل از فراخوانی تابع جاوا اسکریپت، باید پکیج js را به فایل pubspec.yaml خود اضافه کنید:

dependencies:
  flutter:
   sdk: flutter
  js: ^0.6.3

سپس، در کد Dart خود، پکیج js را وارد کرده و تابع را فراخوانی کنید:
میتوانید دکمه بک مرورگر را شرطی کنید که در حالت دیباگ و یا رلیز به کدام صفحه برگردد.

js.context.callMethod('clearBrowserHistory', [
  kDebugMode
   ? &quothttp://localhost:80&quot // میتوانید پورت محلی خود را تنظیم کنید
      : &quothttps://ea2.dev&quot  //  میتوانید صفحه وب دلخواه خود را تنظیم کنید تا دکمه بک مرورگر به آن برگردد
]);

گام 5: ایجاد کلاس واسط برای مدیریت محیطهای وب و نیتیو

از آنجا که ما از پکیج js برای اجرای کد جاوا اسکریپت استفاده میکنیم، باید اطمینان حاصل کنیم که ایمپورت بسته به پلتفرم به صورت شرطی انجام میشود. ما یک کلاس واسط ایجاد خواهیم کرد که بسته به اینکه در محیط وب یا نیتیو اجرا میشود، رفتار متفاوتی داشته باشد. این نیاز به سه فایل برای پیادهسازی دارد:

نام فایل: multiPlatforms.dart

import 'native.dart' if (dart.library.html) 'web.dart' as switch_value;
class MultiPlatforms {
  MultiPlatforms._();
static Future<void> clearBrowserHistory() {
    return switch_value.clearBrowserHistory();
  }
}

نام فایل: web.dart

import 'dart:js' as js;
import 'package:flutter/foundation.dart';
Future<void> clearBrowserHistory() async {
  js.context.callMethod('clearBrowserHistory', [
    kDebugMode
        ? &quothttp://localhost:80&quot // میتوانید پورت سفارشی خود را تنظیم کنید
        : &quothttps://ea2.dev&quot  // میتوانید صفحه وب سفارشی خود را تنظیم کنید
  ]);
}

نام فایل: native.dart

Future<void> clearBrowserHistory() async {}

مرحله 6: ادغام کد با GoRouter

برای گام آخر، باید تعیین کنید که کجا این کد را فراخوانی کنید. در GoRouter، قسمتی وجود دارد که ریدایرکت شدن را مدیریت میکند. بهترین نقطه برای فراخوانی کد پاک کردن تاریخچه مرورگر، این بخش است.

در اینجا یک نمونه کد آورده شده است:

final appRouter = GoRouter(
  initialLocation:  ... // این قسمت را بر اساس کد خود تکمیل کنید
  redirect: (context, state) {  // بخش مهم برای این مقاله در اینجا است
MultiPlatforms.clearBrowserHistory();
    return null;
  },
  routes: [...] // این قسمت را بر اساس کد خود تکمیل کنید
);

با دنبال کردن این مراحل، میتوانید دکمه بازگشت مرورگر را به طور موثر در برنامه Flutter خود با استفاده از GoRouter مدیریت کنید و تجربه کاربری یکنواختی را در همه پلتفرمها تضمین کنید.

برای هرگونه سوال یا گفتگوی بیشتر، می‌توانید در کامنت‌ها یا از طریق LinkedIn با من ارتباط برقرار کنید.