Flotato transforme facilement un site web en application macOS

Mickaël Bazoge |

Les sites web ont tout naturellement vocation à être consultés et utilisés depuis un navigateur. Mais les technologies du web sont devenues si puissantes que certains services en ligne ressemblent à de vraies applications. Dans ces conditions, pourquoi ne pas les considérer comme telles ?

Il existe des moulinettes qui transforment des sites en apps. La première qui vient en tête, c’est bien sûr Electron, une plateforme de développement qui s’appuie sur les trois piliers du web moderne (HTML, CSS et Javascript) avec un moteur Chromium sous le capot. Grâce à Electron, on peut utiliser des apps comme Slack, Simplenote ou encore Brave sur Mac… mais c’est au prix d’une consommation souvent excessive de ressources (lire : Développement : Electron est-il le nouveau Flash ?).

Flotato avec trois sites moulinés en apps par ses soins : Netflix, YouTube et MacGeneration.

Des solutions plus accessibles pour le grand public sont disponibles, et qui tirent moins sur le moteur de son Mac, à l’instar de l’utilitaire Fluid qui exploite WebKit. Dans cette même catégorie vient se glisser Flotato. Outre un nom rigolo, cet utilitaire propose des raffinements intéressants.

À l’ouverture du logiciel, celui-ci ne laisse pas l’utilisateur seul sans défense : la page d’accueil liste une sélection de sites et de services en ligne (Gmail, Twitter, Instagram, Netflix, Slack, YouTube…) qui se transformeront en applications simplement en cliquant sur le bouton Get. L’opération génère une web app qui vient se loger dans le dossier Applications du Mac, tandis que son icône se gare dans le dock du Finder.

Un badge sur l’icône de la web app Gmail. Notez la pixelisation de l’icône de MacGeneration : Flotato prend le favicon du site web quand il n’a pas en stock l’icône haute définition du site transformé en app.

Cette icône a les mêmes propriétés qu’une app classique, on peut la conserver dans le dock, la déplacer sur le bureau ou ailleurs, la rechercher dans Spotlight, certaines peuvent même afficher des badges rouges. Seul hic, c’est l’icône de Flotato qui s’affiche pour chacune des web apps présentes dans le dossier Applications (quand on les glisse sur le bureau, c’est un raccourci qui porte l’icône de Flotato). Dans le dock, elle prennent bien l’apparence des services.

Quant aux applications, elles fonctionnent de manière autonome, sans que Flotato soit actif. Il est possible de redimensionner la fenêtre, de la basculer en Split View, de la fermer sans la quitter, bref, tout ce qu’un logiciel macOS est censé faire. L’interface se résume aux trois boutons rouge-orange-jaune du système, qui disparaissent quand le curseur de la souris n’est pas auprès d’eux.

La fonction Dock Monitor Active affiche dans le dock un morceau de l’app que l’on aura sélectionné au préalable.

La fenêtre de la web app peut se positionner au premier plan via l’option Pin to top, on peut afficher la version mobile ou de bureau, et il est même possible de transformer l’icône de l’app en une capture du site (pratique pour garder un œil sur une information comme la météo ou un cours de Bourse).

Flotato ne se limite pas à une sélection de services bien connus. Il est possible de créer une application à partir de n’importe quel site web. Même pas besoin de connaitre l’URL exacte : il suffit de saisir le nom du site (au hasard « MacG ») pour que l’utilitaire fasse le reste.

C’est dans la boîte.

À l’instar de Fluid, Flotato utilise WebKit. L’empreinte des apps est moindre qu’avec Electron : une web app comme Twitter créée depuis l’utilitaire ne consomme que 10% de la mémoire nécessaire à Chrome pour faire rouler le même site web, selon l’éditeur. Le poids des web apps est aussi plus léger : 20 Mo pour Netflix, par exemple.

En bref, Flotato est un outil intéressant qui permet de consulter et d’utiliser ses sites web et services en ligne de prédilection d’une manière similaire à des applications standard. L’utilitaire est gratuit et il permet de créer six web apps. Pour bénéficier d’un nombre illimité d’apps, il faut passer à la caisse et payer 14,99 $.

Tags
avatar raoolito | 

n’importe qui pourrait donc creer son set d’app dependant de ses preferences sur le web  ?
whoputain, ca a du tres bon ca  !

avatar Lucas | 

10% de la RAM consommée par Chrome ?! WAOU ! TAKE MY MONEY ! ?

« L’empreinte des apps est moindre qu’avec Electron : une web app comme Twitter créée depuis l’utilitaire ne consomme que 10% de la mémoire nécessaire à Chrome pour faire rouler le même site web, selon l’éditeur. Le poids des web apps est aussi plus léger : 20 Mo pour Netflix, par exemple.

avatar RedMak | 

Que se passe-t-il si, dans le site transformé en app, il y a un lien vers un autre site (domaine) ? si le lien est « clickable » comment revenir à l’app (le site) ?

avatar Kinky | 

@ RedMak
Rien de plus simple. La nature d'un hyperlien peut être choisie dans n'importe quel outil de conception. Soit dans le code avant le portage web > app, soit après si l'outil le permet, c'est un faut problème. Ensuite un lien web classique ouvre le navigateur (pour retourner sur l'app, sur Android il suffit de cliquer sur la flèche retour en bas. Sur mac, il faut cliquer à nouveau sur l'app). Toutes les possibilités sont à la portée du codeur, sans parler des éléments dynamiques plus complexes.

Des outils d'encapsulage de sites HTML/CSS/Javascript en apps androis/iOS, ça existe déjà depuis des années. Si l'idée peut sembler simple, ça peut vite devenir complexe et nécessiter un développeur front.

La principale difficulté réside en amont dans le bon codage du site, avant le portage vers l'app (déclinaison responsive propre, micro interactions reconnues, adaptations ergonomiques, compatibilité avec Chromium… ). Le zéro bug semble peu crédible.

Le gros du travail se fera en amont. Les sites anciens, à l'ergonomie old school, codés avec les pieds ou utilisant des langages non conformes iront au casse pipe. Les sites modernes responsive sont souvent pensés comme des apps, avec micro interactions, effets d'animation, etc. Même si l'ergonomie d'une app diffère de celle d'un site.

avatar RedMak | 

@Kinky

Merci, je suis dev ios et je voilais savoir si le comportement est configurable ;)

avatar greggorynque | 

Pas d’onglets j’imagine ?
J’utilise chrome uniquement pour mes comptes google, et je serais bien passé la dessus, mais si je ne peux pas avoir 3/4 onglets ouverts c’est moins utile :(

avatar bunam | 

il existe aussi
coherence :
https://www.macg.co/logiciels/2017/08/coherence-encapsule-les-sites-web-...
du même éditeur, unite :
https://www.bzgapps.com/unite
et encore, macify :
https://www.macify.co/

je suis perdu la ;)

avatar DonJulien | 

Dans Setapp, j'ai pu découvrir Unite qui permet de faire la même chose avec des performances très bonnes. C'est super, notamment pour des applications qui ne sont pas disponibles en natives sur Mac OS comme Asana ou Salesforce. C'est particulièrement plaisant à utiliser!

avatar Derw | 

Bonjour.

Je cherche la même chose pour iOS (transformer un site en appli iOs...). C’est possible ?

avatar Simmalt | 

@Derw

Oui, et même en fonction de base de Safari !
Quand tu es sur un site dans Safari, il te suffit d'appeler le volet "partager", c'est celui qui a pour icône le carré avec une flèche qui en sort en direction du haut, et qui se trouve au milieu, dans la barre du bas (à côté des boutons "précédent/suivant" et "historique/onglets").

Puis tu fais glisser la barre du bas jusqu'à trouver "Sur l'écran d'accueil", c'est une icône gris foncé avec un "+" dedans.
Si tu ne trouves pas, tu auras peut-être à chercher dans "Autre", tout à droite.

Et ensuite à toi les WebApp, moins gourmandes en place, et surtout nettoyées des pubs que le bloqueur de contenu de ton choix agissant dans Safari s'occupera à éradiquer ?!

avatar Derw | 

Merci @Simmalt

Malheureusement, cela ne fait pas vraiment ce que je veux. Cette manip crée une icône sur l’écran d’accueil qui peut servir de raccourci pour ouvrir la page web dans safari, mais cela ne fait pas une application autonome.

CONNEXION UTILISATEUR