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

執照

麻省理工學院許可證