pwagenerator
v2.0.4
filesinctemplates y template-partsfontsimgjsscss PWA Generator es un generador de sitios estáticos que crea sitios web estáticos según la configuración del proyecto especificada en projects.json . Puede generar todo lo necesario para que un sitio web funcione como una aplicación web progresiva, por ejemplo, funciona sin conexión y es instalable. También puede implementarlo en Netlify.
Enumere todos los proyectos configurados para construir en projects.json
./pwagenerator.php projects
Cree, implemente y/o genere íconos para un proyecto usando la configuración del proyecto en projects.json
./pwagenerator.php [project] [option]
options:
-v verbose
-b build
-i generate icons
-d deploy
Por ejemplo:
./pwagenerator exampleproject.com -b
Para crear un nuevo proyecto, agréguelo a projects.json y luego compílelo.
-v ): proporciona una salida más detallada para la otra opción seleccionada ( -b , -i o -d ),-b ): construye el proyecto. Durante este proceso, PWA Generator genera todos los archivos necesarios para que el proyecto funcione. Consulte Proceso de compilación para obtener más información.-i ): Genera iconos para el proyecto. Durante este proceso, PWA Generator configura una matriz de configuración y genera un conjunto de favicons a partir del archivo img/favicon.svg en el directorio del proyecto usando real-favicon.-d ): Implementa el proyecto. Durante este proceso, PWA Generator incrementa la versión del proyecto e implementa el directorio del proyecto en Netlify usando netlify_id configurado en projects.json y netlify-cli. files El directorio files contiene archivos que se copian en el proyecto cuando se crea.
Las fuentes en el directorio fonts solo se copiarán si están enumeradas en el objeto fonts en projects.json , por ejemplo:
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
}
Los archivos en el directorio opt solo se copiarán si figuran en el objeto opt_files en projects.json , por ejemplo:
"opt_files": [
"opt/google_auth.js"
]
inc El directorio inc contiene archivos que se utilizan para ejecutar tareas del proyecto.
class-build.php contiene funcionalidad para crear, implementar y generar favicons.class-cli.php contiene funcionalidad para operaciones de línea de comando.class-projects.php contiene funcionalidad para obtener proyectos de projects.json .class-text.php contiene funcionalidad para formatear texto.templates y template-parts Los directorios templates y template-parts contienen archivos que se utilizan para crear páginas.
Cuando se crea un proyecto por primera vez, se crean varios archivos y directorios en el directorio del proyecto.
index.php : no se sobrescribirá en futuras compilaciones y debe contener cualquier marcado y funcionalidad que sean específicos del proyecto.js/main.ts : no se sobrescribirá en futuras compilaciones y debe contener cualquier funcionalidad específica del proyecto.scss/style.scss : no se sobrescribirá en futuras compilaciones y debe contener estilos específicos del proyecto._redirects : archivo de redirecciones de Netlify. Puede contener reglas de redireccionamiento y reescritura..gitignore : Git ignora el archivo. Contiene una lista de archivos y carpetas que Git no debe rastrear.manifest.json : archivo de manifiesto de la aplicación web. Contiene datos que informan al navegador sobre la aplicación web progresiva y cómo debe comportarse cuando se instala.package.json : archivo de datos del proyecto npm . Contiene datos del proyecto para el administrador de paquetes npm .package-lock.json : archivo de versión de dependencia npm . Contiene versiones de dependencia para paquetes instalados por el administrador de paquetes npm . npm lo genera automáticamente cuando se instala un paquete.robots.txt : archivo de robots. Contiene una lista de reglas para ayudar a los motores de búsqueda a determinar qué páginas deben y no deben rastrear.sitemap.xml : archivo de mapa del sitio. Contiene una lista de páginas para ayudar a los motores de búsqueda a descubrir contenido y, por lo tanto, mejora la optimización de los motores de búsqueda (SEO).sw.js : archivo de trabajador de servicio. Contiene una funcionalidad que almacena en caché los activos y permite la navegación sin conexión y una experiencia descargable "similar a una aplicación".tsconfig.json : archivo de configuración de compilación de Webpack TypeScript.webpack.config.js : archivo de configuración del paquete web para generar el bundle.[hash].js a partir de los archivos js/*.ts y scss/*.scss .fonts El directorio fonts contiene archivos de fuentes que se copian desde files/fonts durante el proceso de compilación. Cualquier cambio realizado en este directorio se sobrescribirá en futuras compilaciones.
img El directorio img contiene imágenes y archivos que se generan mediante el comando -i . Se debe colocar un favicon.svg en este directorio antes de ejecutar ese comando.
Este directorio también debe contener:
cache_files en projects.json . Si se incluye en cache_files y en el objeto nav.image en projects.json , la imagen se usará en la barra de navegación del encabezado superior. Si se incluye en cache_files y en el objeto header.image en projects.json , la imagen se usará en el encabezado principal.share.jpg utilizada para compartir en redes sociales.posts.json , que debe denominarse URL de la publicación con una extensión de archivo .jpg .screenshots en projects.json .js El directorio js contiene archivos .ts que se copian desde files/js durante el proceso de compilación, y un archivo bundle.[hash].js que se genera a partir de estos archivos .ts y archivos en el directorio scss .
Este directorio también contiene un archivo main.ts , que se generará como un archivo en blanco en la compilación inicial. No se sobrescribirá con futuras compilaciones y debe contener cualquier funcionalidad específica del proyecto.
Este directorio también puede contener opcionalmente main.js , si se necesita un archivo sin compilar. Si es necesario, este archivo también debe incluirse en el objeto cache_files en projects.json .
scss El directorio scss contiene archivos .scss que se copian desde files/scss durante el proceso de compilación.
Este directorio también contiene un archivo style.scss , que se generará en la compilación inicial como un archivo que contiene solo una declaración :root {} que contiene las fuentes y colores de los objetos fonts y colors en projects.json . No se sobrescribirá con compilaciones futuras y debe contener estilos específicos del proyecto.
projects.json dependiendo del project pasado a través de la línea de comando.$this->project_data['files']['compile'] se utiliza para compilar archivos en el directorio del proyecto.$this->project_data['files']['compile']$this->project_data['files']['copy'] se utiliza para copiar archivos en el directorio del proyecto.files/scss y files/js se agregan a $this->project_data['files']['copy'] .files/opt solo se agregan a $this->project_data['files']['copy'] si también figuran en el objeto opt_files en projects.json , por ejemplo: "opt_files": [
"opt/google_auth.js"
]
$this->project_data['files']['copy'] .$this->project_data['files']['cache'] se utiliza para agregar archivos al archivo sw.js para que el trabajador del servicio los almacene en caché.data.json (usado para generar páginas adicionales para crear una experiencia de búsqueda similar a una aplicación) y posts.json (usado para generar publicaciones de blog), se agregan a $this->project_data['files']['cache'] .cache_files en projects.json se agregan a $this->project_data['files']['cache'] , por ejemplo: "cache_files": [
"img/logo_header.svg",
"img/logo_nav.svg",
"img/shortcut.png"
]
files/opt solo se agregan a $this->project_data['files']['cache'] si también figuran en el objeto opt_files en projects.json , por ejemplo: "opt_files": [
"opt/google_auth.js"
]
$this->project_data['files']['cache']post (por ejemplo, extraída de posts.json ), también se agrega una imagen a $this->project_data['files']['cache'] , usando la URL de la página y la extensión de archivo .jpg .$this->project_data['files']['cache']$this->project_data['sitemap']['urls'] para generar el archivo sitemap.xml más adelante.package.jsonindex.phpscss y scss/style.scss con una declaración :root {} que contiene las fuentes y colores de los objetos fonts y colors en projects.json , por ejemplo "fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
},
"colors": {
"main": {
"normal": "92D7DA",
"dark": "489094"
},
"accent": {
"normal": "FA96C0",
"dark": "B34F78"
}
}
js y js/main.tsopt.gitignore con node_modulessw.js$this->project_data['files']['copy'] en el directorio del proyecto.bundle.[hash].js a partir de los archivos js/*.ts y scss/*.scss proporcionados mediante Webpack a través de webpack-cli, luego usa el comando php con project , page y project_data pasados como argumentos para compila cada archivo en $this->project_data['files']['compile'] en un archivo .html minificado.manifest.json . El archivo manifest.json se copia en el directorio del proyecto y luego se modifica según los valores en projects.json ( categories , screenshots , shortcuts , android_app_id y apple_app_id ).$this->project_data['files']['compile'] y $this->project_data['files']['copy'] :***FILES*** : Archivos de $this->project_data['files']['cache']***URLS*** : URL de $this->project_data['redirects'] y $this->project_data['sitemap']['urls']***REDIRECT_URLS*** : URL de $this->project_data['files']['compile'] y $this->project_data['redirects']***URL*** : La URL del proyecto de $this->project_data['url']***TITLE*** : El título del proyecto de $this->project_data['title']***DESCRIPTION*** : La descripción del proyecto de $this->project_data['description']***VERSION*** : La versión del proyecto de $this->project_data['version'] (extraída de sw.js )***DATE*** : fecha('Am-d') Estas son las fuentes disponibles para usar en el objeto fonts en projects.json , por ejemplo:
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
}
Los siguientes proyectos de código abierto se han creado utilizando PWA Generator. Consulte el sitio web, el repositorio de GitHub y la configuración del proyecto para projects.json a continuación.
{
"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": []
}
¡Las contribuciones son bienvenidas! Si descubre un problema o tiene una idea para mejorarlo, no dude en crear un problema.
