pwagenerator
v2.0.4
filesinctemplates e template-partsfontsimgjsscss PWA Generator é um gerador de sites estáticos que cria sites estáticos com base na configuração do projeto especificada em projects.json . Ele pode gerar tudo o que é necessário para que um site funcione como um aplicativo da web progressivo, por exemplo, funciona offline e é instalável. Ele também pode implantá-lo no Netlify.
Liste todos os projetos configurados para construção em projects.json
./pwagenerator.php projects
Crie, implante e/ou gere ícones para um projeto usando a configuração do projeto em projects.json
./pwagenerator.php [project] [option]
options:
-v verbose
-b build
-i generate icons
-d deploy
Por exemplo:
./pwagenerator exampleproject.com -b
Para criar um novo projeto, adicione-o a projects.json e construa-o.
-v ): Fornece uma saída mais detalhada para a outra opção selecionada ( -b , -i ou -d ),-b ): Constrói o projeto. Durante esse processo, o PWA Generator gera todos os arquivos necessários para o funcionamento do projeto. Consulte Processo de construção para obter mais informações.-i ): Gera ícones para o projeto. Durante esse processo, o PWA Generator configura uma matriz de configuração e gera um conjunto de favicons do arquivo img/favicon.svg no diretório do projeto usando real-favicon.-d ): implanta o projeto. Durante esse processo, o PWA Generator incrementa a versão do projeto e implanta o diretório do projeto no Netlify usando o netlify_id definido em projects.json e netlify-cli. files O diretório files contém arquivos que são copiados para o projeto quando ele é compilado.
As fontes no diretório fonts só serão copiadas se estiverem listadas no objeto fonts em projects.json , por exemplo:
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
}
Os arquivos no diretório opt só serão copiados se estiverem listados no objeto opt_files em projects.json , por exemplo:
"opt_files": [
"opt/google_auth.js"
]
inc O diretório inc contém arquivos que são usados para executar tarefas do projeto.
class-build.php contém funcionalidade para construir, implantar e gerar favicons.class-cli.php contém funcionalidade para operações de linha de comando.class-projects.php contém funcionalidade para obter projetos de projects.json .class-text.php contém funcionalidade para formatação de texto.templates e template-parts Os diretórios templates e template-parts contêm arquivos que são usados para construir páginas.
Quando um projeto é compilado pela primeira vez, vários arquivos e diretórios são criados no diretório do projeto.
index.php : não será substituído por compilações futuras e deve conter qualquer marcação e funcionalidade específica do projeto.js/main.ts : não será substituído por compilações futuras e deve conter qualquer funcionalidade específica do projeto.scss/style.scss : não será substituído por compilações futuras e deve conter estilos específicos do projeto._redirects : arquivo de redirecionamento Netlify. Pode conter regras de redirecionamento e reescrita..gitignore : Git ignora arquivo. Contém uma lista de arquivos e pastas que o Git não deve rastrear.manifest.json : arquivo de manifesto do aplicativo da Web. Contém dados que informam ao navegador sobre o aplicativo da web progressivo e como ele deve se comportar quando instalado.package.json : arquivo de dados do projeto npm . Contém dados do projeto para o gerenciador de pacotes npm .package-lock.json : arquivo de versão de dependência npm . Contém versões de dependência para pacotes instalados pelo gerenciador de pacotes npm . Ele é gerado automaticamente pelo npm quando um pacote é instalado.robots.txt : arquivo de robôs. Contém uma lista de regras para ajudar os mecanismos de pesquisa a determinar quais páginas devem ou não rastrear.sitemap.xml : arquivo de mapa do site. Contém uma lista de páginas para ajudar os mecanismos de pesquisa na descoberta de conteúdo e, assim, melhorar a otimização do mecanismo de pesquisa (SEO).sw.js : arquivo do trabalhador de serviço. Contém funcionalidade que armazena ativos em cache e permite navegação off-line e uma experiência "semelhante a um aplicativo" para download.tsconfig.json : arquivo de configuração de compilação TypeScript do Webpack.webpack.config.js : arquivo de configuração do Webpack para gerar o bundle.[hash].js a partir dos arquivos js/*.ts e scss/*.scss .fonts O diretório fonts contém arquivos de fontes que são copiados de files/fonts durante o processo de construção. Quaisquer alterações feitas neste diretório serão substituídas por compilações futuras.
img O diretório img contém imagens e arquivos gerados por meio do comando -i . Um favicon.svg deve ser colocado neste diretório antes de executar esse comando.
Este diretório também deve conter:
cache_files em projects.json . Se incluída em cache_files e no objeto nav.image em projects.json , a imagem seria usada na barra de navegação do cabeçalho superior. Se incluída em cache_files e no objeto header.image em projects.json , a imagem seria usada no cabeçalho principal.share.jpg usada para compartilhamento em mídias sociais.posts.json , que deve ser nomeada como URL da postagem com uma extensão de arquivo .jpg .screenshots em projects.json .js O diretório js contém arquivos .ts que são copiados de files/js durante o processo de construção e um arquivo bundle.[hash].js que é gerado a partir desses arquivos .ts e arquivos no diretório scss .
Este diretório também contém um arquivo main.ts , que será gerado como um arquivo em branco na construção inicial. Ele não será substituído por compilações futuras e deverá conter qualquer funcionalidade específica do projeto.
Este diretório também pode conter opcionalmente um main.js , se um arquivo não compilado for necessário. Se for necessário, esse arquivo também deverá ser incluído no objeto cache_files em projects.json .
scss O diretório scss contém arquivos .scss que são copiados de files/scss durante o processo de construção.
Este diretório também contém um arquivo style.scss , que será gerado na construção inicial como um arquivo contendo apenas uma declaração :root {} contendo as fontes e cores dos objetos fonts e colors em projects.json . Ele não será substituído por compilações futuras e deverá conter estilos específicos do projeto.
projects.json dependendo do project passado pela linha de comando.$this->project_data['files']['compile'] é usado para compilar arquivos no diretório do projeto.$this->project_data['files']['compile']$this->project_data['files']['copy'] é usado para copiar arquivos para o diretório do projeto.files/scss e files/js são adicionados a $this->project_data['files']['copy'] .files/opt só são adicionados a $this->project_data['files']['copy'] se também estiverem listados no objeto opt_files em projects.json , por exemplo: "opt_files": [
"opt/google_auth.js"
]
$this->project_data['files']['copy'] .$this->project_data['files']['cache'] é usado para adicionar arquivos ao arquivo sw.js para armazenamento em cache pelo service worker.data.json (usado para gerar páginas adicionais para criar uma experiência de pesquisa semelhante a um aplicativo) e posts.json (usado para gerar postagens de blog), são adicionados a $this->project_data['files']['cache'] .cache_files em projects.json são adicionados a $this->project_data['files']['cache'] , por exemplo: "cache_files": [
"img/logo_header.svg",
"img/logo_nav.svg",
"img/shortcut.png"
]
files/opt só são adicionados a $this->project_data['files']['cache'] se também estiverem listados no objeto opt_files em projects.json , por exemplo: "opt_files": [
"opt/google_auth.js"
]
$this->project_data['files']['cache']post (por exemplo, extraída de posts.json ), uma imagem também será adicionada a $this->project_data['files']['cache'] , usando a URL da página e a extensão do arquivo .jpg .$this->project_data['files']['cache']$this->project_data['sitemap']['urls'] para gerar o arquivo sitemap.xml posteriormente.package.jsonindex.phpscss e scss/style.scss com uma declaração :root {} contendo as fontes e cores dos objetos fonts e colors em projects.json , por exemplo "fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
},
"colors": {
"main": {
"normal": "92D7DA",
"dark": "489094"
},
"accent": {
"normal": "FA96C0",
"dark": "B34F78"
}
}
js e js/main.tsopt.gitignore com node_modulessw.js$this->project_data['files']['copy'] para o diretório do projeto.bundle.[hash].js a partir dos arquivos js/*.ts e scss/*.scss fornecidos usando Webpack via webpack-cli e, em seguida, usa o comando php com project , page e project_data passados como argumentos para compile cada arquivo em $this->project_data['files']['compile'] em um arquivo .html reduzido.manifest.json . O arquivo manifest.json é copiado para o diretório do projeto e modificado de acordo com os valores em projects.json ( categories , screenshots , shortcuts , android_app_id e apple_app_id ).$this->project_data['files']['compile'] e $this->project_data['files']['copy'] :***FILES*** : Arquivos de $this->project_data['files']['cache']***URLS*** : URLs de $this->project_data['redirects'] e $this->project_data['sitemap']['urls']***REDIRECT_URLS*** : URLs de $this->project_data['files']['compile'] e $this->project_data['redirects']***URL*** : A URL do projeto de $this->project_data['url']***TITLE*** : O título do projeto de $this->project_data['title']***DESCRIPTION*** : A descrição do projeto em $this->project_data['description']***VERSION*** : A versão do projeto de $this->project_data['version'] (extraído de sw.js )***DATE*** : data('Ama-d') Estas são as fontes disponíveis para uso no objeto fonts em projects.json , por exemplo:
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
}
Os seguintes projetos de código aberto foram criados usando o PWA Generator. Confira o site, o repositório GitHub e a configuração do projeto para projects.json abaixo.
{
"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": []
}
Contribuições são bem-vindas! Se você descobrir um problema ou tiver uma ideia para uma melhoria, sinta-se à vontade para criar um problema.
