Hello Hashnoders!
So I have created a simple language game for learning french that just tallies your score for right and wrong answers... it is a very simple simple game.
I have the operational HTML, CSS, and JavaScript all working in one file....
My question is:
-What is the best way to port this into the iOS interface so that my child can use it on his iPad to help him learn French ?
-Is there a simple way to format it so that I can make it appear in an app box like everything else on the iPad?
-Do I need to publish it through the app store to get it on to the iPad?
-Do I need to write this program in a totally different language?
Thank you everyone!!!
edit on (12/9):

So I felt like I was close to uploading onto my iPad but this error stopped me .... just curious if anyone knows what this means or maybe it is just too obscure...
There is a quick and easy way to get your web-app onto your iPad, without using the store or really needing anything big or special. If you can open the app in a browser on the IPad, that's good enough. Make sure it looks good though 😁
Then, what you want to do is add a Progressive Web App manifest. It's a structured text file, which tells the browser, that the current website is, in fact, a web app, which offers some app-like behavior and can run just like an app on a mobile device. The browser will then offer you to add the web app to the home screen, from which you can start it and the web app will look like a native app, except it is your HTML being rendered into a webview.
How to do that?
The long version of that is written in this article, here's the tl;dr:
1. Make sure the site is served via HTTPS (just host it on Zeit, for free)
2. Add a service worker with a fetch handler (though I found out that's not really necessary for the add-to-home-screen option to show up in the browser menu)
// In your main JS code
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
// sw.js
self.addEventListener('fetch', event => event.respondWith(fetch(event.request)));
3. Create a manifest
<link rel="manifest" href="/manifest.json">
{
"short_name": "Maps",
"name": "Google Maps",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/maps/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/maps/",
"theme_color": "#3367D6"
}
4. You can explicitely add a prompt, if you want to
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
e.prompt();
});
I never tried step 4 myself, though, so if you do that, tell me of your experience 😁
That is honesty the sweetest thing I have ever seen or heard and I would be more than happy to help you.
What is the best way to port this into the iOS interface so that my child can use it on his iPad to help him learn French?
You have two choices.
In case you want to learn some iOS development and hone your skills in that field, I would suggest you pick the second route: developing it natively in Swift. Since this is a pretty simple application, you can learn a lot while making it and it won't be that hard to make. (With a good UI and some animations, of course!) But, this might take a little bit longer considering you'd have to learn Swift and the Xcode IDE. If you don't have the time, you can take the second route: React Native.
You can follow some great tutorials on YouTube and make this app in max 1 day. Since React itself uses HTML and CSS, creating and styling the content won't be a problem at all.
I will get into the third option and why you'd choose that next.
Is there a simple way to format it so that I can make it appear in an app box like everything else on the iPad?
This is where it gets tricky.
Applications come in two flavors: 1) app-store deployed; and 2) ad-hoc. App Store deployed applications are those which are, well, available on the app store. Ad-Hoc applications are often utilities which are made for some sort of internal use. The only difference is that they don't go through the entire App Store Review process (which is a pain, trust me).
Regardless of the type of deployment, you will need something called a iOS Developer membership for which Apple charges $99/year. This gives you a code signing certificate with which you can cryptographically sign your shiny iOS app and send it to App Store for review or install it on someone's phone. It's Apple's way of saying - "Don't worry iOS Gatekeeper, this app comes from a trusted source." However, code signing is still one of the biggest pains for iOS developers and then the next ring of (infernal, I might add) hell is the app store review process. Code signing is a pain because it's not as easy as it sounds. You install your certificate, you create a provisioning profile, you create a certificate chain, you install the certificate chain, you import it and you sign the app. For app store, the reviewers give you really vague comments about why you failed the review.
Then, you have the problem of creating application icons. You need to create, I guess, 11 sizes (which if pretty easy if you use an online tool), but packaging it, etc. can be a little bit of a pain if you are just starting out.
Do I need to publish it through the app store to get it on to the iPad?
Now, we get to some good news. If you only want your kid to use the application, you can directly install it on his/her phone (without buying the expensive membership). P.S.: This was introduced pretty recently, so woohoo!
However, if you want to distribute it to someone else, then you'd have to give it to the app store or do a ad-hoc deployment. For ad-hoc, you sign the application like before, but then you can directly install this signed package on any phone (there are some conditions about this as well.)
Do I need to write this program in a totally different language?
If you choose the Swift route, yes and no. Yes, because the container of your game will be native Swift; no, because there are some iOS game engines which support Swift + JS.
However, if you use React Native then no, you don't need to. You might have to add some extra code for it to work, but you won't have to rewrite the application.
Conclusion Now, I didn't mention the last path you can choose: Web App with Mobile Support. You just need to add specific CSS stylings and modify your JavaScript code just a bit for this application to work perfectly on your mobile phone (like YouTube for example).
I hope this made everything clear. If you have any more questions, feel free to comment below! And, if you do decide to pick any of the routes I have mentioned, you have the entire Hashnode community to help you and I will be there for this project personally.
cedric simon
Web dev
Hi there, your project seems really fun.
You said all is working in HTML and JS, so why not use iOS safari to access where your game is hosted?
Unless you want to learn new technologies, it's the easiest route, IMHO.