Πώς να φτιάξετε μια web εφαρμογή φιλική προς κινητά

Μια web εφαρμογή φιλική προς κινητά είναι ιστότοπος που λειτουργεί σαν εφαρμογή σε τηλέφωνο: χωράει στην στενή οθόνη, έχει μεγάλες περιοχές αφής, φορτώνει γρήγορα με δεδομένα κινητού και μπορεί να προστεθεί στην αρχική οθόνη ως progressive web app (PWA). Για τις περισσότερες νέες εφαρμογές, αυτή είναι η πρακτική πρώτη έκδοση: ένας κώδικας, ένας σύνδεσμος, χωρίς έλεγχο καταστήματος. Έχει όμως πραγματικά όρια, ιδίως σε ό,τι αφορά τις ειδοποιήσεις στο iPhone και την πρόσβαση σε βαθιές λειτουργίες της συσκευής. Αυτός ο οδηγός είναι ξεκάθαρος για το πότε χρειάζεστε εγγενή εφαρμογή.

Τρεις τρόποι να είστε «στο κινητό»

Μια PWA είναι responsive web εφαρμογή με μερικά επιπλέον στοιχεία, οπότε δεν χρειάζεται να διαλέξετε ανάμεσα στις δύο πρώτες. Φτιάξτε πρώτα responsive, και μετά κάντε την εγκαταστάσιμη. Για πιο λεπτομερή σύγκριση, δείτε εγγενείς εφαρμογές έναντι progressive web apps.

Τι μπορούν και τι δεν μπορούν οι web εφαρμογές στα τηλέφωνα

Οι περιηγητές μπορούν να κάνουν περισσότερα απ' όσα πιστεύουν πολλοί:

• Κάμερα και ανέβασμα φωτογραφιών, μέσω τυπικών πεδίων αρχείων.
• Τοποθεσία, με την άδεια του χρήστη.
• Εγκατάσταση στην αρχική οθόνη με εικονίδιο και εκκίνηση σε πλήρη οθόνη.
• Χρήση εκτός σύνδεσης, με αποθήκευση σελίδων και δεδομένων μέσω service worker (ένα σενάριο φόντου που εκτελεί ο περιηγητής για τον ιστότοπό σας).
• Push ειδοποιήσεις, με μια παγίδα στο iPhone. Η Apple, μέσω της ομάδας WebKit, λέει ότι το web push ήρθε στο iOS και στο iPadOS 16.4 για web εφαρμογές που έχουν προστεθεί στην αρχική οθόνη. Οι χρήστες πρέπει πρώτα να εγκαταστήσουν την εφαρμογή και μετά να επιτρέψουν τις ειδοποιήσεις.

Εκεί όπου η εγγενής εφαρμογή εξακολουθεί να υπερτερεί:

• Βαθιές λειτουργίες συσκευής, όπως τοποθεσία στο παρασκήνιο, εξαρτήματα Bluetooth, δεδομένα υγείας και widgets αρχικής οθόνης. Η υποστήριξη στον περιηγητή είναι περιορισμένη ή διαφέρει ανά πλατφόρμα.
• Ανακάλυψη στο κατάστημα εφαρμογών. Αν οι άνθρωποι θα σας αναζητούν μέσα στο κατάστημα, πρέπει να είστε εκεί.
• Βαριά λειτουργία εκτός σύνδεσης, όπως μεγάλα σύνολα δεδομένων που συγχρονίζονται στο παρασκήνιο.
• Γραφικά που απαιτούν απόδοση, όπως απαιτητικά παιχνίδια.

Αν τίποτα από αυτά δεν είναι κεντρικό στην εφαρμογή σας, μια web εφαρμογή πιθανότατα θα σας εξυπηρετήσει.

Σχεδιασμός πρώτα για τηλέφωνα

Σχεδιάστε πρώτα τη διάταξη για τηλέφωνο και αφήστε την να επεκταθεί για μεγαλύτερες οθόνες. Το αντίστροφο συνήθως παράγει στενές, συνωστισμένες οθόνες.

Διάταξη

• Μία στήλη στις μικρές οθόνες. Οι πλαϊνές μπάρες γίνονται κάτω μπάρα ή μενού.
• Χωρίς οριζόντιο scroll. Οι πλατιοί πίνακες γίνονται κάρτες ή κύλιση μέσα στο δικό τους περιέκτη.
• Ευανάγνωστο κείμενο χωρίς zoom· το κύριο κείμενο γύρω στα 16px.

Αφή

• Μεγάλες περιοχές αφής. Περίπου 44 επί 44 pixel είναι συνήθως το ελάχιστο. Αφήστε κενό ανάμεσά τους.
• Κύριες ενέργειες μέσα στην εμβέλεια του αντίχειρα, κοντά στο κάτω μέρος της οθόνης σε ψηλά τηλέφωνα.
• Χωρίς λειτουργίες μόνο με hover. Οι υποδείξεις και τα μενού που εμφανίζονται με hover δεν υπάρχουν στις οθόνες αφής.
• Το σωστό πληκτρολόγιο. Τα πεδία email πρέπει να ανοίγουν το πληκτρολόγιο email, τα πεδία τηλεφώνου το αριθμητικό. Ζητήστε τους σωστούς τύπους εισόδου.

Ταχύτητα

• Μικρές εικόνες σε λογικά μεγέθη, που φορτώνουν καθώς μπαίνουν στην οθόνη.
• Λιγότερες βαριές βιβλιοθήκες. Κάθε μία προσθέτει χρόνο λήψης σε δεδομένα κινητού.
• Σκελετοί οθόνης ή καθαρές καταστάσεις φόρτωσης, ώστε η εφαρμογή να μην φαίνεται ποτέ παγωμένη.

Ασφαλείς περιοχές και γραμμή διεύθυνσης

Στα σύγχρονα τηλέφωνα, το περιεχόμενο μπορεί να βρεθεί κάτω από το notch ή την ένδειξη αρχικής οθόνης, ειδικά σε εγκατεστημένη εφαρμογή πλήρους οθόνης. Ζητήστε padding ασφαλούς περιοχής. Προσέξτε επίσης τις διατάξεις πλήρους ύψους που «πηδούν» όταν εμφανίζεται και εξαφανίζεται η γραμμή διεύθυνσης του περιηγητή.

Κάντε την εγκαταστάσιμη (PWA)

Για να είναι εγκαταστάσιμη, μια web εφαρμογή χρειάζεται:

1. Ένα web app manifest, ένα μικρό αρχείο με το όνομα της εφαρμογής, σύντομο όνομα, εικονίδια, χρώμα θέματος και τον τρόπο εκκίνησης (συνήθως σε πλήρη οθόνη, «standalone»).
2. Εικονίδια στα μεγέθη που περιμένουν οι πλατφόρμες, συμπεριλαμβανομένου ενός κατάλληλου για συσκευές Apple.
3. HTTPS, το οποίο ήδη έχει κάθε σωστά φιλοξενούμενη εφαρμογή.
4. Service worker αν θέλετε υποστήριξη εκτός σύνδεσης ή push.

Μετά πείτε στους χρήστες πώς να εγκαταστήσουν. Οι περιηγητές Android συνήθως εμφανίζουν προτροπή εγκατάστασης ή στοιχείο μενού· στο iPhone είναι το κουμπί Κοινοποίηση και μετά «Προσθήκη στην αρχική οθόνη». Μια σύντομη σημείωση «Εγκαταστήστε αυτή την εφαρμογή» με αυτά τα βήματα βοηθά πολύ.

Η υποστήριξη εκτός σύνδεσης είναι το σημείο όπου οι PWA περιπλέκονται. Η αποθήκευση των σελίδων της εφαρμογής ώστε να ανοίγει χωρίς σύνδεση είναι απλή. Το να επιτρέπεται σε χρήστες να αλλάζουν δεδομένα εκτός σύνδεσης και να τα συγχρονίζουν αργότερα είναι πραγματική δουλειά. Ζητήστε το μόνο αν οι χρήστες σας το χρειάζονται πραγματικά.

Ένα πρώτο prompt που δουλεύει

Φτιάξε μια web εφαρμογή για την ομάδα καθαρισμού μας, ώστε να βλέπει τις δουλειές της ημέρας και να τις σημειώνει ως ολοκληρωμένες. Σχεδίασε πρώτα για τηλέφωνα: μία στήλη, μεγάλες περιοχές αφής, το κύριο κουμπί ενέργειας καρφιτσωμένο κοντά στο κάτω μέρος, κανένα στοιχείο ελέγχου μόνο με hover, χωρίς οριζόντιο scroll, και σωστά πληκτρολόγια για πεδία τηλεφώνου και email. Κάθε δουλειά δείχνει τη διεύθυνση (πάτημα για άνοιγμα στους χάρτες), το τηλέφωνο του πελάτη (πάτημα για κλήση), μια λίστα ελέγχου και ένα κουμπί «Σήμανση ως ολοκληρωμένη» που μπορεί να βγάλει φωτογραφία. Οι διαχειριστές συνδέονται από υπολογιστή για να αναθέτουν δουλειές· σε μεγάλη οθόνη δείξε πίνακα αντί για κάρτες. Κάνε την εγκαταστάσιμη PWA με manifest, εικονίδια και standalone εμφάνιση, και αποθήκευσε στην cache το κέλυφος της εφαρμογής ώστε να ανοίγει χωρίς σήμα. Αποθήκευσε τα δεδομένα σε βάση δεδομένων.

Βήματα κατασκευής

1. Φτιάξτε πρώτα τη διάταξη για τηλέφωνο, με δείγματα δεδομένων, και ελέγξτε την σε προεπισκόπηση μεγέθους τηλεφώνου.
2. Δοκιμάστε σε πραγματικά τηλέφωνα, τουλάχιστον ένα iPhone και ένα Android αν οι χρήστες σας έχουν και τα δύο. Οι εξομοιωτές χάνουν πράγματα, όπως το πληκτρολόγιο οθόνης που καλύπτει τα πεδία.
3. Περάστε την κύρια εργασία με ένα χέρι. Αν κάτι χρειάζεται και τα δύο χέρια ή zoom, διορθώστε το.
4. Προσθέστε manifest και εικονίδια, και μετά εγκαταστήστε την εφαρμογή και στις δύο πλατφόρμες για να ελέγξετε εικονίδιο, όνομα και οθόνη εκκίνησης.
5. Αποφασίστε για την εκτός σύνδεσης λειτουργία. Ξεκινήστε με «ανοίγει χωρίς σήμα και δείχνει καθαρό μήνυμα»· προσθέστε επεξεργασία εκτός σύνδεσης μόνο αν χρειάζεται.
6. Ελέγξτε την ταχύτητα σε αργή σύνδεση. Τα εργαλεία προγραμματιστή του περιηγητή μπορούν να προσομοιώσουν μια τέτοια σύνδεση.
7. Προσθέστε ειδοποιήσεις τελευταία, αν καθόλου, και σχεδιάστε εναλλακτική μέσω email για όσους δεν εγκαθιστούν την εφαρμογή.

Συχνά λάθη

• Σχεδιασμός μόνο σε μεγάλη οθόνη υπολογιστή. Ελέγχετε κάθε οθόνη σε πλάτος τηλεφώνου καθώς προχωράτε.
• Πίνακες που ξεχειλίζουν. Μετατρέψτε τις γραμμές σε κάρτες στις μικρές οθόνες.
• Μικρές περιοχές αφής και συνδέσμοι κολλημένοι μεταξύ τους.
• Φόρμες που παλεύουν με το πληκτρολόγιο: λάθος τύποι εισόδου, πεδία κρυμμένα πίσω από το πληκτρολόγιο, καμία ροή «επόμενο».
• Η υπόθεση ότι οι ειδοποιήσεις push στο iPhone λειτουργούν σε καρτέλα περιηγητή. Χρειάζεται η εφαρμογή εγκατεστημένη στην αρχική οθόνη.
• Υπόσχεση εφαρμογής στο App Store που δεν μπορείτε να ανεβάσετε. Αν το κατάστημα έχει σημασία, σχεδιάστε το χωριστά.
• Τύλιγμα ιστότοπου και το να το λέτε εφαρμογή. Οι Οδηγίες Ελέγχου Εφαρμογών της Apple ζητούν εφαρμογές που προσφέρουν περισσότερα από έναν ξαναπακεταρισμένο ιστότοπο· ένα λεπτό περιτύλιγμα κινδυνεύει να απορριφθεί.

Πότε χρειάζεστε εγγενή εφαρμογή

Πηγαίνετε σε εγγενή (ή σχεδιάστε μια εγγενή έκδοση μετά την web εφαρμογή) όταν:

• Η παρουσία στο κατάστημα είναι ο τρόπος που θα σας βρίσκουν οι πελάτες.
• Βασίζεστε σε τοποθεσία στο παρασκήνιο, Bluetooth, δεδομένα υγείας, widgets ή άλλες λειτουργίες συσκευής που οι περιηγητές δεν προσφέρουν αξιόπιστα.
• Η εφαρμογή σας πρέπει να δουλεύει πλήρως εκτός σύνδεσης για μεγάλα διαστήματα.
• Οι χρήστες σας το περιμένουν· κάποια κοινά απλώς δεν θα χρησιμοποιήσουν κάτι που δεν βρίσκεται στο κατάστημα.

Η δημοσίευση στα καταστήματα έχει δικά της κόστη και βήματα. Από τον Σεπτέμβριο του 2026, το πρόγραμμα προγραμματιστών της Apple κοστίζει 99 δολάρια ΗΠΑ τον χρόνο και ένας λογαριασμός προγραμματιστή στο Google Play εφάπαξ 25 δολάρια ΗΠΑ, σύμφωνα με τους ίδιους τους ιστότοπούς τους, και κάθε έκδοση περνά από έλεγχο. Πολλές ομάδες ξεκινούν με μια web εφαρμογή φιλική προς κινητά για να αποδείξουν ότι οι άνθρωποι θέλουν το προϊόν, και μετά επενδύουν σε εγγενή έκδοση όταν το γνωρίζουν. Το πώς να φτιάξετε εφαρμογή με AI καλύπτει αυτό το πρώτο στάδιο από την αρχή ως το τέλος.

Χτίζοντας το με το Mythex

Το Mythex φτιάχνει web εφαρμογές: περιγράφετε την εφαρμογή στη συνομιλία και την ελέγχετε στη ζωντανή προεπισκόπηση στον υπολογιστή και σε καρέ μεγέθους τηλεφώνου που μπορείτε να αλλάξετε. Τα έγγραφα έχουν ένα prompt για responsive σχεδίαση για τη διόρθωση διατάξεων σε μικρές οθόνες. Μπορείτε να ζητήσετε manifest PWA και εικονίδια όπως κάθε άλλη λειτουργία, και μετά να δημοσιεύσετε σε δημόσιο σύνδεσμο που δουλεύει σε κάθε τηλέφωνο. Στο Pro, το Mythex μπορεί επίσης να τυλίξει την εφαρμογή ως εφαρμογή Android και iPhone, που στέλνεται σε εσωτερικό τεστ του Google Play και στο TestFlight. Δείτε τον δημιουργό web εφαρμογών με AI ή ρίξτε μια ματιά στα πρότυπα εφαρμογών για αρχή. Για ένα παράδειγμα βήμα προς βήμα, διαβάστε πώς να φτιάξετε εφαρμογή παρακολούθησης συνηθειών.

Ερωτήσεις