Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
admin:pwa [2020/12/18 09:56] – [Comment transformer mon site en appli ?] lucyboat | admin:pwa [2020/12/18 12:12] (Version actuelle) – [Objectif] lucyboat |
---|
| |
> Ajouter un raccourci à l'écran d'accueil | > Ajouter un raccourci à l'écran d'accueil |
| |
| Cette documentation est en cours de construction, les éléments repérés par le symbol FIXME seront complétés prochainement. |
| |
| ===== Objectif ===== |
| |
Vous l'avez déjà certainement remarqué en navigant sur Internet, certains site vous propose d'**Ajouter un raccourci à l'écran d'accueil.** | Vous l'avez déjà certainement remarqué en navigant sur Internet, certains site vous propose d'**Ajouter un raccourci à l'écran d'accueil.** |
Il s'agit d'ajouter un raccourci sur votre smartphone vers une Progressive Web Application (PWA). | Il s'agit d'ajouter un raccourci sur votre smartphone vers une Progressive Web Application (PWA). |
| |
La PWA d'Amapress vous permettra d'intégrer une version optimisée de votre site. | La PWA d'Amapress vous permettra d'intégrer une version optimisée de votre site pour un chargement plus rapide des pages. Le site est affiché sans le contexte de l’interface du navigateur : format plein écran, cela permet une meilleurs lisibilité. |
| |
| Pour les amapiens équipés de smartphones, ils auront ainsi un accès direct vers le site de l'Amap et l'utiliser lors d'une disptribution par exemple. |
| |
| |
Avoir finalisé la configuration d’Amapress et du site. | Avoir finalisé la configuration d’Amapress et du site. |
| |
| 👉 [[:admin:etat_amapress|]] |
===== Objectif ===== | |
| |
Pour les amapiens équipés de smartphones, cela permet d’avoir un raccourci depuis son smartphone vers un site optimisé ce qui permet un chargement plus rapide. | |
| |
Le site est affiché sans le contexte de l’interface du navigateur : format plein écran, cela permet une meilleurs lisibilité: | |
| |
===== Configuration Admin ===== | ===== Configuration Admin ===== |
| |
Retrouvez les réglages PWA dans l’ ►**Etat d’Amapress, section 3/ Configuration**. | Retrouvez les réglages PWA dans l’ ►**Etat d’Amapress, section 3/ Configuration**. |
| ==== Activez les plugin PWA et Autoptmize ==== |
| |
Activez les plugin | * Cliquez sur ►**Progressive Web App __(Installer) __ ** |
| * Cliquez sur ►**Autoptimize __(Installer) __ ** |
| |
►PWA | FIXME L'ergonomie de cette section est en cours d'amélioration |
| |
►Autoptimize | |
| |
{{:admin:8727ecacc38dd4cff365dd59ff240346.png}} | {{:admin:8727ecacc38dd4cff365dd59ff240346.png}} |
| |
Configurez PWA | ==== Configuration Progressive Web App ==== |
| |
Donnez un nom court à l'appli de votre site et choisissez les paramètres qui vous conviennent. | Donnez un nom court à l'appli de votre site et choisissez les paramètres qui vous conviennent. |
{{:admin:355f8624a164225a16fa32c8b8c776bf.png}} | {{:admin:355f8624a164225a16fa32c8b8c776bf.png}} |
| |
Configurez Autoptimize | ==== Configuration Autoptimize ==== |
| |
* | Accessible depuis ►**Tableau de bord>Réglages>Options d’Autoptimize** |
| |
**<font 11ptfont-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;/Arial;;inherit;;#000000background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;>Puis dans Tableau de bord>Réglages>Options d’Autoptimize</font>** | === Javascript === |
**<font 11ptfont-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;/Arial;;inherit;;#000000background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;>Optimisez le code Javascript :</font>** | |
| Cochez la case **►Optimisez le code Javascript ?** et laissez les paramètres par défaut. |
| |
{{:admin:2b8742a41d1098450c98055c14d90c7d.png}} | {{:admin:2b8742a41d1098450c98055c14d90c7d.png}} |
| |
**<font 11ptfont-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;/Arial;;inherit;;#000000background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;>Optimisez le code CSS :</font>** | === CSS === |
* | |
| Cochez la case **►****Optimisez le code CSS ?** et laissez les paramètres par défaut. |
| |
| {{:admin:392a2cc162251fd22cd5a6efc23ade66.png}} |
| |
| {{:admin:f44e40a0148a438ba62b6846ad32f71f.png}} |
| |
| === HTML === |
| |
| Cochez la case **►****Optimisez le code HTML ?** et laissez les paramètres par défaut. |
| |
**<font 11ptfont-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;/Arial;;inherit;;#000000background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;>Optimiser le code HTML ?</font>** | > Cliquez sur ►**Enregistrer les modifications et vider le cache** |
**<font 11ptfont-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;/Arial;;inherit;;#000000background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;>Enregistrer les modifications et vider le cache</font>** | |
| |
| |