pwagenerator

مولد PWA

• عن
• الاستخدام
  • خيارات
• هيكل الملف
  • دليل files
  • دليل المؤتمر inc
  • templates وأدلة template-parts القالب
• هيكل ملف المشروع
  • دليل fonts
  • دليل img
  • دليل js
  • دليل scss
• عملية البناء
• الخطوط
  • شريف
  • بلا رقيق
  • متنوعات
• مشاريع نموذجية
  • nicolefurlan.com / https://github.com/nikkifurls/nicolefurlan.com
  • dogsafefoods.com / https://github.com/nikkifurls/nicolefurlan.com
• المساهمات
• تواصل معنا

عن

PWA Generator هو منشئ مواقع ثابتة يقوم بإنشاء مواقع ويب ثابتة بناءً على تكوين المشروع المحدد في projects.json . يمكنه إنشاء كل ما يلزم لموقع الويب ليعمل كتطبيق ويب تقدمي، على سبيل المثال، يعمل دون اتصال بالإنترنت ويكون قابلاً للتثبيت. ويمكنه أيضًا نشره على Netlify.

الاستخدام

قم بإدراج جميع المشاريع التي تم تكوينها للبناء في projects.json

 ./pwagenerator.php projects

إنشاء ونشر و/أو إنشاء أيقونات لمشروع باستخدام تكوين المشروع في projects.json

 ./pwagenerator.php [project] [option]
options:
	-v verbose
	-b build
	-i generate icons
	-d deploy

على سبيل المثال:

 ./pwagenerator exampleproject.com -b

لإنشاء مشروع جديد، قم بإضافته إلى projects.json ثم قم بإنشائه.

خيارات

• Verbose ( -v ): يوفر مخرجات أكثر تفصيلاً للخيار الآخر المحدد ( -b أو -i أو -d ).
• Build ( -b ): يبني المشروع. خلال هذه العملية، يقوم PWA Generator بإنشاء كافة الملفات اللازمة لتشغيل المشروع. راجع عملية البناء لمزيد من المعلومات.
• إنشاء أيقونات ( -i ): إنشاء أيقونات للمشروع. أثناء هذه العملية، يقوم PWA Generator بإعداد مصفوفة تكوين وإنشاء مجموعة من الرموز المفضلة من ملف img/favicon.svg في دليل المشروع باستخدام الأيقونة الحقيقية.
• نشر ( -d ): نشر المشروع. أثناء هذه العملية، يقوم PWA Generator بزيادة إصدار المشروع ونشر دليل المشروع إلى Netlify باستخدام مجموعة netlify_id في projects.json وnetlify-cli.

هيكل الملف

دليل files

يحتوي دليل files على الملفات التي تم نسخها إلى المشروع عند إنشائه.

لن يتم نسخ الخطوط الموجودة في دليل fonts إلا إذا كانت مدرجة في كائن fonts في projects.json ، على سبيل المثال:

 "fonts": {
	"heading": "Roboto Slab",
	"body": "Roboto"
}

لن يتم نسخ الملفات الموجودة في دليل opt إلا إذا كانت مدرجة في كائن opt_files في projects.json ، على سبيل المثال:

 "opt_files": [
	"opt/google_auth.js"
]

دليل المؤتمر inc

يحتوي دليل inc على الملفات المستخدمة لتنفيذ مهام المشروع.

• يحتوي class-build.php على وظائف لإنشاء ونشر وإنشاء الرموز المفضلة.
• يحتوي class-cli.php على وظائف لعمليات سطر الأوامر.
• يحتوي class-projects.php على وظيفة الحصول على المشاريع من projects.json .
• يحتوي class-text.php على وظيفة تنسيق النص.

templates وأدلة template-parts القالب

تحتوي templates template-parts على ملفات تُستخدم لإنشاء الصفحات.

هيكل ملف المشروع

عند إنشاء مشروع لأول مرة، يتم إنشاء عدة ملفات وأدلة في دليل المشروع.

• index.php : لن يتم استبداله بالإصدارات المستقبلية ويجب أن يحتوي على أي علامات ووظائف خاصة بالمشروع.
• js/main.ts : لن يتم استبداله بالإصدارات المستقبلية ويجب أن يحتوي على أي وظيفة خاصة بالمشروع.
• scss/style.scss : لن يتم استبداله بواسطة الإصدارات المستقبلية ويجب أن يحتوي على أي أنماط خاصة بالمشروع.
• _redirects : ملف إعادة التوجيه Netlify. يمكن أن تحتوي على قواعد إعادة التوجيه وإعادة الكتابة.
• .gitignore : بوابة تجاهل الملف. يحتوي على قائمة بالملفات والمجلدات التي لا ينبغي لـ Git تتبعها.
• manifest.json : ملف بيان تطبيق الويب. يحتوي على بيانات تخبر المتصفح عن تطبيق الويب التقدمي وكيف يجب أن يتصرف عند تثبيته.
• package.json : ملف بيانات المشروع npm . يحتوي على بيانات المشروع لمدير الحزم npm .
• package-lock.json : ملف إصدار تبعية npm . يحتوي على إصدارات التبعية للحزم المثبتة بواسطة مدير الحزم npm . يتم إنشاؤه تلقائيًا بواسطة npm عند تثبيت الحزمة.
• ملف robots.txt : ملف الروبوتات. يحتوي على قائمة من القواعد لمساعدة محركات البحث في تحديد الصفحات التي يجب عليها الزحف إليها وتلك التي لا ينبغي لها الزحف إليها.
• sitemap.xml : ملف خريطة الموقع. يحتوي على قائمة من الصفحات لمساعدة محركات البحث في اكتشاف المحتوى وبالتالي تحسين تحسين محركات البحث (SEO).
• sw.js : ملف عامل الخدمة. يحتوي على وظيفة تقوم بتخزين الأصول مؤقتًا وتسمح بالتصفح في وضع عدم الاتصال وتجربة "شبيهة بالتطبيق" قابلة للتنزيل.
• tsconfig.json : ملف تكوين تجميع Webpack TypeScript.
• webpack.config.js : ملف تكوين Webpack لإنشاء bundle.[hash].js من ملفات js/*.ts و scss/*.scss .

دليل fonts

يحتوي دليل fonts على ملفات الخطوط التي تم نسخها من files/fonts أثناء عملية الإنشاء. سيتم استبدال أي تغييرات يتم إجراؤها في هذا الدليل بواسطة الإصدارات المستقبلية.

دليل img

يحتوي دليل img على الصور والملفات التي تم إنشاؤها عبر الأمر -i . يجب وضع favicon.svg في هذا الدليل قبل تشغيل هذا الأمر.

ويجب أن يحتوي هذا الدليل أيضًا على:

• أي صور مضمنة في كائن cache_files في projects.json . إذا تم تضمينها في cache_files وفي كائن nav.image في projects.json ، فسيتم استخدام الصورة في شريط التنقل العلوي. إذا تم تضمينها في cache_files وفي كائن header.image في projects.json ، فسيتم استخدام الصورة في الرأس الرئيسي.
• صورة share.jpg تُستخدم لمشاركة الوسائط الاجتماعية.
• صورة مميزة لأي منشورات مضمنة في posts.json ، والتي يجب تسميتها بعنوان URL للمنشور بامتداد ملف .jpg .
• أي صور مضمنة في كائن screenshots في projects.json .

دليل js

يحتوي دليل js على ملفات .ts التي تم نسخها من files/js أثناء عملية الإنشاء، بالإضافة إلى ملف bundle.[hash].js الذي تم إنشاؤه من ملفات .ts والملفات الموجودة في دليل scss .

يحتوي هذا الدليل أيضًا على ملف main.ts ، والذي سيتم إنشاؤه كملف فارغ عند البناء الأولي. لن يتم استبداله بالإصدارات المستقبلية ويجب أن يحتوي على أي وظيفة خاصة بالمشروع.

يمكن أيضًا أن يحتوي هذا الدليل اختياريًا على main.js ، إذا كانت هناك حاجة إلى ملف غير مترجم. إذا كان ذلك مطلوبًا، فيجب أيضًا تضمين هذا الملف في كائن cache_files في projects.json .

دليل scss

يحتوي دليل scss على ملفات .scss التي تم نسخها من files/scss أثناء عملية الإنشاء.

يحتوي هذا الدليل أيضًا على ملف style.scss ، والذي سيتم إنشاؤه في البنية الأولية كملف يحتوي فقط على تعريف :root {} الذي يحتوي على الخطوط والألوان من كائنات fonts colors في projects.json . لن يتم استبداله بالبنيات المستقبلية ويجب أن يحتوي على أي أنماط خاصة بالمشروع.

عملية البناء

1. يحصل على تكوين المشروع من projects.json اعتمادًا على project الذي تم تمريره عبر سطر الأوامر.
2. إنشاء العديد من المصفوفات التي سيتم استخدامها لاحقًا في عملية الإنشاء.
   • يتم استخدام المصفوفة $this->project_data['files']['compile'] لتجميع الملفات في دليل المشروع.
     • تتم إضافة الصفحات إلى $this->project_data['files']['compile']
   • يتم استخدام المصفوفة $this->project_data['files']['copy'] لنسخ الملفات إلى دليل المشروع.
     • تتم إضافة الملفات الموجودة في files/scss files/js إلى $this->project_data['files']['copy'] .
     • تتم إضافة الملفات الموجودة في files/opt فقط إلى $this->project_data['files']['copy'] إذا كانت مدرجة أيضًا في كائن opt_files في projects.json ، على سبيل المثال:

        "opt_files": [
        	"opt/google_auth.js"
        ]
       

     • تتم إضافة ملفات الخطوط الخاصة بخط العنوان والخط الأساسي وFontawesome إلى $this->project_data['files']['copy'] .
   • يتم استخدام المصفوفة $this->project_data['files']['cache'] لإضافة ملفات إلى ملف sw.js للتخزين المؤقت بواسطة عامل الخدمة.
     • تتم إضافة الملفات المستخدمة لإنشاء الصفحات، data.json (المستخدمة لإنشاء صفحات إضافية لإنشاء تجربة بحث تشبه التطبيق) و posts.json (المستخدمة لإنشاء منشورات المدونة)، إلى $this->project_data['files']['cache'] .
     • تتم إضافة الملفات المدرجة في كائن cache_files في projects.json إلى $this->project_data['files']['cache'] ، على سبيل المثال:

        "cache_files": [
        	"img/logo_header.svg",
        	"img/logo_nav.svg",
        	"img/shortcut.png"
        ]
       

     • تتم إضافة الملفات الموجودة في files/opt فقط إلى $this->project_data['files']['cache'] إذا كانت مدرجة أيضًا في كائن opt_files في projects.json ، على سبيل المثال:

        "opt_files": [
        	"opt/google_auth.js"
        ]
       

     • تتم إضافة الصفحات إلى $this->project_data['files']['cache']
       • إذا كانت الصفحة post (على سبيل المثال، مستخرجة من posts.json )، فستتم إضافة صورة أيضًا إلى $this->project_data['files']['cache'] ، باستخدام عنوان URL للصفحة وامتداد الملف .jpg .
     • تتم إضافة ملفات الخطوط الخاصة بخط العنوان والخط الأساسي وFontawesome إلى $this->project_data['files']['cache']
3. يضيف الصفحات $this->project_data['sitemap']['urls'] لإنشاء ملف sitemap.xml لاحقًا.
4. ينشئ ويملأ دليل المشروع إذا لم يكن موجودًا بالفعل:
   • ملف package.json
   • ملف index.php
   • دليل scss و scss/style.scss مع إعلان :root {} يحتوي على الخطوط والألوان من كائنات fonts colors في projects.json ، على سبيل المثال

    "fonts": {
   	"heading": "Roboto Slab",
   	"body": "Roboto"
   },
   "colors": {
   	"main": {
   		"normal": "92D7DA",
   		"dark": "489094"
   	},
   	"accent": {
   		"normal": "FA96C0",
   		"dark": "B34F78"
   	}
   }
   

   • دليل js و js/main.ts
   • opt الدليل
   • ملف .gitignore مع node_modules
   • ملف عامل الخدمة sw.js
5. نسخ الملفات المدرجة في المصفوفة $this->project_data['files']['copy'] إلى دليل المشروع.
6. ينشئ ملف bundle.[hash].js من ملفات js/*.ts و scss/*.scss المتوفرة باستخدام Webpack عبر webpack-cli، ثم يستخدم أمر php مع project page و project_data التي تم تمريرها كوسيطات إلى قم بتجميع كل ملف في $this->project_data['files']['compile'] في ملف .html مصغر.
7. يُنشئ ملف manifest.json . يتم نسخ ملف manifest.json إلى دليل المشروع، ثم يتم تعديله وفقًا للقيم الموجودة في projects.json ( categories screenshots shortcuts و android_app_id و apple_app_id ).
8. يستبدل الأنماط التالية في الملفات في $this->project_data['files']['compile'] و $this->project_data['files']['copy'] :
   • ***FILES*** : الملفات من $this->project_data['files']['cache']
   • ***URLS*** : عناوين URL من $this->project_data['redirects'] و $this->project_data['sitemap']['urls']
   • ***REDIRECT_URLS*** : عناوين URL من $this->project_data['files']['compile'] و $this->project_data['redirects']
   • ***URL*** : عنوان URL للمشروع من $this->project_data['url']
   • ***TITLE*** : عنوان المشروع من $this->project_data['title']
   • ***DESCRIPTION*** : وصف المشروع من $this->project_data['description']
   • ***VERSION*** : إصدار المشروع من $this->project_data['version'] (مستخرج من sw.js )
   • ***DATE*** : التاريخ('Ym-d')

الخطوط

هذه هي الخطوط المتاحة للاستخدام في كائن fonts في projects.json ، على سبيل المثال:

 "fonts": {
	"heading": "Roboto Slab",
	"body": "Roboto"
}

شريف

• أرفو
• مر
• بري شريف
• لورا
• ميريويذر
• عرض بلايفير
• روبوتو بلاطة

بلا رقيق

• لاتو
• ميريويذر بلا
• مونتسيرات
• نونيتو
• نونيتو ​​سانس
• فتح بلا
• الأكسجين
• بوبينز
• الرمال المتحركة
• راليواي
• روبوتو
• العمل بلا

متنوعات

• أماتيك إس سي
• بيباس نيو
• أوزوالد
• باسيفيكو
• الجاودار
• النخبة الخاصة

مشاريع نموذجية

تم إنشاء المشاريع مفتوحة المصدر التالية باستخدام PWA Generator. تحقق من موقع الويب، وGitHub repo، وتكوين المشروع لـ projects.json أدناه.

nicolefurlan.com / https://github.com/nikkifurls/nicolefurlan.com

 {
	"url": "nicolefurlan.com",
	"title": "Nicole Furlan",
	"description": "Software engineer on a pursuit of equality, compassion, and justice for all.",
	"keywords": "nicole furlan, nicole pitts",
	"categories": [],
	"netlify_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
	"gtm_id": "G-XXXXXXXXXX",
	"fbpixel_id": null,
	"repixel_id": null,
	"google_ads": false,
	"amazon_ads": false,
	"other_ads": false,
	"google_api": {
		"google_api_client_id": null,
		"google_api_client_key": null,
		"google_api_key": null,
		"google_api_scope": null,
		"google_api_url": null,
		"google_api_callback": null
	},
	"fonts": {
		"heading": "Playfair Display",
		"body": "Raleway"
	},
	"fontawesome": true,
	"android_app_id": {
		"free": null,
		"paid": null
	},
	"apple_app_id": {
		"free": null,
		"paid": null
	},
	"screenshots": [
		"img/screenshot.png"
	],
	"shortcuts": null,
	"links": [],
	"nav": {
		"image": "img/logo_nav.svg"
	},
	"header": {
		"title": "Hi! I'm Nicole",
		"description": "I'm a Software Engineer working on building a better world for us all",
		"image": "img/background.webp",
		"image_credit": "Photo by <a href="https://pbase.com/tclout/root" alt="Thomas Cloutier Photography">Thomas Cloutier Photography</a>"
	},
	"social": {
		"mailto": "[email protected]",
		"facebook": null,
		"twitter": null,
		"github": "nikkifurls",
		"patreon": null,
		"paypal": "donate?hosted_button_id=M7MMF3EWQTLKG",
		"portfolio": null,
		"yelp": null,
		"tripadvisor": null,
		"custom": [
			{
				"url": null,
				"label": null,
				"text": null,
				"link": null
			}
		]
	},
	"author": {
		"name": "Nicole Furlan",
		"twitter": "nicolemfurlan"
	},
	"redirects": [
		{
			"from": "/donate",
			"to": "https://www.paypal.com/donate?hosted_button_id=M7MMF3EWQTLKG"
		}
	],
	"pages": [],
	"cache_files": [
		"img/background.webp",
		"img/logo_nav.svg"
	],
	"opt_files": []
}

dogsafefoods.com / https://github.com/nikkifurls/nicolefurlan.com

 {
	"url": "dogsafefoods.com",
	"title": "Dog Safe Foods",
	"description": "Sharing food with your dog? Make sure it's safe first",
	"keywords": "dog safe foods, dog safe human food, dog safe human foods, safe for dogs to eat, can dogs eat, can my dog eat, can dogs have, can my dog have, good human food for dogs, food dog can eat",
	"categories": [
		"pets",
		"food"
	],
	"netlify_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
	"gtm_id": "G-XXXXXXXXXX",
	"fbpixel_id": "xxxxxxxxxxxxxxx",
	"repixel_id": "xxxxxxxxxxxxxxxxxxxxxxxx",
	"google_ads": true,
	"amazon_ads": false,
	"other_ads": false,
	"google_api": {
		"google_api_client_id": null,
		"google_api_client_key": null,
		"google_api_key": null,
		"google_api_scope": null,
		"google_api_url": null,
		"google_api_callback": null
	},
	"fonts": {
		"heading": "Roboto Slab",
		"body": "Roboto"
	},
	"fontawesome": true,
	"android_app_id": {
		"free": "com.dog_safe_foods.twa",
		"paid": "com.dogsafefoods.twa"
	},
	"apple_app_id": {
		"free": null,
		"paid": null
	},
	"screenshots": [
		"img/screenshot1.png",
		"img/screenshot2.png",
		"img/screenshot3.png"
	],
	"shortcuts": [
		{
			"name": "View Safe Foods",
			"description": "View all foods that are safe for dogs to eat",
			"url": "./safe",
			"icons": [
				{
					"src": "img/icon-thumbs-up.png",
					"sizes": "512x512"
				}
			]
		},
		{
			"name": "View Unsafe Foods",
			"description": "View all foods that are not safe for dogs to eat",
			"url": "./unsafe",
			"icons": [
				{
					"src": "img/icon-thumbs-down.png",
					"sizes": "512x512"
				}
			]
		}
	],
	"links": [],
	"nav": {
		"image": "img/logo_nav.svg"
	},
	"header": {
		"title": null,
		"description": null,
		"image": "img/logo_header.svg",
		"image_credit": null
	},
	"social": {
		"mailto": "[email protected]",
		"facebook": null,
		"twitter": "dogsafefoods",
		"github": "nikkifurls/dogsafefoods",
		"patreon": null,
		"paypal": "donate?hosted_button_id=M7MMF3EWQTLKG",
		"portfolio": "nicolefurlan.com",
		"yelp": null,
		"tripadvisor": null,
		"custom": [
			{
				"url": "https://catsafefoods.com",
				"label": "Cat Safe Foods",
				"text": null,
				"link": "<i class='fas fa-cat'></i>"
			}
		]
	},
	"author": {
		"name": "Nicole Furlan",
		"twitter": "nicolemfurlan"
	},
	"redirects": [
		{
			"from": "/healthy",
			"to": "/safe 301!"
		},
		{
			"from": "/unhealthy",
			"to": "/unsafe 301!"
		},
		{
			"from": "/healthy.html",
			"to": "/safe 301!"
		},
		{
			"from": "/unhealthy.html",
			"to": "/unsafe 301!"
		},
		{
			"from": "/* food=:food",
			"to": "/:food 301!"
		}
	],
	"pages": {
		"*": {
			"url": "",
			"title": "",
			"description": "Sharing ***TITLE*** with your dog? Make sure it's safe first",
			"keywords": "can dogs eat ***TITLE***, can dogs have ***TITLE***, dogs ***TITLE***, dogs and ***TITLE***, ***TITLE*** safe for dogs, ***TITLE*** bad for dogs, ***TITLE*** ok for dogs, is it safe for dogs to eat ***TITLE***, is it safe for dogs to have ***TITLE***"
		},
		"safe": {
			"url": "safe",
			"title": "Safe Foods for Dogs",
			"description": "Sharing food with your dog? Make sure it's on this list of safe foods for dogs first",
			"keywords": "healthy human food for dogs, safe human food for dogs, human food that dogs can eat, good human food for dogs"
		},
		"unsafe": {
			"url": "unsafe",
			"title": "Unsafe Foods for Dogs",
			"description": "Sharing food with your dog? Make sure it's not on this list of unsafe foods for dogs first",
			"keywords": "unhealthy human food for dogs, food not to feed dogs, bad food for dogs, bad human food for dogs"
		}
	},
	"cache_files": [
		"img/logo_header.svg",
		"img/logo_nav.svg",
		"img/icon-thumbs-up.png",
		"img/icon-thumbs-down.png",
		"ads.txt",
		"sellers.json"
	],
	"opt_files": []
}

المساهمات

المساهمات هي موضع ترحيب! إذا اكتشفت مشكلة، أو كانت لديك فكرة للتحسين، فلا تتردد في إنشاء مشكلة.

تواصل معنا

• البريد الإلكتروني: [email protected]
• تويتر: @ نيكولم فورلان