pwa via iframe

Converter web em app/pwa

Converta sites da Web em aplicativos da Web progressivos usando o IFRAME.

Funciona com qualquer site que permita que ele seja exibido dentro de um iframe. Sites grandes como Google, Facebook, etc. Não permitem isso.

Demonstração

Como exemplo, criei um PWA a partir deste mesmo repositório que você pode ver em /exemplo-ipwa /

Para que este repositório seja instalado como PWA em dispositivos móveis, bem como no Windows/iOS/Linux Desktop, vá para: Exemplo PWA via iframe

Comece

Basta baixar este repositório e copiar o diretório / ipwa / para o site que você deseja converter para a PWA.

O diretório / exemplo-ipwa / pode ser ignorado ou excluído.

Você precisará editar o arquivo /ipwa/index.html e, no iframe src, você coloca o URL do site que deseja converter.

Não é necessário que o código deste repositório esteja no mesmo domínio que o site converta, por exemplo, você pode instalar este repositório em sua localhost, alterar o iframe para https: //example.com para converter exemplo.com em pwa, acessando http: // lochost/ipwa/

Você pode até instalar no host (ou em qualquer domínio) numerosos PWAs, simplesmente adicionando mais diretórios com nomes diferentes http: // localhost/ipwa-1/http: // localhost/ipwa-2/...

Observe que, enquanto estiver em http: // localhost, você não precisa de https para fazê -lo funcionar como um PWA, em qualquer domínio na Internet, ele não funcionará sem um certificado SSL ou HTTPS.

Alterações que você precisará fazer

Conforme explicado acima, a única alteração obrigatória é para o arquivo /ipwa/index.html.

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

Mudar para:

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

Altere o nome e a descrição do PWA

Para alterar o nome do PWA, você precisa modificar dois arquivos, /ipwa/index.html e /ipwa/manifest.json

Em /ipwa/index.html altere "iframe pwa" para o nome do seu PWA:

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

In /ipwa/manifest.json alteração "short_name", "nome" e "descrição":

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

Em /ipwa/manifest.json, você também pode alterar a cor do fundo e do tema:

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

Alterar ícones

Você pode alterar os ícones da PWA para os seus, simplesmente no diretório/ipwa/icons/o substituir, eles devem ser PNG e o tamanho é especificado no nome do arquivo.

Altere o diretório IPWA

Caso você simplesmente queira renomear /ipwa /ou adicionar mais /ipwa-1 /, /ipwa-2 /..., você terá que alterar todos os arquivos neste repositório /ipwa /para o nome desejado.

In /ipwa/index.html

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

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

Licença

MIT Licença