pwa via iframe

웹을 App/PWA로 변환하십시오

iframe을 사용하여 웹 사이트를 프로그레시브 웹 응용 프로그램으로 변환하십시오.

iframe 내부에 표시 할 수있는 모든 웹 사이트와 함께 작동합니다. Google, Facebook 등과 같은 대규모 사이트는이를 허용하지 않습니다.

데모

예를 들어, 나는 당신이 /example-ipwa /에서 볼 수있는 것과 같은 저장소에서 PWA를 만들었습니다.

이 저장소가 모바일 장치와 Windows/iOS/Linux 데스크톱에 PWA로 설치하려면 : Iframe을 통해 PWA 예제 PWA

시작하세요

이 저장소를 다운로드하고 / IPWA / 디렉토리를 PWA로 변환하려는 사이트로 복사하십시오.

/ example-IPWA / 디렉토리를 무시하거나 삭제할 수 있습니다.

/ipwa/index.html 파일을 편집해야하며 iframe SRC에서 변환하려는 사이트의 URL을 넣습니다.

예를 들어,이 저장소의 코드가 사이트와 동일한 도메인에있을 필요는 없습니다. 예를 들어,이 저장소를 LocalHost에 설치하고 iframe을 htttps : //example.com으로 변경하여 http : // localhost/ipwa/에 액세스하여 example.com으로 변환 할 수 있습니다.

http : // localhost/ipwa-1/http : // localhost/ipwa-2/...으로 다른 이름으로 더 많은 디렉토리를 추가하여 LocalHost (또는 모든 도메인)에 설치할 수도 있습니다.

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의 이름을 변경하려면 /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 change "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/아이콘/디렉토리를 덮어 쓰기로 변경할 수 있습니다. PNG 여야하며 크기는 파일 이름에 지정되어 있어야합니다.

IPWA 디렉토리를 변경하십시오

단순히 /ipwa /또는 more /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 라이센스