Ինչպես կառուցել բջջային սարքերին հարմարեցված վեբ հավելված

Բջջային հարմար վեբ հավելվածը վեբկայք է, որը աշխատում է որպես հավելված հեռախոսում․ հարմարվում է նեղ էկրանին, ունի մեծ հպման թիրախներ, արագ բեռնվում է բջջային ինտերնետով և կարող է ավելացվել գլխավոր էկրան՝ որպես առաջադիմական վեբ հավելված (PWA)։ Շատ նոր հավելվածների համար սա գործնական առաջին տարբերակն է՝ մեկ կոդային բազա, մեկ հղում, առանց խանութի վերանայման։ Սակայն այն իրական սահմանափակումներ ունի, հատկապես iPhone-ի ծանուցումների և սարքի խորը մուտքի առումով, և այս ուղեցույցը ուղիղ է այն մասին, թե երբ է պետք native հավելված։

Երեք ձև՝ «բջջայինում լինելու» համար

PWA-ն արձագանքող վեբ հավելված է մի քանի լրացուցիչ հնարավորություններով, ուստի պետք չէ ընտրել առաջին երկուսի միջև։ Նախ կառուցեք արձագանքող, ապա դարձրեք տեղադրվող։ Ավելի խորը համեմատության համար տե՛ս native և առաջադիմական վեբ հավելվածները։

Ինչ կարող և ինչ չեն կարող վեբ հավելվածները հեռախոսներում

Բրաուզերները ավելին են անում, քան շատերը ենթադրում են․

• Տեսախցիկ և լուսանկարի վերբեռնում, ստանդարտ ֆայլային մուտքերի միջոցով։
• Գտնվելու վայր, օգտատիրոջ թույլտվությամբ։
• Տեղադրում գլխավոր էկրանին պատկերակով և լիաէկրան բացմամբ։
• Օֆլայն աշխատանք՝ էջերի և տվյալների քեշավորմամբ service worker-ի միջոցով (ֆոնային սկրիպտ, որը բրաուզերն աշխատեցնում է ձեր կայքի համար)։
• Push ծանուցումներ՝ iPhone-ում մի բռնապատումով։ Apple-ի WebKit թիմը նշում է, որ web push-ը եկել է iOS-ին և iPadOS-ին 16.4 տարբերակից՝ գլխավոր էկրան ավելացված վեբ հավելվածների համար։ Օգտատերերը նախ պետք է տեղադրեն հավելվածը, ապա թույլ տան ծանուցումները։

Որտեղ native-ը դեռ առավելություն ունի․

• Խորը սարքային գործառույթներ, ինչպիսիք են ֆոնային գտնվելու վայրը, Bluetooth աքսեսուարները, առողջության տվյալները և գլխավոր էկրանի վիջեթները․ բրաուզերի աջակցությունը սահմանափակ է կամ տարբերվում է պլատֆորմից։
• Խանութում հայտնաբերում։ Եթե մարդիկ խանութում են փնտրելու ձեզ, պետք է լինեք դրանում։
• Ծանր օֆլայն աշխատանք, օրինակ՝ մեծ տվյալների բազմությունների ֆոնային համաժամեցում։
• Արտադրողականության համար կարևոր գրաֆիկա, օրինակ՝ պահանջկոտ խաղեր։

Եթե այս բաներից ոչ մեկը կենտրոնական չէ ձեր հավելվածի համար, վեբ հավելվածը, հավանաբար, լավ կծառայի։

Նախ հեռախոսների համար նախագծում

Նախ նախագծեք հեռախոսի դասավորությունը և թողեք, որ այն ընդլայնվի մեծ էկրանների համար․ հակառակը սովորաբար ստեղծում է խիտ հեռախոսային էկրաններ։

Դասավորություն

• Մեկ սյունակ փոքր էկրաններին։ Կողային վահանակները դառնում են ներքևի բար կամ մենյու։
• Առանց կողքով ոլորման։ Լայն աղյուսակները դառնում են քարտեր կամ ոլորվում են իրենց սեփական կոնտեյների ներսում։
• Ընթեռնելի տեքստ առանց խոշորացման՝ մոտ 16px հիմնական տեքստ։

Հպում

• Մեծ հպման թիրախներ։ Մոտ 44 × 44 պիքսել նվազագույն չափ է, որը սովորական է։ Թողեք տարածություն նրանց միջև։
• Հիմնական գործողությունները բթամատի հասանելիության գոտում, բարձր հեռախոսների վրա՝ էկրանի ներքևի մասի մոտ։
• Առանց միայն hover-ով գործառույթների։ Tooltip-ներ և մենյուներ, որոնք հայտնվում են hover-ով, հպման էկրաններին գոյություն չունեն։
• Ճիշտ ստեղնաշար։ Էլ․ փոստի դաշտերը պետք է բացեն էլ․ փոստի ստեղնաշարը, հեռախոսի դաշտերը՝ թվերի վահանակը։ Խնդրեք ճիշտ input տիպերը։

Արագություն

• Փոքր պատկերներ ողջամիտ չափերով, բեռնված երբ մտնում են տեսադաշտ։
• Ավելի քիչ ծանր գրադարաններ։ Յուրաքանչյուրը ավելացնում է ներբեռնման ժամանակը բջջային ինտերնետում։
• Skeleton էկրաններ կամ հստակ բեռնման վիճակներ, որպեսզի հավելվածը երբեք չերևա սառած։

Անվտանգ գոտիներ և հասցեի տող

Ժամանակակից հեռախոսներում բովանդակությունը կարող է հայտնվել ծղոտի կամ գլխավոր ցուցիչի տակ, հատկապես լիաէկրան տեղադրված հավելվածում։ Խնդրեք safe-area padding։ Նաև հետևեք լրիվ բարձրության դասավորություններին, որոնք թռչկոտում են, երբ բրաուզերի հասցեի տողը հայտնվում և անհետանում է։

PWA դարձնել տեղադրվող

Տեղադրվող լինելու համար վեբ հավելվածին անհրաժեշտ է՝

1. Web app manifest — փոքր ֆայլ՝ հավելվածի անունով, կարճ անունով, պատկերակներով, թեմայի գույնով և այն, թե ինչպես պետք է բացվի (սովորաբար լիաէկրան «standalone»)։
2. Պատկերակներ պլատֆորմների սպասած չափերով, ներառյալ մեկը Apple սարքերի համար։
3. HTTPS, որն ունի ցանկացած ճիշտ հոստված հավելված։
4. Service worker, եթե ուզում եք օֆլայն աջակցություն կամ push։

Չափազանց հետո ասեք օգտատերերին, թե ինչպես տեղադրել։ Android բրաուզերները սովորաբար առաջարկում են տեղադրման հուշում կամ մենյուի կետ․ iPhone-ում դա Share կոճակն է, ապա «Add to Home Screen»։ «Տեղադրեք այս հավելվածը» կարճ նշումը այդ քայլերով մեծապես օգնում է։

Օֆլայն աջակցությունը այն տեղն է, որտեղ PWA-ները բարդանում են։ Հավելվածի էջերի քեշավորումը, որպեսզի այն բացվի առանց կապի, պարզ է։ Տվյալները օֆլայն փոփոխելը և հետո համաժամեցնելը իրական աշխատանք է․ պահանջեք այն միայն, եթե օգտատերերին իսկապես պետք է։

Առաջին պրոմփթը, որը աշխատում է

Կառուցիր վեբ հավելված մեր մաքրման թիմի համար, որպեսզի նրանք տեսնեն այսօրվա աշխատանքները և նշեն դրանք կատարված։ Նախագծիր հեռախոսների համար՝ նախ․ մեկ սյունակ, մեծ հպման թիրախներ, հիմնական գործողության կոճակը ամրացված մոտ ներքևում, առանց միայն hover-ով կառավարիչների, առանց կողքով ոլորման և ճիշտ ստեղնաշարեր հեռախոսի և էլ․ փոստի դաշտերի համար։ Յուրաքանչյուր աշխատանք ցույց է տալիս հասցեն (հպելով՝ բացվում է քարտեզում), հաճախորդի հեռախոսահամարը (հպելով՝ զանգ), ստուգաթերթ և «Նշել որպես ավարտված» կոճակ, որը կարող է լուսանկար վերցնել։ Մենեջերները մուտք են գործում laptop-ից՝ աշխատանքները նշանակելու համար․ լայն էկրանին ցույց տուր աղյուսակ քարտերի փոխարեն։ Դարձրու այն տեղադրվող PWA մանիֆեստով, պատկերակներով և standalone ցուցադրմամբ, քեշավորիր հավելվածի կմախքը, որպեսզի այն բացվի առանց ազդանշանի։ Տվյալները պահիր բազայում։

Կառուցման քայլեր

1. Կառուցեք հեռախոսի դասավորությունը նախ, նմուշ տվյալներով, և ստուգեք հեռախոսի չափի նախադիտման մեջ։
2. Փորձարկեք իրական հեռախոսների վրա — գոնե մեկ iPhone և մեկ Android, եթե ձեր օգտատերերն ունեն երկուսն էլ։ Էմուլյատորները բաց են թողնում այնպիսի բաներ, ինչպիսին է էկրանի ստեղնաշարը, որը ծածկում է մուտքերը։
3. Անցեք հիմնական աշխատանքը մեկ բթամատով։ Եթե որևէ բան պահանջում է երկու ձեռք կամ խոշորացում, շտկեք։
4. Ավելացրեք մանիֆեստը և պատկերակները, ապա տեղադրեք երկու պլատֆորմում և ստուգեք պատկերակը, անունը և splash-ը։
5. Որոշեք օֆլայն աշխատանքի մասին։ Սկսեք «բացվում է առանց ազդանշանի և ցույց է տալիս հստակ հաղորդագրություն», և ավելացրեք օֆլայն խմբագրում միայն անհրաժեշտության դեպքում։
6. Ստուգեք արագությունը դանդաղ կապի վրա։ Բրաուզերի developer tools-ը կարող է այն մոդելավորել։
7. Ծանուցումները ավելացրեք վերջում, եթե ընդհանրապես։ Եվ պլանավորեք էլ․ փոստային այլընտրանք այն օգտատերերի համար, որոնք չեն տեղադրում։

Սովորական սխալներ

• Նախագծել միայն մեծ մոնիտորի վրա։ Ստուգեք յուրաքանչյուր էկրան հեռախոսի լայնությամբ՝ աշխատանքի ընթացքում։
• Աղյուսակներ, որոնք դուրս են գալիս։ Փոքր էկրաններին շարքերը դարձրեք քարտեր։
• Փոքր հպման թիրախներ և մոտ գտնվող հղումներ։
• Ձևեր, որոնք կռվում են ստեղնաշարի հետ — սխալ input տիպեր, դաշտեր, որոնք թաքնված են ստեղնաշարի հետևում, առանց «հաջորդ» հոսքի։
• Ենթադրել, որ iPhone-ի push-ը աշխատում է բրաուզերի ներդիրում։ Այն պահանջում է հավելվածը տեղադրված լինի գլխավոր էկրանին։
• Խոստանալ App Store հավելված, որը չեք կարող թողարկել։ Եթե խանութը կարևոր է, առանձին պլանավորեք այն։
• Վեբկայքը փաթեթավորել և անվանել հավելված։ Apple-ի App Review Guidelines-ը պահանջում են հավելվածներ, որոնք գերազանցում են վերափաթեթավորված վեբկայքը․ բարակ թաղանթը մերժման ռիսկ ունի։

Երբ պետք է native հավելված

Անցեք native-ի (կամ պլանավորեք native տարբերակ վեբ հավելվածից հետո), երբ՝

• Խանութում ներկայությունն է, թե ինչպես կգտնեն ձեզ հաճախորդները։
• Հիմնվում եք ֆոնային գտնվելու վայրի, Bluetooth-ի, առողջության տվյալների, վիջեթների կամ այլ սարքային գործառույթների վրա, որոնք բրաուզերները հուսալիորեն չեն առաջարկում։
• Ձեր հավելվածը պետք է ամբողջությամբ աշխատի օֆլայն երկար ժամանակով։
• Ձեր օգտատերերը դա ակնկալում են՝ որոշ լսարաններ պարզապես չեն օգտագործի այն, ինչ խանութում չէ։

Խանութում հրապարակումը ունի իր ծախսերը և քայլերը։ 2026 թվականի սեպտեմբերի դրությամբ Apple-ի developer ծրագիրը արժե 99 ԱՄՆ դոլար տարեկան, իսկ Google Play developer հաշիվը՝ 25 ԱՄՆ դոլար մեկանգամյա, ըստ նրանց սեփական կայքերի, և յուրաքանչյուր թողարկում անցնում է վերանայման։ Շատ թիմեր սկսում են մասնագիտացած վեբ հավելվածով, որպեսզի ապացուցեն, որ մարդիկ ուզում են արտադրանքը, ապա ներդրում են native-ի մեջ, երբ արդեն գիտեն։ Ինչպես կառուցել հավելված AI-ով ներկայացնում է այդ առաջին փուլը ամբողջությամբ։

Կառուցում Mythex-ով

Mythex-ը կառուցում է վեբ հավելվածներ․ դուք նկարագրում եք հավելվածը չաթում և ստուգում եք այն կենդանի նախադիտման մեջ desktop-ում և հեռախոսի չափի շրջանակում, որը կարելի է փոխել։ Փաստաթղթերն ունեն հեռախոսների համար արձագանքող պրոմփթ՝ փոքր էկրանի դասավորությունները շտկելու համար։ PWA մանիֆեստ և պատկերակներ կարող եք խնդրել ինչպես ցանկացած այլ գործառույթ, ապա հրապարակել հանրային հղում, որը աշխատում է ցանկացած հեռախոսում։ Pro պլանում Mythex-ը կարող է նաև փաթեթավորել հավելվածը որպես Android և iPhone հավելված, որն ուղարկվում է Google Play-ի ներքին թեստավորմանը և TestFlight-ին։ Սկսելու համար տե՛ս AI վեբ հավելվածի կառուցիչը կամ զննեք հավելվածների ձևանմուշները։ Աշխատող օրինակի համար կարդացեք ինչպես կառուցել սովորությունների հետևման հավելված։

Հարցեր