pwa via iframe

WebをApp/PWAに変換します

WebサイトをIFRAMEを使用してプログレッシブWebアプリケーションに変換します。

iframe内に表示できるWebサイトで動作します。 Google、Facebookなどの大規模なサイトはこれを許可しません。

デモ

例として、私はあなたが見ることができるこの同じリポジトリからPWAを作成しました /例-IPWA /

このリポジトリは、モバイルデバイスおよびWindows/iOS/LinuxデスクトップにPWAとしてインストールされるために、IFRAME経由の例PWAに移動します

始めましょう

このリポジトリをダウンロードして、 / IPWA /ディレクトリをPWAに変換するサイトにコピーしてください。

/ Example-IPWA /ディレクトリは無視または削除できます。

/Ipwa/index.htmlファイルを編集する必要があり、IFRAME SRCで、変換するサイトのURLを配置します。

このリポジトリのコードがコンバージョンのサイトと同じドメインにあることは必要ありません。たとえば、このリポジトリをローカルホストにインストールし、htttps：//example.comを変更してhttp：// localhost/ipwa/ipwa/ipwa/

LocalHost（または任意のドメイン）に、異なる名前のディレクトリhttp：// localhost/ipwa-1/http：// localhost/ipwa-2/...を追加するだけで、多数のPWAにインストールすることもできます。

http：// localhostでは、インターネット上の任意のドメインでPWAとして機能させるためにHTTPSを必要としない場合、SSLまたはHTTPS証明書なしでは機能しないことに注意してください。

必要な変更

上で説明したように、唯一の必須の変更は、/Ipwa/index.htmlファイルに対するものです。

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

変更：

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

PWAの名前と説明を変更します

PWAの名前を変更するには、2つのファイル、/Ipwa/index.htmlと/ipwa/manifest.jsonを変更する必要があります

/Ipwa/index.htmlで、「iframe pwa」をPWAの名前に変更します。

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

IN /IPWA/MANIFEST.JSON変更「SHORT_NAME」、「名前」、「説明」：

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

/ipwa/manifest.jsonでは、背景とテーマの色を変更することもできます。

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

アイコンを変更します

PWAアイコンを自分のアイコンに変更できます。これは、/ipwa/アイコン/ディレクトリ上でそれらを上書きするだけで、それらはPNGでなければならず、サイズはファイル名で指定されています。

IPWAディレクトリを変更します

単に /IPWA /または /または /IPWA-1 /、 /IPWA-2 /を追加するだけの場合に備えて、このリポジトリ /IPWA /のすべてのファイルを必要な名前に変更する必要があります。

/Ipwa/index.htmlで

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

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

ライセンス

MITライセンス