pwa via iframe

تحويل الويب إلى التطبيق/PWA

تحويل مواقع الويب إلى تطبيقات الويب التدريجية باستخدام iframe.

إنه يعمل مع أي موقع ويب يسمح بعرضه داخل iframe. مواقع كبيرة مثل Google و Facebook ، وما إلى ذلك لا تسمح بذلك.

العرض التوضيحي

على سبيل المثال ، قمت بإنشاء PWA من هذا المستودع نفسه الذي يمكنك رؤيته في /مثال IPWA /

لكي يتم تثبيت هذا المستودع كـ PWA في الأجهزة المحمولة وكذلك في سطح المكتب Windows/iOS/Linux ، انتقل إلى: مثال PWA عبر iframe

ابدأ

ما عليك سوى تنزيل هذا المستودع ونسخ / ipwa / الدليل إلى الموقع الذي تريد تحويله إلى PWA.

يمكن تجاهل / مثال IPWA / الدليل.

ستحتاج إلى تحرير ملف /ipwa/index.html وفي IFRAME SRC ، تضع عنوان URL للموقع الذي تريد تحويله.

ليس من الضروري أن يكون رمز هذا المستودع في نفس المجال الذي يحوله الموقع ، على سبيل المثال ، يمكنك تثبيت هذا المستودع على مضيفك المحلي ، وتغيير iframe إلى htttps: //example.com لتحويل example.com إلى PWA عن طريق الوصول إلى http: // localhost/ipwa/

يمكنك حتى التثبيت على مضيف LocalHost (أو على أي مجال) العديد من PWAs عن طريق إضافة المزيد من الدلائل بأسماء مختلفة http: // localhost/ipwa-1/http: // localhost/ipwa-2/...

لاحظ أنه بينما على http: // localhost ، لا تحتاج إلى https لجعلها تعمل كـ PWA ، على أي مجال على الإنترنت ، لن يعمل بدون شهادة 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

in /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 Change "Short_name" و "Name" و "Description":

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

In /ipwa/Manifest.json يمكنك أيضًا تغيير الخلفية ولون السمة:

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

تغيير الرموز

يمكنك تغيير أيقونات PWA الخاصة بك ، ببساطة في/IPWA/الرموز/الدليل الكتابة فوقها ، يجب أن تكون PNG ويتم تحديد الحجم في اسم الملف.

تغيير دليل IPWA

في حال كنت ترغب ببساطة في إعادة تسمية /IPWA /أو إضافة المزيد /IPWA-1 /، /IPWA-2 /... سيتعين عليك تغيير جميع الملفات في هذا المستودع /IPWA /إلى الاسم الذي تريده.

in /ipwa/index.html

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

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

رخصة

رخصة معهد ماساتشوستس للتكنولوجيا