Discussion :

[SuperCed]

Hello,

je cherche un framwork ou une lib, ou un squelette qui me permettrait de développer une webapp android facilement.
En fait, il s'agirait même d'une progressive web app car j'aurais besoin que l'icône de la page reste sur le bureau Android.

Donc ce serait sympa si tout le process lié à l'aspect webapp soit déjà géré. Par contre, pas forcément besoin du push, et du mode offline. Donc pas forcément de service worker.

Je voudrais un framework avec une courbe d'apprentissage rapide et pas de compilation entre le code et le serveur (pas de webpack, babel, etc).

Une truc vraiment simple car c'est une webapp qui a une seule page avec quelques infos et quelques boutons qui déclenchent des requêtes ajax simples.
J'aimerais que la gestion de l'interface soit un peu jolie.

L'idée est de trouver un framework js qui me permette d'aller vite et de passer peu de temps en apprentissage.

Je connais déjà pas mal VueJS par exemple, mais là, je souhaite quelque chose de plus simple et compacte sans compilation.

Un squelette de webapp avec un bon CSS pourrait aussi me convenir, je n'ai pas encore fouillé tous les petits framworks JS qui existent, et il y en a pas mal...

Ou alors une genre de bootstrap mais en plus léger et plus moderne.

Merci!

[krakatoa]

tu le dis toi meme que tu n'a pas besoin d'un framework..

tu le fais sans framework !

[SuperCed]

En effet, c'est peut être le plus simple au final... C'était surtout pour le rendu graphique où je ne suis pas très bon.

[krakatoa]

et bien c'est le moment d'apprendre

pour le graphisme un framework ou lib ne t'aidera pas

[SuperCed]

Ben un peu quand même quand tu utilises ViewJS avec Vuetify, tu as très peu de graphisme à faire, et c'est joli direct. Donc je cherche un peu la même chose, mais sans la lourdeur de compilation.

[VirgApps]

Bonjour,
Dans ce cas tu es des librairies CSS comme Bootstrap, Bulma, MaterializeCSS...

[SuperCed]

Oui, c'est ça ! Ca me va bien un truc graphique à la bootstrap, par contre, je connais celui-ci et j'aime pas. Je le trouve lourd et j'aime pas le système de grille.
Si quelqu'un connait un truc plus moderne et leger, ça m'intéresse !

[SuperCed]

Bulma, MaterializeCSS...

Je viens de regarder ces 2 là, ils ont l'air top et très rapides à prendre en main !

Pour le coté webapp, vu que c'est juste le recourcis sur le bureau Android qui m'intéresse, je ferai un manifest, je crois que c'est ça qui gère cette fonctionnalité.
Même si c'est pas exactement ça, je trouverai un moyen de la coder rapidement.


Et pour les appels ajax, je vais faire du vanilla ou du jquery, les 2 sont sont rapides à coder.

Merci !

Si vous avez d'autres conseils sur les bootstrap like, je suis preneur, je sais qu'il y en a plein et c'est pas facile d'en trouver un. J'en cherche surtout un facile à mettre en place comme bulma. Il a l'air très bien celui là !

[Doksuri]

Bonjour, je ne veux pas casser l'ambiance, mais je me questionne quant a l'avenir des PWA i-programmer.info/news/87-web-development/14261-firefox-drops-support-for-pwa.html

[SuperCed]

Intéressant!

Bon, dans le cas qui m'interesse, il s'ahit plutôt d'une page web, avec la possibilité d'avoir un racourcis sur le bureau Android. Pas plus que ça, donc ce n'est pas une vraie PWA.

Mais c'est intéressant comme article, c'est vrai que le principe de PWA n'a jamais été ultra répandu au final, alors que ça permet quand même d'offrir un contenu commun pour les 2 OS mobiles principaux sans passer par des framework complexes.

Mais le résultat, c'est que ça n'a jamais vraiment pris. Peut être que l'absence des stores en est la cause.

[Doksuri]

meme si ce n'est qu'une page web... tout le concept est en place, donc ca reste une PWA....

sinon, pour repondre a ta question principale, personnellement, j'ai une PWA "type" qui comprends 4 fichiers... une page web index.html, une page web offline.html, un JS qui integre le serviceWorker, le service worker qui comprend les 3 listeners (install, activate & fetch) (le fetch gere le mode offline -offline.html- )
=> cette PWA fait juste un hello world !

quand je dois faire une nouvelle PWA, je recuper le squelette, et je continue

[SuperCed]

Si tu veux partager tes 4 fichiers templates, ça m'intéresse !

[Doksuri]

j'avais oublie aussi le fichier manifest

manifest.json

Code json :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
    "name": "minimal pwa",
    "short_name": "minipwa",
    "description": "PWA minimaliste",
    "icons": [
        {
            "src": "tonIcon.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "start_url": "https://tonDomain.ext",
    "background_color": "#cccccc",
    "theme_color": "#cccccc",
    "display": "standalone",
    "scope": "https://tonDomain.ext",
    "prefer_related_applications": false
}

index.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>ma pwa minimaliste</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<link rel="manifest" href="manifest.json">
	<meta name="theme-color" content="#cccccc" />
</head>
<body>
	<h1>yeah !</h1>
</body>
<script src="script.js"></script>
</html>

offline.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>offline</title>
</head>
<body>
offline !
</body>
</html>

script.js

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
navigator.serviceWorker.register('sw.js')
    .then(registration => {
        // console.log('Service worker registration succeeded:', registration);
    })
    .catch(error => {
        // console.log('Service worker registration failed:', error);
    });

sw.js

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const cacheName = 'static-v1';
const assets = [
    'offline.html'
];
 
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(cacheName)
            .then(cache => {
                cache.addAll(assets);
            })
    );
});
 
self.addEventListener('activate', event => {
});
 
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(cacheRes => {
                return cacheRes || fetch(event.request);
            })
            .catch(() => caches.match('offline.html') )
    );
});

[SuperCed]

Merci, je vais essayer tes templates avec bulma.

Je vous dirai si ça va vite...