تحويل تطبيق هاتف إلى ملحق متصفح

بدأ مشروع KeyRush على منصتي iPhone وAndroid. وعندما قررنا نقله إلى منصة Chrome، كان أمامنا خياران: إما تغليف التطبيق الحالي بطبقة متعددة المنصات، أو إعادة كتابته ليتوافق مع المتصفح. لقد أعدنا كتابته، حيث قمنا بنقله من إصدار Android. لغة JavaScript بسيطة، وManifest V3، بدون إطار عمل وبدون خطوات بناء. وإليكم ما تعلمناه من خلال القيام بذلك.

أصبحت لوحة المفاتيح حقيقة الآن

على الهاتف، يُعد برنامج تدريب الكتابة حلاً تقريبيًّا. فاللوحة المفاتيح التي تظهر على الشاشة هي جهاز الإدخال والموضوع نفسه في آن واحد، وهو وضع غريب بعض الشيء. أما في المتصفح، فيكون لدى المستخدم لوحة مفاتيح حقيقية تحت أصابعه — وهو بالضبط ما يحاول التطبيق تعليمه.

وقد تغير ذلك أكثر مما توقعنا. فالتخطيطات تختلف من بلد لآخر ومن جهاز لآخر. وهناك مفاتيح تعديل. ويقوم المستخدمون بالضغط المستمر على المفاتيح، أو الضغط على مفتاحين في آن واحد، أو التبديل بين التخطيطات أثناء الجلسة. وعلى لوحة المفاتيح الفعلية، يُلاحظ على الفور أي خطأ بسيط في برنامج التدريب، لذا كان علينا أن نكون أكثر حرصًا بكثير فيما يتعلق بما يُعتبر ضغطة مفتاح صحيحة.

لقد احتفظنا بلوحة المفاتيح التي تظهر على الشاشة، لكن وظيفتها تغيرت. ففي الهاتف، هي ما تضغط عليه. أما في الملحق، فهي بمثابة دليل: فهي تضيء المفتاح الذي يجب أن تضغط عليه بعد ذلك، حتى تتمكن من إبقاء عينيك على الشاشة بدلاً من يديك. هذا هو جوهر الكتابة باللمس، وقد سمح لنا المتصفح بتطبيق هذه الفكرة بجدية.

أحجام النوافذ ليست مجموعة ثابتة

تتوفر شاشات الهواتف بعدد محدود من الأشكال. أما نوافذ المتصفح فتتوفر بأي شكل كان. فالنافذة المنبثقة للإضافة ضيقة وقصيرة؛ في حين أن علامة التبويب الكاملة قد تكون ضخمة. وكان لا بد أن يعمل التطبيق نفسه بشكل مناسب في كلتا الحالتين.

لذلك نقدم كلا الخيارين. يُفتح تطبيق KeyRush في نافذة منبثقة لإجراء اختبار سريع، وفي علامة تبويب كاملة عندما تريد مساحة كافية للدروس والمسابقات. ويؤدي الضغط على Alt+Shift+K إلى فتحه دون الحاجة إلى استخدام الماوس — وهو ما بدا لنا الإعداد الافتراضي المناسب لتطبيق مخصص للكتابة.

النوافذ المنبثقة تنسى كل شيء

تُغلق النافذة المنبثقة فور النقر خارجها، ويُحذف معها كل ما كانت تحتفظ به في الذاكرة. أما في نظام Android، فيمكن نقل التطبيق إلى الخلفية ثم إعادته إلى المكان نفسه الذي توقف عنده بالضبط. أما في النافذة المنبثقة، فيجب أن تفترض أن المستخدم قد يغادر في أي لحظة.

لذا، فإن كل ما يهم يتم تخزينه في ذاكرة المتصفح بدلاً من النافذة، وتستمد كل من النافذة المنبثقة وعلامة التبويب الكاملة البيانات من نفس الحالة المخزنة. فما أن تنتهي من إجراء اختبار في النافذة المنبثقة، وتفتح علامة التبويب الكاملة، حتى تجد النتيجة موجودة بالفعل. إنه قرار بسيط على مستوى البنية جعل الملحق بأكمله يبدو أكثر متانة.

تعد الأذونات قرارًا متعلقًا بالتصميم

تطلب تطبيقات Android أذونات أيضًا، لكن المستخدمين نادرًا ما يقرؤونها. أما مستخدمو الإضافات، فغالبًا ما يقرؤونها، كما أن المتصفح يعرض التحذيرات مباشرةً في نافذة التثبيت. تطلب KeyRush إذنًا واحدًا فقط: التخزين. ولا تحتاج إلى الاطلاع على الصفحات التي تزورها، لذا فهي لا تطلب ذلك. وقد كتبنا منشورًا منفصلاً حول سبب أهمية ذلك بالنسبة لنا.

ما احتفظنا به

لم يتغير المنتج الفعلي تقريبًا على الإطلاق: اختبارات السرعة المحددة بـ 15 و30 و60 و120 ثانية، ودروس الكتابة باللمس مصنفة حسب الأصابع، والمسابقات ضد خصوم الكمبيوتر، والإحصائيات، وخريطة الحرارة للمفاتيح التي تخطئها، والتحدي اليومي، وجميع الإنجازات البالغ عددها 44 إنجازًا. من ينتقل من الهاتف إلى الإصدار الموسع سيشعر بالراحة في غضون دقيقة واحدة.

كما حافظنا على المبادئ الأساسية. يعمل التطبيق بشكل كامل دون اتصال بالإنترنت. ويتم حفظ التقدم المحرز في متصفحك فقط. لا توجد حسابات ولا حاجة لتسجيل الدخول.

لماذا لم نشارك الكود

قد تبدو إعادة الكتابة مكلفة، وقد كانت كذلك من بعض النواحي. لكن تطبيق تدريب الكتابة ليس تطبيقًا ضخمًا، والمنطق المهم — مثل نظام النقاط، والدروس، والمستويات، والإنجازات — صغير بما يكفي ليتم نقله يدويًّا وبعناية من النسخة الأصلية لـ Android. في المقابل، حصلنا على ملحق يتم تحميله على الفور، ولا يعتمد على أي مكونات خارجية تحتاج إلى تحديث، ويعمل وكأنه صُمم خصيصًا للمتصفح، لأنه بالفعل صُمم لهذا الغرض.