Як Cordova допомагає в портуванні React на Android

Ця публікація створена редакцією DOU з дозволу Віталія Рубана. Першоджерело.


Я тут трохи облажався, але cordova схоже мене спасе, та давайте спочатку (багато тексту).

Зробили ми нещодавно апку (react, vite, react-router-dom) одна з основних фіч якої була у максимально простій доставці до кінцевого користувача. Буквально: скинув один файл і все працює з коробки, без танців з бубнами — відкрив в Chrome і маєш щастя. А HTML (ну начебто) якраз саме про це, то ж в теорії ідея була зашибісь)

То ж ми зробили, протестили під віндою і наче все супер. Залили на Android — а там білий екран... Як так? Почали копати, виявилося що react-router-dom не дуже любить, коли його запускають на чомусь, що не схоже не справжній URL, наприклад content://com.google.android і просто тупо кидає exception, що обвалює весь застосунок на корені.

Але ми то не пальцем роблені, то ж за дві години зробили патч в react-router-dom (може, до речі, його викласти?) і воно ожило. Але тут друга халепа — зображення. Зображення тупо не працюють — хоч ти трісни.

Чотири години шаманізму, кави, коли, матюків і ні... Не працюють. Що робити?

Вирішили пакувати в APK. Першою ідеєю було взяти React Native. Тут React і там React — все наче сходиться. Але ж ні, у React Native розмітка йде власними компонентами, а у мене оці всякі div, span, article і прости нас main з nav...

І тут приходить Cordova, яка каже: а давай мені свій HTML, а я вже далі якось сама... І ви знаєте — полетіло. Так прийшлось помучитися з установкою Android, раз 20 перезавантажити ноут, бо на вінді ж PATH не оновлюється одразу, але вчора я залив на телефон APK який працює))

Так там теж є складнощі з підписом, з тим що ЗАСТОСУНОК НЕ ПЕРЕВІРЕНИЙ КИНЬ КАКУ ВІДПРАВ ГУГЛУ НЕ ЧІПАЙ СТРАШНО, але в цілому схоже, що це наш варіант.

То ж кому потрібно портувати React в Android — подивіться в сторону cordova. Так, вона старенька, але схоже, що ще може дати джазу.

Бережіть себе, допомагайте ЗСУ,

Ваш Зампомиш

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

👍ПодобаєтьсяСподобалось2
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Замість старої cordova, вже є новий і стабільний capacitor

Теж використовував його, дуже легкий у використанні.

Так і сталося, після декількох експерементів перейшли саме на Capacitor. Скоро будемо розкатувати користувачам — побачимо як воно піде.

Підписатись на коментарі