როგორ ავაშენოთ მობილურისთვის მორგებული ვებ-აპი

მობილურისთვის მორგებული ვებ-აპი არის ვებსაიტი, რომელიც აპივით მუშაობს ტელეფონზე: ეტევა ვიწრო ეკრანში, აქვს დიდი შეხების ზონები, სწრაფად იტვირთება მობილური ინტერნეტით და შეიძლება დაემატოს საწყის ეკრანზე, როგორც პროგრესული ვებ-აპი (PWA). ახალი აპებისთვის ეს უმეტესად პრაქტიკული პირველი ვერსიაა — ერთი კოდბაზა, ერთი ბმული და მაღაზიის შემოწმების გარეშე. მას აქვს რეალური შეზღუდვებიც, განსაკუთრებით iPhone-ზე შეტყობინებებისა და მოწყობილობის ღრმა ფუნქციების მიმართ, და ეს გზამკვლევი პირდაპირ აღწერს იმ შემთხვევებს, როცა ნატიური აპი გჭირდებათ.

სამი გზა „მობილურზე ყოფნისთვის“

PWA არის ადაპტური ვებ-აპი რამდენიმე დამატებით, ამიტომ პირველ ორს შორის არ მოგიწევთ არჩევა. ჯერ ააშენეთ ადაპტური, შემდეგ გახადეთ დასაინსტალირებელი. უფრო ღრმა შედარებისთვის იხილეთ ნატიური და პროგრესული ვებ-აპები.

რის გაკეთება შეუძლია და რის ვერა ვებ-აპს ტელეფონზე

ბრაუზერს უფრო მეტი შეუძლია, ვიდრე ბევრი ფიქრობს:

• კამერა და ფოტოს ატვირთვა, სტანდარტული ფაილური ველების საშუალებით.
• მდებარეობა, მომხმარებლის ნებართვით.
• დაყენება საწყის ეკრანზე ხატულით და სრულეკრანიანი გაშვებით.
• ოფლაინ მუშაობა გვერდებისა და მონაცემების ქეშირებით service worker-ის (ბრაუზერის მიერ ფონურად გაშვებული სკრიპტი თქვენი საიტისთვის) საშუალებით.
• Push შეტყობინებები — iPhone-ზე კი: Apple-ის WebKit გუნდის თქმით, ვებ push მოვიდა iOS-ზე და iPadOS-ზე 16.4 ვერსიიდან, საწყის ეკრანზე დამატებული ვებ-აპებისთვის. მომხმარებელმა ჯერ უნდა დააინსტალიროს აპი, შემდეგ კი უნდა დართოს შეტყობინებების ნებართვა.

სად რჩება ნატიური უპირატესობა:

• ღრმა მოწყობილობის ფუნქციები, როგორიცაა ფონური მდებარეობა, Bluetooth აქსესუარები, ჯანმრთელობის მონაცემები და საწყის ეკრანის ვიჯეტები — ბრაუზერში მხარდაჭერა შეზღუდულია ან პლატფორმის მიხედვით განსხვავდება.
• მაღაზიაში ძებნა (App Store discovery). თუ ხალხი მაღაზიაში მოგძებნით, იქ უნდა იყოთ.
• მძიმე ოფლაინ სამუშაო, მაგალითად დიდი მონაცემთა ნაკრებების ფონური სინქრონიზაცია.
• წარმადობისთვის კრიტიკული გრაფიკა, მაგალითად მძიმე თამაშები.

თუ არცერთი ეს თქვენი აპის ცენტრში არ არის, ვებ-აპი სავარაუდოდ კარგად გემსახურებათ.

დიზაინი ჯერ ტელეფონისთვის

დააპროექტეთ ტელეფონის განლაგება პირველი და გაფართოვდეს დიდი ეკრანებისთვის; საპირისპირო მიდგომა, როგორც წესი, შეზღუდულ ტელეფონის ეკრანებს იძლევა.

განლაგება

• ერთი სვეტი პატარა ეკრანებზე. გვერდითი პანელები გადაიქცევა ქვედა ზოლად ან მენიუდ.
• ჰორიზონტალური გადაადგილების გარეშე. ფართო ცხრილები გადაიქცევა ბარათებად ან იგორებს საკუთარ კონტეინერში.
• კითხვადი ტექსტი ზუმის გარეშე — ძირითადი ტექსტი დაახლოებით 16px.

შეხება

• დიდი შეხების ზონები. დაახლოებით 44 × 44 პიქსელი ჩვეულებრივი მინიმუმია. დატოვეთ სივრცე მათ შორის.
• მთავარი მოქმედებები ხელის მოძრაობის ზონაში, მაღალ ტელეფონებზე ეკრანის ქვედა ნაწილთან ახლოს.
• არანაირი მხოლოდ-hover ფუნქცია. ჰოვერით გამოჩენილი მინიშნებები და მენიუები შეხების ეკრანზე არ არსებობს.
• სწორი კლავიატურა. ელფოსტის ველებმა უნდა გამოიტანონ ელფოსტის კლავიატურა, ტელეფონის ველებმა — ციფრების პანელი. მიუთითეთ სწორი input-ის ტიპები.

სიჩქარე

• პატარა სურათები გონივრულ ზომებში, რომლებიც იტვირთება ეკრანზე გამოჩენისას.
• ნაკლები მძიმე ბიბლიოთეკა. ყოველი მათგანი ზრდის ჩამოტვირთვის დროს მობილურ ინტერნეტზე.
• Skeleton ეკრანები ან მკაფიო ჩატვირთვის მდგომარეობები, რათა აპი არასდროს ჩანდეს გაჭედილი.

უსაფრთხო ზონები და მისამართის ზოლი

თანამედროვე ტელეფონებზე შინაარსი შეიძლება მოხვდეს ეკრანის ამონაკვეთის ან ქვედა საჩვენებელი ზოლის ქვეშ, განსაკუთრებით დაყენებულ სრულეკრანიან აპში. მოითხოვეთ უსაფრთხო ზონის padding. ასევე გაუფრთხილდით სრულსიმაღლიან განლაგებებს, რომლებიც „ხტება“ ბრაუზერის მისამართის ზოლის გამოჩენისა და გაქრობისას.

დაყენებადი აპის შექმნა (PWA)

დასაინსტალირებლად ვებ-აპს სჭირდება:

1. ვებ-აპის manifest — პატარა ფაილი აპის სახელით, მოკლე სახელით, ხატულებით, თემის ფერით და იმით, როგორ უნდა გაიხსნას (როგორც წესი, სრულეკრანიანად — „standalone“).
2. ხატულები პლატფორმების მოთხოვნილ ზომებში, მათ შორის Apple-ის მოწყობილობებისთვის შესაფერისი.
3. HTTPS, რაც ნებისმიერ სათანადოდ ჰოსტირებულ აპს უკვე აქვს.
4. Service worker, თუ გინდათ ოფლაინ მხარდაჭერა ან push.

ამის შემდეგ მომხმარებლებს უთხარით, როგორ დააინსტალირონ. ანდროიდის ბრაუზერები, როგორც წესი, სთავაზობენ დაყენების ფანჯარას ან მენიუს პუნქტს; iPhone-ზე ეს არის გაზიარების ღილაკი და შემდეგ „Add to Home Screen“ („საწყის ეკრანზე დამატება“). მოკლე შენიშვნა „დააინსტალირეთ ეს აპი“ ამ ნაბიჯებით ძალიან ეხმარება.

ოფლაინ მხარდაჭერა სადაც PWA-ები რთულდება. აპის გვერდების ქეშირება, რომ ის კავშირის გარეშე გაიხსნას, მარტივია. მომხმარებლებისთვის მონაცემების ოფლაინ შეცვლა და მოგვიანებით სინქრონიზაცია კი რეალური სამუშაოა — ითხოვეთ ეს მხოლოდ მაშინ, თუ მომხმარებლებს ნამდვილად სჭირდებათ.

პირველი პრომპტი, რომელიც მუშაობს

ააშენე ვებ-აპი ჩვენი დასუფთავების გუნდისთვის, რომ დღევანდელი სამუშაოები ნახონ და მონიშნონ შესრულებულად. დააპროექტე ჯერ ტელეფონისთვის: ერთი სვეტი, დიდი შეხების ზონები, მთავარი მოქმედების ღილაკი ფიქსირებული ქვედა ნაწილში, არანაირი მხოლოდ-hover კონტროლი, ჰორიზონტალური გადაადგილების გარეშე და სწორი კლავიატურები ტელეფონისა და ელფოსტის ველებისთვის. თითოეულ სამუშაოში ჩანს მისამართი (შეხებით იხსნება რუკაში), კლიენტის ტელეფონი (შეხებით რეკავს), ჩამონათვალი და ღილაკი „მონიშნე დასრულებულად“, რომელსაც შეუძლია ფოტოს გადაღება. მენეჯერები ლეპტოპიდან შედიან სისტემაში სამუშაოების დასანიშნად; ფართო ეკრანზე აჩვენე ცხრილი ბარათების ნაცვლად. გახადე დასაინსტალირებელი PWA manifest-ით, ხატულებით და standalone რეჟიმით, და ქეშირება გაუკეთე აპის გარსს, რომ კავშირის გარეშეც გაიხსნას. მონაცემები შეინახე მონაცემთა ბაზაში.

ასაშენებელი ნაბიჯები

1. ააშენეთ ჯერ ტელეფონის განლაგება ნიმუშ მონაცემებზე და შეამოწმეთ ტელეფონის ზომის გადახედვაში.
2. შეამოწმეთ რეალურ ტელეფონებზე — მინიმუმ ერთი iPhone და ერთი Android, თუ თქვენს მომხმარებლებს ორივე აქვთ. ემულატორები ხშირად ვერ ამჩნევენ ისეთ რამეებს, როგორიცაა ეკრანის კლავიატურა, რომელიც ფარავს ველებს.
3. გაიარეთ მთავარი ამოცანა ერთი ცერით. თუ რამე ორ ხელს ან ზუმს მოითხოვს, გაასწორეთ.
4. დაამატეთ manifest და ხატულები, შემდეგ დააინსტალირეთ ორივე პლატფორმაზე და შეამოწმეთ ხატულა, სახელი და splash ეკრანი.
5. გადაწყვიტეთ ოფლაინ რეჟიმი. დაიწყეთ იმით, რომ აპი კავშირის გარეშე იხსნება და აჩვენებს მკაფიო შეტყობინებას; ოფლაინ რედაქტირება დაამატეთ მხოლოდ საჭიროების შემთხვევაში.
6. შეამოწმეთ სიჩქარე ნელ კავშირზე. თქვენი ბრაუზერის დეველოპერის ინსტრუმენტებს შეუძლია ასეთი კავშირის სიმულაცია.
7. შეტყობინებები ბოლოს დაამატეთ, თუ საერთოდ — და დაგეგმეთ ელფოსტით შეხსენება მომხმარებლებისთვის, რომლებიც არ აინსტალირებენ.

გავრცელებული შეცდომები

• მხოლოდ დიდ მონიტორზე დაპროექტება. შეამოწმეთ ყველა ეკრანი ტელეფონის სიგანეზე, პროცესში.
• გადავსებული ცხრილები. პატარა ეკრანებზე მწკრივები გადააქციეთ ბარათებად.
• პატარა შეხების ზონები და ერთმანეთთან ახლოს განლაგებული ბმულები.
• ფორმები, რომლებიც კლავიატურასთან კონფლიქტობს — არასწორი input-ის ტიპები, ველები კლავიატურის უკან, „შემდეგი“ ნაბიჯის გარეშე.
• iPhone-ის push ბრაუზერის ჩანართში იმედი. ის მოითხოვს, რომ აპი საწყის ეკრანზე იყოს დაინსტალირებული.
• App Store-ის აპის დაპირება, რომლის გამოშვებაც არ შეგიძლიათ. თუ მაღაზია მნიშვნელოვანია, ცალკე დაგეგმეთ.
• ვებსაიტის გადაფუთვა და აპად წოდება. Apple-ის App Review Guidelines ითხოვს აპებს, რომლებიც სცილდება გადაფუთულ ვებსაიტს; თხელი გარსი უკმაყოფილებას იწვევს.

როდის გჭირდებათ ნატიური აპი

გადადით ნატიურზე (ან დაგეგმეთ ნატიური ვერსია ვებ-აპის შემდეგ), როცა:

• მაღაზიაში არსებობა არის ის, თუ როგორ იპოვიან მომხმარებლები თქვენ.
• გჭირდებათ ფონური მდებარეობა, Bluetooth, ჯანმრთელობის მონაცემები, ვიჯეტები ან სხვა მოწყობილობის ფუნქციები, რომლებსაც ბრაუზერი სანდოდ არ გვთავაზობს.
• თქვენმა აპმა ხანგრძლივი დროით მთლიანად ოფლაინ უნდა იმუშაოს.
• თქვენი მომხმარებლები ამას ელიან — ზოგი აუდიტორია უბრალოდ არ გამოიყენებს იმას, რაც მაღაზიაში არ არის.

მაღაზიაში გამოქვეყნებას თავისი ხარჯები და ეტაპები აქვს. 2026 წლის სექტემბრის მდგომარეობით, Apple-ის დეველოპერის პროგრამა ღირს წელიწადში 99 აშშ დოლარი, Google Play-ის დეველოპერის ანგარიში — ერთჯერადად 25 აშშ დოლარი, მათივე ვებსაიტების მიხედვით, და ყოველი გამოშვება გადის შემოწმებას. ბევრი გუნდი იწყებს მობილურისთვის მორგებული ვებ-აპით, რათა დაამტკიცოს, რომ ხალხს პროდუქტი სჭირდება, და შემდეგ აბანდებს ნატიურში. როგორ ავაშენოთ აპი AI-ით ამ პირველ ეტაპს სრულად ფარავს.

აშენება Mythex-ით

Mythex აშენებს ვებ-აპებს: თქვენ აღწერთ აპს ჩატში და ამოწმებთ მას ცოცხალ გადახედვაში დესკტოპზე და ტელეფონის ზომის ჩარჩოში, რომლის ზომის შეცვლაც შეგიძლიათ. დოკუმენტაციაში არის მობილურზე ადაპტური პრომპტი პატარა ეკრანების განლაგების გასასწორებლად. PWA manifest-ისა და ხატულების მოთხოვნა ისევე შეგიძლიათ, როგორც ნებისმიერი სხვა ფუნქციის, შემდეგ კი გამოაქვეყნეთ საჯარო ბმულით, რომელიც ნებისმიერ ტელეფონზე იმუშავებს. Pro გეგმაზე Mythex-ს შეუძლია აპის ანდროიდისა და iPhone აპად გადაფუთვაც, რომელიც იგზავნება Google Play-ის შიდა ტესტირებასა და TestFlight-ში. დასაწყებად იხილეთ AI ვებ-აპის ბილდერი ან დაათვალიერეთ აპის შაბლონები. სამუშაო მაგალითისთვის წაიკითხეთ როგორ ავაშენოთ ჩვევების თრექერის აპი.

კითხვები