pwagenerator
v2.0.4
filesinctemplates dan Direktori template-partsfontsimgjsscss Generator PWA adalah generator situs statis yang membangun situs web statis berdasarkan konfigurasi proyek yang ditentukan di projects.json . Ini dapat menghasilkan semua yang diperlukan agar situs web berfungsi sebagai aplikasi web progresif, misalnya berfungsi offline dan dapat diinstal. Itu juga dapat menyebarkannya ke Netlify.
Cantumkan semua proyek yang dikonfigurasi untuk dibangun di projects.json
./pwagenerator.php projects
Bangun, terapkan, dan/atau buat ikon untuk proyek menggunakan konfigurasi proyek di projects.json
./pwagenerator.php [project] [option]
options:
-v verbose
-b build
-i generate icons
-d deploy
Misalnya:
./pwagenerator exampleproject.com -b
Untuk membuat proyek baru, tambahkan ke projects.json , lalu buat.
-v ): Memberikan keluaran yang lebih verbose untuk opsi lain yang dipilih ( -b , -i , atau -d ),-b ): Membangun proyek. Selama proses ini, PWA Generator menghasilkan semua file yang diperlukan agar proyek dapat berfungsi. Lihat Proses Pembuatan untuk informasi lebih lanjut.-i ): Menghasilkan ikon untuk proyek. Selama proses ini, Generator PWA menyiapkan array konfigurasi dan menghasilkan sekumpulan favicon dari file img/favicon.svg di direktori proyek menggunakan real-favicon.-d ): Menyebarkan proyek. Selama proses ini, Generator PWA menambah versi proyek dan menyebarkan direktori proyek ke Netlify menggunakan set netlify_id di projects.json dan netlify-cli. files Direktori files berisi file yang disalin ke dalam proyek saat proyek dibuat.
Font di direktori fonts hanya akan disalin jika terdaftar di objek fonts di projects.json , misalnya:
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
}
File di direktori opt hanya akan disalin jika terdaftar di objek opt_files di projects.json , misalnya:
"opt_files": [
"opt/google_auth.js"
]
inc Direktori inc berisi file yang digunakan untuk menjalankan tugas proyek.
class-build.php berisi fungsionalitas untuk membangun, menerapkan, dan menghasilkan favicon.class-cli.php berisi fungsionalitas untuk operasi baris perintah.class-projects.php berisi fungsionalitas untuk mendapatkan proyek dari projects.json .class-text.php berisi fungsionalitas untuk memformat teks.templates dan Direktori template-parts Direktori templates dan template-parts berisi file yang digunakan untuk membuat halaman.
Ketika sebuah proyek dibangun untuk pertama kalinya, beberapa file dan direktori dibuat di direktori proyek.
index.php : Tidak akan ditimpa oleh build selanjutnya dan harus berisi markup dan fungsionalitas apa pun yang khusus untuk proyek tersebut.js/main.ts : Tidak akan ditimpa oleh build mendatang dan harus berisi fungsionalitas khusus untuk proyek tersebut.scss/style.scss : Tidak akan ditimpa oleh build mendatang dan harus berisi gaya apa pun yang khusus untuk proyek tersebut._redirects : Netlify mengalihkan file. Dapat berisi aturan pengalihan dan penulisan ulang..gitignore : Git mengabaikan file. Berisi daftar file dan folder yang tidak boleh dilacak oleh Git.manifest.json : File manifes aplikasi web. Berisi data yang memberi tahu browser tentang aplikasi web progresif dan bagaimana perilakunya saat dipasang.package.json : file data proyek npm . Berisi data proyek untuk manajer paket npm .package-lock.json : file versi ketergantungan npm . Berisi versi ketergantungan untuk paket yang diinstal oleh manajer paket npm . Ini secara otomatis dihasilkan oleh npm ketika sebuah paket diinstal.robots.txt : File robot. Berisi daftar aturan untuk membantu mesin pencari menentukan halaman mana yang harus dan tidak boleh dirayapi.sitemap.xml : File peta situs. Berisi daftar halaman untuk membantu mesin pencari dengan penemuan konten dan dengan demikian meningkatkan optimasi mesin pencari (SEO).sw.js : File pekerja layanan. Berisi fungsionalitas yang menyimpan cache aset dan memungkinkan penjelajahan offline dan pengalaman "seperti aplikasi" yang dapat diunduh.tsconfig.json : File konfigurasi kompilasi Webpack TypeScript.webpack.config.js : File konfigurasi webpack untuk menghasilkan bundle.[hash].js dari file js/*.ts dan scss/*.scss .fonts Direktori fonts berisi file font yang disalin dari files/fonts selama proses pembuatan. Setiap perubahan yang dilakukan pada direktori ini akan ditimpa oleh versi selanjutnya.
img Direktori img berisi gambar dan file yang dihasilkan melalui perintah -i . favicon.svg harus ditempatkan di direktori ini sebelum menjalankan perintah itu.
Direktori ini juga harus berisi:
cache_files di projects.json . Jika disertakan dalam cache_files dan objek nav.image di projects.json , gambar tersebut akan digunakan di bilah navigasi header atas. Jika disertakan dalam cache_files dan objek header.image di projects.json , gambar tersebut akan digunakan di header utama.share.jpg yang digunakan untuk berbagi media sosial.posts.json , yang harus diberi nama URL postingan dengan ekstensi file .jpg .screenshots di projects.json .js Direktori js berisi file .ts yang disalin dari files/js selama proses pembuatan, dan file bundle.[hash].js yang dihasilkan dari file .ts ini dan file di direktori scss .
Direktori ini juga berisi file main.ts , yang akan dibuat sebagai file kosong pada build awal. Itu tidak akan ditimpa oleh build selanjutnya dan harus berisi fungsionalitas apa pun yang spesifik untuk proyek tersebut.
Direktori ini juga dapat berisi main.js jika diperlukan file yang belum dikompilasi. Jika diperlukan, file ini juga harus disertakan dalam objek cache_files di projects.json .
scss Direktori scss berisi file .scss yang disalin dari files/scss selama proses pembuatan.
Direktori ini juga berisi file style.scss , yang akan dihasilkan pada build awal sebagai file yang hanya berisi deklarasi :root {} yang berisi font dan warna dari objek fonts dan colors di projects.json . Itu tidak akan ditimpa oleh build selanjutnya dan harus berisi gaya apa pun yang spesifik untuk proyek tersebut.
projects.json bergantung pada project yang diteruskan melalui baris perintah.$this->project_data['files']['compile'] digunakan untuk mengkompilasi file ke dalam direktori proyek.$this->project_data['files']['compile']$this->project_data['files']['copy'] digunakan untuk menyalin file ke direktori proyek.files/scss dan files/js ditambahkan ke $this->project_data['files']['copy'] .files/opt hanya ditambahkan ke $this->project_data['files']['copy'] jika file tersebut juga terdaftar di objek opt_files di projects.json , misalnya: "opt_files": [
"opt/google_auth.js"
]
$this->project_data['files']['copy'] .$this->project_data['files']['cache'] digunakan untuk menambahkan file ke file sw.js untuk di-cache oleh pekerja layanan.data.json (digunakan untuk membuat halaman tambahan guna menciptakan pengalaman penelusuran seperti aplikasi) dan posts.json (digunakan untuk membuat postingan blog), ditambahkan ke $this->project_data['files']['cache'] .cache_files di projects.json ditambahkan ke $this->project_data['files']['cache'] , misalnya: "cache_files": [
"img/logo_header.svg",
"img/logo_nav.svg",
"img/shortcut.png"
]
files/opt hanya ditambahkan ke $this->project_data['files']['cache'] jika file tersebut juga terdaftar di objek opt_files di projects.json , misalnya: "opt_files": [
"opt/google_auth.js"
]
$this->project_data['files']['cache']post (misalnya diekstraksi dari posts.json ), gambar juga ditambahkan ke $this->project_data['files']['cache'] , menggunakan URL halaman dan ekstensi file .jpg .$this->project_data['files']['cache']$this->project_data['sitemap']['urls'] untuk membuat file sitemap.xml nanti.package.jsonindex.phpscss dan scss/style.scss dengan deklarasi :root {} yang berisi font dan warna dari objek fonts dan colors di projects.json , misalnya "fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
},
"colors": {
"main": {
"normal": "92D7DA",
"dark": "489094"
},
"accent": {
"normal": "FA96C0",
"dark": "B34F78"
}
}
js dan js/main.tsopt direktori.gitignore dengan node_modulessw.js$this->project_data['files']['copy'] ke dalam direktori proyek.bundle.[hash].js dari file js/*.ts dan scss/*.scss yang disediakan menggunakan Webpack melalui webpack-cli, kemudian menggunakan perintah php dengan project , page , dan project_data diteruskan sebagai argumen untuk kompilasi setiap file dalam $this->project_data['files']['compile'] menjadi file .html yang diperkecil.manifest.json . File manifest.json disalin ke direktori proyek, kemudian dimodifikasi sesuai dengan nilai di projects.json ( categories , screenshots , shortcuts , android_app_id , dan apple_app_id ).$this->project_data['files']['compile'] dan $this->project_data['files']['copy'] :***FILES*** : File dari $this->project_data['files']['cache']***URLS*** : URL dari $this->project_data['redirects'] dan $this->project_data['sitemap']['urls']***REDIRECT_URLS*** : URL dari $this->project_data['files']['compile'] dan $this->project_data['redirects']***URL*** : URL proyek dari $this->project_data['url']***TITLE*** : Judul proyek dari $this->project_data['title']***DESCRIPTION*** : Deskripsi proyek dari $this->project_data['description']***VERSION*** : Versi proyek dari $this->project_data['version'] (diekstrak dari sw.js )***DATE*** : tanggal('Ym-d') Ini adalah font yang tersedia untuk digunakan di objek fonts di projects.json , misalnya:
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
}
Proyek sumber terbuka berikut telah dibangun menggunakan PWA Generator. Lihat situs web, repo GitHub, dan konfigurasi proyek untuk projects.json di bawah.
{
"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": []
}
Kontribusi dipersilakan! Jika Anda menemukan masalah, atau mempunyai ide untuk perbaikan, jangan ragu untuk membuat masalah.
