pwa via iframe

Преобразовать Интернет в приложение/pwa

Конвертируйте веб -сайты в прогрессивные веб -приложения, используя iframe.

Он работает с любым веб -сайтом, который позволяет отображать его внутри iframe. Большие сайты, такие как Google, Facebook и т. Д. Не допускают этого.

Демо

В качестве примера я создал PWA из того же репозитория, который вы можете увидеть в /Пример-IPWA /

Чтобы установить этот репозиторий в виде PWA в мобильных устройствах, а также в Windows/IOS/Linux.

Начните

Просто загрузите этот репозиторий и скопируйте каталог / ipwa / на сайте, который вы хотите преобразовать в PWA.

/ Пример-IPWA / Directory может быть проигнорирован или удален.

Вам нужно будет отредактировать файл /ipwa/index.html, а также в SRC Iframe, который вы поместите URL -адрес сайта, который вы хотите преобразовать.

Нет необходимости, чтобы код этого репозитория находился в том же домене, что и на сайте для конвертации, например, вы можете установить этот репозиторий на свой локальный хост, изменить iframe на htttps: //example.com, чтобы преобразовать пример в pwa, получив htttp: // localhost/ipwa/ipwa/ipwa/ipwa/ipwa/ipwa/ipwa/ipwa/ipwa/ipwa/ipwa/ipwa/ipwa/ipwa/example.com.

Вы можете даже установить на Localhost (или на любом домене) многочисленные PWA, просто добавив больше каталогов с различными именами http: // localhost/ipwa-1/http: // localhost/ipwa-2/...

Обратите внимание, что в то время как на http: // localhost вам не нужно https, чтобы заставить его работать в качестве PWA, на любом домене в Интернете, он не будет работать без сертификата SSL или HTTPS.

Изменения вам нужно будет сделать

Как объяснено выше, единственное обязательное изменение - файл /ipwa/index.html.

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

Изменить на:

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

Изменить имя и описание PWA

Чтобы изменить имя PWA, вам нужно изменить два файла, /ipwa/index.html и /ipwa/manifest.json

В /пва /index.html изменение "iframe pwa" на имя вашего PWA:

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

В /пва /manifest.json изменить "short_name", "имя" и "описание":

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

В /пва /manifest.json вы также можете изменить фон и цвет темы:

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

Изменить значки

Вы можете изменить значки PWA на свои собственные, просто в/IPWA/ICONS/Directory перезаписать их, они должны быть PNG, а размер указан в имени файла.

Изменить каталог IPWA

Если вы просто хотите переименовать /ipwa /или добавить больше /ipwa-1 /, /ipwa-2 /... вам придется изменить все файлы в этом репозитории /ipwa /на имя, которое вы хотите.

В /пва /index.html

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

В /пва /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",
        ..
    }
]

Лицензия

MIT Лицензия