pwa via iframe

Convertir le web en APP / PWA

Convertissez les sites Web en applications Web progressives à l'aide d'Iframe.

Il fonctionne avec n'importe quel site Web qui lui permet d'être affiché dans un iframe. Les grands sites comme Google, Facebook, etc. ne permettent pas cela.

Démo

À titre d'exemple, j'ai créé un PWA à partir de ce même référentiel que vous pouvez voir dans / Exemple-ipwa /

Pour que ce référentiel soit installé en tant que PWA dans les appareils mobiles ainsi que dans Windows / iOS / Linux Desktop, allez à: Exemple PWA via iframe

Commencer

Téléchargez simplement ce référentiel et copiez le répertoire / ipwa / sur le site que vous souhaitez convertir en PWA.

Le répertoire / Exemple-IPWA / peut être ignoré ou supprimé.

Vous devrez modifier le fichier /ipwa/index.html et dans le src iframe, vous mettez l'URL du site que vous souhaitez convertir.

Il n'est pas nécessaire que le code de ce référentiel soit dans le même domaine que le site à convertir, par exemple, vous pouvez installer ce référentiel sur votre localhost, modifier l'IFRAME en htttps: //example.com pour convertir Exemple.com en PWA en accédant à http: // localhost / ipwa /

Vous pouvez même installer sur localHost (ou sur n'importe quel domaine) de nombreux PWA en ajoutant simplement plus de répertoires avec différents noms http: // localhost / ipwa-1 / http: // localhost / ipwa-2 / ...

Notez que si sur http: // localhost, vous n'avez pas besoin de HTTPS pour le faire fonctionner en tant que PWA, sur n'importe quel domaine sur Internet, cela ne fonctionnera pas sans certificat SSL ou HTTPS.

Modifications que vous devrez apporter

Comme expliqué ci-dessus, le seul changement obligatoire est dans le fichier /ipwa/index.html.

 <iframe src="https://thenocoder.github.io/" ... </iframe>

Passer à:

 <iframe src="https://site-to-be-converted-to-pwa..." ... </iframe>

Modifier le nom et la description PWA

Pour modifier le nom du PWA, vous devez modifier deux fichiers, /ipwa/index.html et /pwa/manifest.json

Dans /ipwa/index.html change "iframe pwa" au nom de votre pwa:

 <meta name="application-name" content="Iframe PWA">
<meta name="apple-mobile-web-app-title" content="Iframe PWA">

Dans /ipwa/manifest.json modifie "short_name", "nom" et "Description":

 "short_name": "Iframe PWA",
"name": "My IFrame Progressive Web App",
"description": "My Progressive Web App via iframe",

Dans /ipwa/manifest.json, vous pouvez également modifier l'arrière-plan et la couleur du thème:

 "background_color": "#FFFFFF",
"theme_color": "#000000",

Changer les icônes

Vous pouvez changer les icônes PWA par les vôtres, simplement dans le répertoire / ipwa / les écraser, ils doivent être PNG et la taille est spécifiée dans le nom de fichier.

Modifier le répertoire IPWA

Dans le cas où vous souhaitez simplement renommer / ipwa / ou ajouter plus / ipwa-1 /, / ipwa-2 / ... vous devrez modifier tous les fichiers dans ce référentiel / ipwa / au nom que vous souhaitez.

Dans /ipwa/index.html

 ...
<link rel="manifest" href="/ipwa/manifest.json">
...
<script>
    ...
    serviceWorkerReg = navigator.serviceWorker.register('/ipwa/service-worker.js');
    ...
</script>

Dans /ipwa/manifest.json

 ...
"id": "/ipwa/",
"start_url": "/ipwa/",
"icons": [
    {
        "src": "/ipwa/icons/32x32.png",
        ...
    },
    {
        "src": "/ipwa/icons/192x192.png",
        ...
    },
    {
        "src": "/ipwa/icons/512x512.png",
        ...
    },
    {
        "src": "/ipwa/icons/512-maskable.png",
        ..
    }
]

Licence

Licence MIT