pwa via iframe

Konversi Web ke App/PWA

Konversi situs web menjadi aplikasi web progresif menggunakan iframe.

Ini berfungsi dengan situs web apa pun yang memungkinkannya ditampilkan di dalam iframe. Situs besar seperti Google, Facebook, dll. Jangan izinkan ini.

Demo

Sebagai contoh, saya telah membuat PWA dari repositori yang sama yang dapat Anda lihat di /Contoh-IPWA /

Agar repositori ini akan diinstal sebagai PWA di perangkat seluler serta di desktop Windows/iOS/Linux. Buka: Contoh PWA melalui IFRAME

Mulai

Cukup unduh repositori ini dan salin / IPWA / direktori ke situs yang ingin Anda konversi ke PWA.

/ Contoh-IPWA / direktori dapat diabaikan atau dihapus.

Anda perlu mengedit file /ipwa/index.html dan di iframe SRC Anda meletakkan URL situs yang ingin Anda konversi.

Tidak perlu bahwa kode repositori ini berada di domain yang sama dengan situs untuk dikonversi, misalnya, Anda dapat menginstal repositori ini pada localhost Anda, ubah iframe menjadi htttps: //example.com untuk mengonversi example.com menjadi pwa dengan mengakses http: // localhost/ipwa/

Anda bahkan dapat menginstal di LocalHost (atau di domain apa pun) banyak PWA dengan hanya menambahkan lebih banyak direktori dengan nama yang berbeda http: // localhost/ipwa-1/http: // localhost/ipwa-2/...

Perhatikan bahwa saat berada di http: // localhost Anda tidak perlu https untuk membuatnya berfungsi sebagai PWA, pada domain apa pun di internet, itu tidak akan berfungsi tanpa sertifikat SSL atau HTTPS.

Perubahan yang perlu Anda lakukan

Seperti dijelaskan di atas, satu -satunya perubahan wajib adalah pada file /ipwa/index.html.

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

Ubah ke:

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

Ubah Nama dan Deskripsi PWA

Untuk mengubah nama PWA, Anda perlu memodifikasi dua file, /ipwa/index.html dan /ipwa/manifest.json

Di /ipwa/index.html ubah "iframe pwa" ke nama pwa Anda:

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

Di /ipwa/manifest.json mengubah "short_name", "name" dan "description":

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

Di /ipwa/manifest.json Anda juga dapat mengubah latar belakang dan warna tema:

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

Ubah ikon

Anda dapat mengubah ikon PWA menjadi milik Anda, hanya di/IPWA/ikon/direktori menimpanya, mereka harus PNG dan ukurannya ditentukan dalam nama file.

Ubah Direktori IPWA

Jika Anda hanya ingin mengganti nama /ipwa /atau menambahkan lebih banyak /ipwa-1 /, /ipwa-2 /... Anda harus mengubah semua file dalam repositori /ipwa /ke nama yang Anda inginkan.

Di /ipwa/index.html

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

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

Lisensi

Lisensi MIT