pwa via iframe

Konvertieren Sie das Web in App/PWA

Konvertieren Sie Websites mit IFrame in progressive Webanwendungen.

Es funktioniert mit jeder Website, auf der es in einem Iframe angezeigt werden kann. Große Websites wie Google, Facebook usw. erlauben dies nicht.

Demo

Als Beispiel habe ich eine PWA aus demselben Repository erstellt, das Sie in /Beispiel-ipwa /sehen können

Damit dieses Repository sowohl in mobilen Geräten als auch in Windows/iOS/Linux -Desktop als PWA installiert werden soll

Fangen an

Laden Sie dieses Repository einfach herunter und kopieren Sie das Verzeichnis / ipwa / das Verzeichnis auf die Website, die Sie in PWA konvertieren möchten.

Das / Beispiel-IPWA / Verzeichnis kann ignoriert oder gelöscht werden.

Sie müssen die Datei /ipwa/index.html bearbeiten und in der IFrame SRC die URL der Site einstellen, die Sie konvertieren möchten.

Es ist nicht notwendig, dass sich der Code dieses Repositorys in derselben Domäne befindet wie die Site, bei der Sie beispielsweise dieses Repository auf Ihrem Localhost installieren können, den IFrame in htttps: //example.com um Beispiel.com in PWA zu konvertieren

Sie können sogar in Localhost (oder in jeder Domäne) zahlreiche PWAs installieren, indem Sie einfach mehr Verzeichnisse mit verschiedenen Namen hinzufügen.

Beachten Sie, dass Sie auf http: // localhost keine HTTPS benötigen, damit es als PWA auf einer Domain im Internet funktioniert, ohne ein SSL- oder HTTPS -Zertifikat nicht funktioniert.

Änderungen, die Sie vornehmen müssen

Wie oben erläutert, ist die einzige obligatorische Änderung in der Datei /ipwa/index.html.

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

Wechsel zu:

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

Ändern Sie den PWA -Namen und die Beschreibung

Um den Namen der PWA zu ändern, müssen Sie zwei Dateien ändern, /ipwa/index.html und /ipwa/Manifest.json

In /ipwa/index.html ändern "iframe pwa" zum Namen Ihrer PWA:

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

In /ipwa/manifest.json ändern "Short_name", "Name" und "Beschreibung":

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

In /ipwa/Manifest.json Sie können auch den Hintergrund und die Themenfarbe ändern:

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

Symbole ändern

Sie können die PWA -Symbole in Ihre eigene ändern, einfach in/ipwa/icons/verzeichnis überschreiben, sie müssen PNG sein und die Größe ist im Dateinamen angegeben.

Ändern Sie das IPWA -Verzeichnis

Falls Sie lediglich mehr /ipwa /oder mehr /ipwa-1 /, /ipwa-2 /... hinzufügen möchten, müssen Sie alle Dateien in diesem Repository /ipwa /auf den gewünschten Namen ändern.

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

Lizenz

MIT -Lizenz