pwagenerator
v2.0.4
filesinctemplates และไดเร็กทอรี template-partsfontsimgjsscss PWA Generator คือเครื่องมือสร้างไซต์แบบคงที่ที่สร้างเว็บไซต์แบบคงที่ตามการกำหนดค่าโปรเจ็กต์ที่ระบุใน projects.json มันสามารถสร้างทุกสิ่งที่จำเป็นสำหรับเว็บไซต์เพื่อใช้งาน aa progressive web app เช่น ทำงานแบบออฟไลน์และสามารถติดตั้งได้ นอกจากนี้ยังสามารถนำไปใช้กับ 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 จากนั้นจึงสร้างโปรเจ็กต์
-v ): ให้เอาต์พุตแบบละเอียดมากขึ้นสำหรับตัวเลือกอื่นที่เลือก ( -b , -i , หรือ -d )-b ): สร้างโปรเจ็กต์ ในระหว่างกระบวนการนี้ PWA Generator จะสร้างไฟล์ทั้งหมดที่จำเป็นสำหรับโปรเจ็กต์ในการทำงาน ดูกระบวนการสร้างสำหรับข้อมูลเพิ่มเติม-i ): สร้างไอคอนสำหรับโครงการ ในระหว่างกระบวนการนี้ PWA Generator จะตั้งค่าอาร์เรย์การกำหนดค่าและสร้างชุดของไอคอน Fav จากไฟล์ img/favicon.svg ในไดเร็กทอรีโปรเจ็กต์โดยใช้ real-favicon-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 มีฟังก์ชันสำหรับการสร้าง การปรับใช้ และสร้างไอคอน Favclass-cli.php มีฟังก์ชันการทำงานสำหรับการดำเนินการบรรทัดคำสั่งclass-projects.php มีฟังก์ชันสำหรับรับโปรเจ็กต์จาก projects.jsonclass-text.php มีฟังก์ชันสำหรับการจัดรูปแบบข้อความtemplates และไดเร็กทอรี template-parts ไดเร็กทอรี templates และ template-parts ประกอบด้วยไฟล์ที่ใช้สำหรับการสร้างเพจ
เมื่อสร้างโปรเจ็กต์เป็นครั้งแรก ไฟล์และไดเร็กทอรีหลายไฟล์จะถูกสร้างขึ้นในไดเร็กทอรีโปรเจ็กต์
index.php : จะไม่ถูกเขียนทับโดยบิวด์ในอนาคต และควรมีมาร์กอัปและฟังก์ชันการทำงานเฉพาะสำหรับโปรเจ็กต์js/main.ts : จะไม่ถูกเขียนทับโดยบิวด์ในอนาคต และควรมีฟังก์ชันการทำงานใดๆ ที่เฉพาะเจาะจงสำหรับโปรเจ็กต์scss/style.scss : จะไม่ถูกเขียนทับโดยบิวด์ในอนาคต และควรมีสไตล์ใดๆ ที่เฉพาะเจาะจงสำหรับโปรเจ็กต์_redirects : ไฟล์การเปลี่ยนเส้นทาง Netlify สามารถมีกฎการเปลี่ยนเส้นทางและการเขียนซ้ำ.gitignore : Git ละเว้นไฟล์ ประกอบด้วยรายการไฟล์และโฟลเดอร์ที่ Git ไม่ควรติดตามmanifest.json : ไฟล์รายการแอปพลิเคชันเว็บ มีข้อมูลที่บอกเบราว์เซอร์เกี่ยวกับ Progressive Web App และวิธีการทำงานของแอปเมื่อติดตั้งpackage.json : ไฟล์ข้อมูลโครงการ npm มีข้อมูลโปรเจ็กต์สำหรับตัวจัดการแพ็กเกจ npmpackage-lock.json : ไฟล์เวอร์ชันการพึ่งพา npm มีเวอร์ชันการขึ้นต่อกันสำหรับแพ็คเกจที่ติดตั้งโดยตัวจัดการแพ็คเกจ npm มันถูกสร้างขึ้นโดยอัตโนมัติโดย npm เมื่อมีการติดตั้งแพ็คเกจrobots.txt : ไฟล์โรบ็อต ประกอบด้วยรายการกฎที่ช่วยให้เครื่องมือค้นหาพิจารณาว่าควรรวบรวมข้อมูลหน้าใดและไม่ควรรวบรวมข้อมูลsitemap.xml : ไฟล์แผนผังไซต์ ประกอบด้วยรายการเพจเพื่อช่วยเครื่องมือค้นหาในการค้นพบเนื้อหาและปรับปรุงการปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหา (SEO)sw.js : ไฟล์พนักงานบริการ ประกอบด้วยฟังก์ชันการทำงานที่แคชเนื้อหาและอนุญาตให้เรียกดูแบบออฟไลน์และประสบการณ์ "เหมือนแอป" ที่ดาวน์โหลดได้tsconfig.json : ไฟล์คอนฟิกูเรชันการคอมไพล์ Webpack TypeScriptwebpack.config.js : ไฟล์การกำหนดค่า Webpack สำหรับการสร้าง bundle.[hash].js จากไฟล์ js/*.ts และ scss/*.scssfonts ไดเร็กทอรี 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 ของโพสต์ด้วยนามสกุลไฟล์ . .jpgscreenshots ใน projects.jsonjs ไดเร็กทอรี 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 มันจะไม่ถูกเขียนทับโดยบิวด์ในอนาคต และควรมีสไตล์ใดๆ ที่เฉพาะเจาะจงสำหรับโปรเจ็กต์
projects.json ขึ้นอยู่กับ project ที่ส่งผ่านบรรทัดคำสั่ง$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"
]
$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$this->project_data['files']['cache']$this->project_data['sitemap']['urls'] สำหรับการสร้างไฟล์ sitemap.xml ในภายหลังpackage.jsonindex.phpscss และ 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.tsopt ไดเร็กทอรี.gitignore พร้อมด้วย node_modulessw.js$this->project_data['files']['copy'] ไปยังไดเร็กทอรีโปรเจ็กต์bundle.[hash].js ไฟล์จากไฟล์ js/*.ts และ scss/*.scss ที่จัดทำโดยใช้ Webpack ผ่าน webpack-cli จากนั้นใช้คำสั่ง php กับ project , page และ project_data ที่ส่งผ่านเป็นอาร์กิวเมนต์ คอมไพล์แต่ละไฟล์ใน $this->project_data['files']['compile'] ให้เป็นไฟล์ .html ที่ย่อเล็กสุดmanifest.json ไฟล์ manifest.json จะถูกคัดลอกลงในไดเร็กทอรีโปรเจ็กต์ จากนั้นแก้ไขตามค่าใน projects.json ( categories , screenshots , shortcuts , android_app_id และ apple_app_id )$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*** : date('ym-d') เหล่านี้เป็นแบบอักษรที่พร้อมใช้งานสำหรับใช้ในวัตถุ fonts ใน projects.json เช่น:
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
}
โปรเจ็กต์โอเพ่นซอร์สต่อไปนี้ถูกสร้างขึ้นโดยใช้ PWA Generator ตรวจสอบเว็บไซต์, repo GitHub และการกำหนดค่าโปรเจ็กต์สำหรับ projects.json ด้านล่าง
{
"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": []
}
{
"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": []
}
ยินดีบริจาค! หากคุณพบปัญหาหรือมีแนวคิดในการปรับปรุง อย่าลังเลที่จะสร้างปัญหาขึ้นมา
