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 😁