Παιχνίδια HTML5 μέσα σε εφαρμογή: WebView σε Android και iOS

Για να προσθέσετε παιχνίδια στην εφαρμογή σας, δεν χρειάζεστε μηχανή παιχνιδιών μέσα της. Χρειάζεστε ένα WebView: το στοιχείο που παρέχουν Android και iOS για να εμφανίζουν περιεχόμενο ιστού μέσα σε εγγενή οθόνη. Βάζετε τον φάκελο ενός έτοιμου παιχνιδιού HTML5 είτε μέσα στο πακέτο της εφαρμογής είτε στον δικό σας διακομιστή HTTPS, δείχνετε ένα WebView στο index.html του, και η εφαρμογή αποκτά μια ενότητα παιχνιδιών που τρέχει με τον ίδιο κώδικα με την έκδοση για browser.

Αυτός ο οδηγός απευθύνεται σε ομάδες που έχουν ήδη εφαρμογή (μια εφαρμογή λιανικής, μια τράπεζα, μια σχολική πλατφόρμα, ένας σύλλογος ή μια μάρκα μέσων) και θέλουν παιχνίδια μέσα στην εφαρμογή ως λειτουργία, όχι ως νέα εφαρμογή στο κατάστημα. Καλύπτει την επιλογή ανάμεσα σε τοπικά και φιλοξενούμενα αρχεία, τις ρυθμίσεις του WebView που χαλούν τα παιχνίδια όταν είναι λάθος, τη διατήρηση της προόδου, το κουμπί πίσω, ποια από τα πρότυπά μας ταιριάζουν και πώς μετράει η άδεια τις εφαρμογές. Οι λεπτομέρειες για τις πλατφόρμες προέρχονται από την τεκμηρίωση των Android Developers και του Apple Developer, διαβασμένη στις 30 Οκτωβρίου 2026.

Προσθήκη παιχνιδιών στην εφαρμογή: πώς λειτουργεί η διαδρομή WebView

Ένα WebView είναι μηχανή browser χωρίς τον browser γύρω της. Ο εγγενής σας κώδικας το δημιουργεί, ορίζει το μέγεθός του και τις ρυθμίσεις του, και του λέει τι να φορτώσει. Στο Android η κλάση είναι η WebView· στο iOS είναι η WKWebView. Ένα παιχνίδι HTML5 δεν ξέρει τη διαφορά: βλέπει μια σελίδα, ένα canvas και αποθηκευτικό χώρο, όπως θα έβλεπε στο Chrome ή στο Safari.

Γι' αυτό η διαδρομή είναι δημοφιλής για παιχνίδια μέσα στην εφαρμογή. Η ομάδα παιχνιδιών δουλεύει σε HTML, CSS και JavaScript, η ομάδα της εφαρμογής προσθέτει μία οθόνη και λίγες ρυθμίσεις, και ο ίδιος φάκελος παιχνιδιού μπορεί να ζει και στον ιστότοπο. Τρία κινούμενα μέρη χρειάζονται σχεδιασμό:

1. Πού βρίσκονται τα αρχεία: μέσα στην εφαρμογή ή σε διακομιστή HTTPS που ελέγχετε εσείς.
2. Πώς ρυθμίζεται το WebView: JavaScript, αποθηκευτικός χώρος, η διεύθυνση από την οποία τρέχει το παιχνίδι.
3. Πώς μιλούν το παιχνίδι και η εφαρμογή: άνοιγμα, παύση, κουμπί πίσω, κλείσιμο.

Τα πρότυπά μας ταιριάζουν σε αυτό το σχήμα, επειδή καθένα έρχεται με έτοιμο φάκελο game/ και index.html, φτιαγμένο για στατική φιλοξενία, χωρίς PHP ή βάση δεδομένων για το ίδιο το παιχνίδι. Αυτό που δεν περιλαμβάνει κανένα είναι το εγγενές μέρος. Κάθε έκδοση αναφέρει τις εγγενείς εφαρμογές ή τα builds για καταστήματα στο «Δεν περιλαμβάνεται σε αυτή την έκδοση», άρα η οθόνη WebView είναι δουλειά της ομάδας σας ή εργασία που προσφέρουμε χωριστά, με προσφορά.

Δείτε τα πρότυπα παιχνιδιών HTML5

Τοπικά ή φιλοξενούμενα: πού πρέπει να ζουν τα αρχεία του παιχνιδιού

Τοπικά: το παιχνίδι μπαίνει μέσα στην εφαρμογή

Ο οδηγός του Android για φόρτωση περιεχομένου μέσα σε εφαρμογή λέει ότι το περιεχόμενο ιστού που μεταγλωττίζεται μέσα στην εφαρμογή δεν χρειάζεται πρόσβαση στο internet ούτε καταναλώνει το εύρος ζώνης του χρήστη. Αντιγράφετε τον φάκελο game/ στα assets της εφαρμογής και το φορτώνετε από εκεί. Το κόστος είναι το μέγεθος: το παιχνίδι μεγαλώνει το κατέβασμα, και κάθε ενημέρωσή του σημαίνει νέα κυκλοφορία της εφαρμογής μέσω ελέγχου του καταστήματος.

Φιλοξενούμενα: η εφαρμογή φορτώνει το παιχνίδι από τον διακομιστή σας

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

Η Apple έχει ειδικό κανόνα εδώ. Ο κανόνας 4.7 των App Review Guidelines καλύπτει παιχνίδια mini σε HTML5 και JavaScript που δεν είναι ενσωματωμένα στο binary. Μεταξύ των όρων του, η εφαρμογή δεν επιτρέπεται να επεκτείνει ή να εκθέτει εγγενή APIs της πλατφόρμας σε αυτό το λογισμικό χωρίς άδεια της Apple, και πρέπει να παρέχει ευρετήριο του λογισμικού που προσφέρει, με universal links. Διαβάστε τον κανόνα 4.7 ολόκληρο πριν διαλέξετε τη φιλοξενούμενη διαδρομή για iOS.

• Μέγεθος εφαρμογής: το τοπικό προσθέτει το βάρος του παιχνιδιού· το φιλοξενούμενο σχεδόν τίποτα.
• Ενημερώσεις: το τοπικό θέλει κυκλοφορία εφαρμογής· το φιλοξενούμενο αλλάζει όταν ανεβάζετε.
• Σύνδεση: το τοπικό μπορεί να ξεκινήσει χωρίς δίκτυο αφού εγκατασταθεί· το φιλοξενούμενο χρειάζεται δίκτυο.
• Έλεγχος: τα τοπικά παιχνίδια ελέγχονται ως μέρος της εφαρμογής· τα φιλοξενούμενα στο iOS εμπίπτουν στον κανόνα 4.7.

Ρυθμίσεις WebView στο Android που κάνουν ή χαλούν ένα παιχνίδι

Οι περισσότερες αναφορές «το παιχνίδι δείχνει λευκή οθόνη» προέρχονται από τρεις προεπιλογές. Και οι τρεις τεκμηριώνονται στο Android Developers.

1. Η JavaScript είναι κλειστή. Ο οδηγός του WebView λέει ότι η JavaScript είναι απενεργοποιημένη στο WebView από προεπιλογή. Κάθε παιχνίδι HTML5 τη χρειάζεται, άρα ενεργοποιήστε την στο WebSettings.
2. Ο αποθηκευτικός χώρος είναι κλειστός. Η αναφορά του WebSettings λέει ότι η προεπιλεγμένη τιμή του setDomStorageEnabled είναι false. Τα παιχνίδια που κρατούν την πρόοδο στο localStorage τον χρειάζονται ενεργό, αλλιώς κάθε συνεδρία ξεκινά από το μηδέν.
3. Η διεύθυνση file:// είναι η λάθος. Ο οδηγός περιεχομένου μέσα σε εφαρμογή του Android εξηγεί ότι οι διευθύνσεις file:// είναι αδιαφανείς προελεύσεις που δεν μπορούν να χρησιμοποιήσουν APIs όπως το fetch() ή το XMLHttpRequest, και συνιστά να μην ενεργοποιούνται οι λύσεις πρόσβασης αρχείων. Οι σελίδες προϊόντων μας λένε το ίδιο από την πλευρά του παιχνιδιού: εκδόσεις όπως το Gridspark και το Twirldrop δεν τρέχουν από file://.

Η λύση για το τρίτο σημείο είναι το WebViewAssetLoader από τη βιβλιοθήκη AndroidX Webkit. Σερβίρει αρχεία από τα assets της εφαρμογής μέσω διεύθυνσης HTTPS, και το παράδειγμα του Android φορτώνει το https://appassets.androidplatform.net/assets/index.html. Για το παιχνίδι, μοιάζει με κανονικό ιστότοπο, οπότε τα ES modules, το fetch και η αποθήκευση συμπεριφέρονται όπως στον δικό σας διακομιστή.

iOS: WKWebView, τοπικά αρχεία και το data store

Στο iOS το στοιχείο είναι το WKWebView. Η Apple τεκμηριώνει το loadFileURL(_:allowingReadAccessTo:) για τοπικό περιεχόμενο: το δεύτερο όρισμα είναι το αρχείο ή ο φάκελος που μπορεί να διαβάσει το WebKit, και ο φάκελος επιτρέπει στη σελίδα να φορτώνει τα αρχεία γύρω της.

Επειδή οι εκδόσεις μας δεν υποστηρίζουν άνοιγμα από file://, δοκιμάστε αυτή τη διαδρομή με προσοχή ή παρακάμψτε την. Η Apple παρέχει επίσης το WKURLSchemeHandler, πρωτόκολλο για φόρτωση πόρων με σχήματα URL που το WebKit δεν χειρίζεται, ώστε η εφαρμογή να σερβίρει τον φάκελο του παιχνιδιού κάτω από το δικό της σχήμα. Το Capacitor το κάνει για εσάς: το προεπιλεγμένο σχήμα του στο iOS είναι το capacitor.

Η αποθήκευση ζει στο WKWebsiteDataStore. Η σελίδα της Apple λέει ότι το προεπιλεγμένο store αποθηκεύει τα δεδομένα ιστοτόπων μόνιμα στον δίσκο, και ότι ένα μη μόνιμο store κρατά δεδομένα μόνο στη μνήμη, κάτι που προορίζεται για ιδιωτική περιήγηση. Αν κάποιος στην ομάδα σας ορίσει μη μόνιμο store, οι παίκτες χάνουν την πρόοδό τους κάθε φορά που κλείνει η εφαρμογή.

Το iOS δεν έχει κουμπί πίσω συστήματος, άρα η οθόνη παιχνιδιών χρειάζεται δικό της τρόπο εξόδου: ένα κουμπί κλεισίματος στη δική σας εγγενή μπάρα, ή ένα που καλεί το παιχνίδι μέσω message handler.

Διατήρηση προόδου μέσα στην εφαρμογή

Τα παιχνίδια μας αποθηκεύουν την πρόοδο στον αποθηκευτικό χώρο του browser του παίκτη, όχι σε διακομιστή. Τα Solitaire Links και Deepforge το λένε ξεκάθαρα στις σελίδες τους: η πρόοδος κρατιέται στο localStorage, χωρίς λογαριασμό ή συγχρονισμό στο cloud. Μέσα σε εφαρμογή αυτό έχει τρεις συνέπειες.

• Η διεύθυνση είναι μέρος της αποθήκευσης. Ο αποθηκευτικός χώρος του browser ανήκει σε μια προέλευση. Αν αλλάξετε σχήμα ή όνομα υπολογιστή, για παράδειγμα από έναν δοκιμαστικό τομέα στο appassets.androidplatform.net, οι παίκτες ξεκινούν από την αρχή. Διαλέξτε τη διεύθυνση μία φορά.
• Το κλειδί αποθήκευσης είναι μέρος της αποθήκευσης. Η σελίδα προϊόντος του Tenguin λέει στους αγοραστές να κρατούν αμετάβλητο το κλειδί αποθήκευσης σε ζωντανό παιχνίδι, αλλιώς οι παίκτες χάνουν την πρόοδό τους. Αρκετές εκδόσεις TypeScript κρατούν το κλειδί στο brand.ts. Αλλάξτε το σκόπιμα, πριν από την εκκίνηση, ποτέ μετά.
• Το καθάρισμα δεδομένων της εφαρμογής καθαρίζει και το παιχνίδι. Η απεγκατάσταση ή το καθάρισμα του αποθηκευτικού χώρου της εφαρμογής αφαιρεί την αποθήκευση, όπως ακριβώς το καθάρισμα ενός browser.

Αν η πρόοδος πρέπει να ακολουθεί τον χρήστη σε διαφορετικές συσκευές, αυτό είναι λειτουργία διακομιστή που καμία από τις εκδόσεις μας δεν περιλαμβάνει. Κάθε έκδοση αναφέρει τις αποθηκεύσεις στο cloud ή τους λογαριασμούς ως «δεν περιλαμβάνεται». Το Deepforge είναι το πιο φιλικό σημείο εκκίνησης: η σελίδα του περιγράφει εξαγωγή και εισαγωγή της αποθήκευσης στο μενού, και ένα μικρό API window.DeepForge που επιτρέπει στη σελίδα φιλοξενίας να κάνει παύση, συνέχιση, να διαβάζει την αποθήκευση και να ακούει γεγονότα αποθήκευσης.

Δείτε το Deepforge και το API της σελίδας φιλοξενίας

Το κουμπί πίσω, η παύση και η έξοδος από το παιχνίδι

Τα παιχνίδια HTML5 είναι συνήθως μία σελίδα. Αυτό έχει σημασία στο Android, όπου το κουμπί πίσω διατρέχει το ιστορικό του WebView. Ο οδηγός του WebView στο Android δείχνει το μοτίβο: ελέγχετε το canGoBack() και καλείτε goBack(), ή αφήνετε το σύστημα να χειριστεί το συμβάν· με το AndroidX καταχωρίζετε την ίδια λογική στο OnBackPressedDispatcher. Σε ένα παιχνίδι μίας σελίδας, το ιστορικό είναι συχνά κενό, οπότε το πίσω κλείνει αμέσως την οθόνη παιχνιδιών σας, στη μέση ενός επιπέδου.

Αποφασίστε τι πρέπει να κάνει το πίσω και γράψτε το:

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

Οι εκδόσεις μας δεν έρχονται με γέφυρα προς την εφαρμογή. Κάποιες προσφέρουν τρόπο ελέγχου από τη σελίδα: το Gridspark και το Ricopop έχουν οθόνη «πάτα για να ξεκινήσεις» και κουμπί πλήρους οθόνης που ενεργοποιείτε ή απενεργοποιείτε σε αρχείο ρυθμίσεων, και το Deepforge εκθέτει παύση και συνέχιση στη σελίδα. Οτιδήποτε άλλο, όπως ένα μήνυμα προς τον εγγενή κώδικα όταν τελειώνει ένα επίπεδο, είναι μικρή αλλαγή στον πηγαίο κώδικα που προσθέτει η ομάδα σας ή εργασία με προσφορά.

Δείτε το Gridspark, απλή JavaScript χωρίς βήμα build

Άδεια: ένα παιχνίδι, μία εφαρμογή, και τι να ρωτήσετε πρώτα

Οι όροι μας δίνουν μόνιμη, μη αποκλειστική άδεια χρήσης της έκδοσης σε ένα τελικό προϊόν, για εσάς ή για έναν πελάτη. Η εφαρμογή σας με την ενότητα παιχνιδιών είναι αυτό το τελικό προϊόν. Οι παίκτες μπορούν να την έχουν δωρεάν ή με διαφημιστικά έσοδα. Μπορείτε να αλλάξετε τον κώδικα, τα γραφικά και τον ήχο, και επιτρέπεται το white label: η μάρκα σας αντικαθιστά τη δική μας.

Τρεις καταστάσεις θέλουν πιο προσεκτική ματιά.

• Πολλές εφαρμογές. Μια διαφημιστική εταιρεία που βάζει το ίδιο παιχνίδι σε τρεις εφαρμογές πελατών χρειάζεται τρεις άδειες. Η αγορά πολλών προτύπων σε μία παραγγελία δίνει έκπτωση πακέτου: 5% για δύο, 10% για τρία, 15% για τέσσερα και 20% για πέντε ή περισσότερα.
• Εκδόσεις Android και iOS της ίδιας εφαρμογής. Μία άδεια σας επιτρέπει να δημοσιεύσετε αυτό το παιχνίδι όπου θέλετε, στο Google Play και στο App Store συμπεριλαμβανομένων. Παραμένει μία άδεια ανά τελικό προϊόν.
• Ένα SDK παιχνιδιών για άλλους προγραμματιστές. Οι όροι απαγορεύουν την αναδιανομή του προτύπου ή του κώδικά του μέσα σε άλλο προϊόν που προορίζεται για προγραμματιστές. Μια ενότητα παιχνιδιών που πουλάτε σε άλλους κατασκευαστές εφαρμογών είναι τέτοιο προϊόν.

Αν η εφαρμογή σας χρεώνει για την ενότητα παιχνιδιών ή πουλάει αντικείμενα μέσα της, ρωτήστε και εμάς πρώτα. Οι όροι αναφέρουν δωρεάν πρόσβαση και διαφημιστικά έσοδα, και αρκετές εκδόσεις αναφέρουν τις αγορές με πραγματικά χρήματα ως «δεν περιλαμβάνεται». Στο iOS, ο κανόνας 3.1.1 λέει ότι το ξεκλείδωμα λειτουργιών ή περιεχομένου, συμπεριλαμβανομένων των επιπέδων παιχνιδιού, πρέπει να γίνεται με in-app purchase.

Άδειες, τιμολόγια και προσφορές για εταιρείες

Συχνές ερωτήσεις

Μπορώ να βάλω ένα παιχνίδι HTML5 μέσα σε εφαρμογή Android ή iOS;

Ναι. Φορτώστε τον φάκελο του παιχνιδιού σε WebView (WebView στο Android, WKWebView στο iOS), είτε ενσωματωμένο στην εφαρμογή είτε από τον διακομιστή σας HTTPS. Ενεργοποιήστε την JavaScript και τον αποθηκευτικό χώρο, και σερβίρετε τα αρχεία από διεύθυνση τύπου HTTPS και όχι από file://.

Τα παιχνίδια λειτουργούν offline μέσα στην εφαρμογή;

Μόνο αν ενσωματώσετε τα αρχεία και η έκδοση δεν φορτώνει τίποτα από το δίκτυο. Αρκετές από τις εκδόσεις μας κρατούν τα γραφικά, τον ήχο και τις γραμματοσειρές τοπικά· η σελίδα του Ricopop λέει ότι χρειάζεται σύνδεση. Δοκιμάστε σε λειτουργία πτήσης πριν το υποσχεθείτε.

Θα χάσουν την πρόοδό τους οι παίκτες όταν ενημερώσω την εφαρμογή;

Όχι, αν η διεύθυνση και το κλειδί αποθήκευσης μένουν ίδια. Οι αποθηκεύσεις ζουν στον αποθηκευτικό χώρο του WebView για εκείνη την προέλευση. Αλλαγή σχήματος, ονόματος υπολογιστή ή κλειδιού αποθήκευσης ξεκινά τους πάντες από το μηδέν.

Πόσες άδειες χρειάζομαι για την εφαρμογή μου;

Μία ανά τελικό προϊόν. Μία εφαρμογή με ένα παιχνίδι είναι μία άδεια· το ίδιο παιχνίδι σε εφαρμογές για τρεις πελάτες είναι τρεις. Η ίδια εφαρμογή στο Google Play και στο App Store δεν χρειάζεται δεύτερη άδεια: μπορείτε να δημοσιεύσετε το παιχνίδι με άδεια όπου θέλετε.

Επόμενο βήμα

Διαλέξτε ένα παιχνίδι, παίξτε το demo του σε τηλέφωνο, και μετά διαβάστε τη λίστα «Δεν περιλαμβάνεται σε αυτή την έκδοση» και το κεφάλαιο του εγχειριδίου για τις αποθηκεύσεις. Αν προτιμάτε να φτιάξουμε εμείς την οθόνη παιχνιδιών στην εφαρμογή σας, στείλτε μας την εφαρμογή, τις πλατφόρμες και το παιχνίδι που σας αρέσει, και σας απαντάμε με εύρος, τιμή και χρονοδιάγραμμα.

Δείτε όλα τα πρότυπα παιχνιδιών

Ζητήστε προσφορά για ενσωμάτωση στην εφαρμογή