Fullscreen Apple

Stefan · Post by **Stefan** » Fri Jul 07, 2023 9:04 am

Unfortunately fullscreen() does not work on Apple phones and tablets for web apps.
Does anyone have an idea how to solve the problem?

bmld76 · Post by **bmld76** » Fri Jul 07, 2023 9:21 am

Hello,

To convert a spider basic WebApp in a fullscreen iOS app, I use this : https://web.dev/add-manifest/

create you spider web app
create a manifest param file
add a link in your index
add your web app on iPad screen

and your spider basic works like an IOS app.

if you want, I can try to find my demo file.

Dirk Geppert · Post by **Dirk Geppert** » Fri Jul 07, 2023 11:27 am

I would be interested in that too

bmld76 · Post by **bmld76** » Fri Jul 07, 2023 12:21 pm

There is a spider basic demo.

demo : http://bmaillard.free.fr/domotique

Open this link and use the share icon to record it on your Home Screen.

files

The link : add this link in the head part of your index.html

Code: Select all

<link rel="manifest" href="./manifest.webmanifest">

exemple

<!DOCTYPE html>
<html>
<head>
<link rel="manifest" href="./manifest.webmanifest">
<meta charset="utf-8"/>
<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1"><script type="text/javascript">var spider = {}; spider.nbModules = 1; spider.nbLoadedModules = 0;</script>

file manifest.webmanifest , download this file in the same folder as your app spider with the name 'manifest.webmanifest'

Code: Select all

{
  "short_name": "Demo",
  "name": "Domotique",
  "theme_color": "#E7BB00",
  "background_color": "#E7BB00",
  "display": "fullscreen",
  "orientation": "portrait",
  "icons": [
      {
          "src": "https://difabiolorenzo.github.io/picolito/src/img/icon_48.jpg",
          "type": "image/png",
          "sizes": "48x48"
      },
      {
          "src": "https://difabiolorenzo.github.io/picolito/src/img/icon_96.jpg",
          "type": "image/png",
          "sizes": "96x96"
      },
      {
          "src": "https://difabiolorenzo.github.io/picolito/src/img/icon_192.jpg",
          "type": "image/png",
          "sizes": "192x192"
      },
      {
          "src": "https://difabiolorenzo.github.io/picolito/src/img/icon_512.jpg",
          "type": "image/png",
          "sizes": "512x512"
      }
  ],
  "screenshots": [],
  "description": "Version en ligne et modifiée de Picolo"
}

Open your app in safari, an share it (sur l'écran d'accueil) on the home screen

Normally, when you open your wedapp from the home screen, you have a fullscreen app.

Enjoy

Dirk Geppert · Post by **Dirk Geppert** » Fri Jul 07, 2023 1:21 pm

After start the webapp from homescreen, its still opens in a framed browser. alll controls are visble. Tested with Safari/iOS17.0

Here is one, that works: https://www.vvo-mobil.de

Stefan · Post by **Stefan** » Fri Jul 07, 2023 2:45 pm

And should a normal user do that?
I don't even understand that as a Spiderbasic programmer.
Isn't there a fullscreen command for Apple that works?

bmld76 · Post by **bmld76** » Fri Jul 07, 2023 3:55 pm

Dirk
I test https://www.vvo-mobil.de and it is correct on my ipab. Very nice job ! So I don't understand your first sentence ?

Stephan, I understand what you mean , but it is possible to add javascript when spider don't answer.
try this : https://developer.mozilla.org/fr/docs/W ... screen_API.

I prefere my first solution, a param file and a link it is not the end of t world

bmld76 · Post by **bmld76** » Fri Jul 07, 2023 3:57 pm

Now, the best if to find how install the app automatically with a button for a standard user.

Stefan · Post by **Stefan** » Fri Jul 07, 2023 4:59 pm

But it's not about me. I'm programming a web app for the simple user. And he just wants to go to the site and play.

Code: Select all


var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
}

doesnt work with Apple!

bmld76 · Post by **bmld76** » Fri Jul 07, 2023 9:04 pm

I think it is a problem with iPad/safari. I found lot of information on this subject

Try with webkitRequestFullscreen

.../...
If you're using Safari with iOS 12.1+ on an iPad, the fullscreen api has been enabled but hidden behind the "webkit" prefix (webkitRequestFullscreen, webkitExitFullscreen, etc).

To enter fullscreen in this way, you must (usually) make several interactions before it activate.

This API (as far as I can tell) has not been finalised, and has some odd behaviour and quirks. Given a few months it may change or be opened up to other devices and/or browsers, but for now only works on the iOS 12.1+ version of Safari on an iPad.

SpiderBasic

Fullscreen Apple

Fullscreen Apple

Re: Fullscreen Apple

Re: Fullscreen Apple

Re: Fullscreen Apple

Re: Fullscreen Apple

Re: Fullscreen Apple

Re: Fullscreen Apple

Re: Fullscreen Apple

Re: Fullscreen Apple

Re: Fullscreen Apple