pwa via iframe

Convertir la web a la aplicación/PWA

Convierta los sitios web en aplicaciones web progresivas utilizando iframe.

Funciona con cualquier sitio web que permita que se muestre dentro de un iframe. Los sitios grandes como Google, Facebook, etc. no permiten esto.

Manifestación

Como ejemplo, he creado un PWA a partir de este mismo repositorio que puede ver en /Ejemplo-IPWA /

Para que este repositorio se instale como PWA en dispositivos móviles, así como en Windows/iOS/Linux Desktop, vaya a: Ejemplo PWA a través de iframe

Empezar

Simplemente descargue este repositorio y copie el directorio / ipwa / en el sitio que desea convertir a PWA.

El directorio / Ejemplo-IPWA / se puede ignorar o eliminar.

Deberá editar el archivo /ipwa/index.html y en el SRC iframe colocó la URL del sitio que desea convertir.

No es necesario que el código de este repositorio esté en el mismo dominio que el sitio para convertir, por ejemplo, puede instalar este repositorio en su localhost, cambiar el iframe a htttps: //example.com para convertir Ejemplo.com accionando accediendo a http: // localhost/ipwa//

Incluso puede instalar en localhost (o en cualquier dominio) numerosos PWA simplemente agregando más directorios con diferentes nombres http: // localhost/ipwa-1/http: // localhost/ipwa-2/... ...

Tenga en cuenta que, si bien en http: // localhost no necesita HTTPS para que funcione como PWA, en cualquier dominio en Internet, no funcionará sin un certificado SSL o HTTPS.

Cambios que necesitará hacer

Como se explicó anteriormente, el único cambio obligatorio es para el archivo /ipwa/index.html.

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

Cambio a:

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

Cambiar el nombre y la descripción de PWA

Para cambiar el nombre del PWA, debe modificar dos archivos, /ipwa/index.html y /ipwa/manifest.json

In /ipwa/index.html cambia "iframe pwa" al nombre de tu PWA:

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

In /ipwa/manifest.json cambia "short_name", "nombre" y "descripción":

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

En /ipwa/manifest.json también puede cambiar el fondo y el color del tema:

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

Cambiar iconos

Puede cambiar los iconos PWA a los suyos, simplemente en/ipwa/icons/directorio sobrescribirlos, deben ser PNG y el tamaño se especifica en el nombre de archivo.

Cambiar el directorio IPWA

En caso de que simplemente desee cambiar el nombre /ipwa /o agregar más /ipwa-1 /, /ipwa-2 /... tendrá que cambiar todos los archivos en este repositorio /ipwa /al nombre que desee.

En /ipwa/index.html

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

En /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",
        ..
    }
]

Licencia

Licencia de MIT