pwa via iframe

将Web转换为应用/PWA

使用iframe将网站转换为渐进的Web应用程序。

它可以与任何允许它在iframe内显示的网站一起使用。诸如Google，Facebook等的大型网站不允许这样做。

演示

例如，我创建了一个来自相同存储库的PWA，您可以在 /example-ipwa /

要使此存储库在移动设备以及Windows/ios/linux桌面中安装为PWA

开始

只需下载此存储库，然后将 / IPWA /目录复制到要转换为PWA的网站。

可以忽略或删除 /示例IPWA /目录。

您将需要编辑 /ipwa/index.html文件，在iframe src中，您要将网站的URL放置为要转换的网站。

该存储库的代码不必与转换的站点相同的域位于同一域，例如，您可以在本地主机上安装此存储库，将IFRAME更改为htttps：//example.com，通过访问http：// localhost/ipwa/ipwa/ipwa/ipwa/ipwa/ipwa/

您甚至可以通过简单地添加带有不同名称的更多目录http：// http：// localhost/ipwa-1/http：// localhost/ipwa-2/...来安装许多PWA（或任何域）。

请注意，在http：// localhost上，您不需要https就可以使其作为PWA起作用，而在Internet上的任何域中，没有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

在 /ipwa/index.html中，将“ iframe pwa”更改为PWA的名称：

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

在 /ipwa/manifest.json更改“ short_name”，“ name”和“ description”：

 "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/iCons/Directory覆盖它们中，它们必须是PNG，并且大小在文件名中指定。

更改IPWA目录

如果您只想重命名 /ipwa /或添加更多 /ipwa-1 /， /ipwa-2 /...您将必须将此存储库 /IPWA /IPWA /IPWA /IPWA /IPWA /IPWA /IPWA /IPWA /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",
        ..
    }
]

执照

麻省理工学院许可证