pwagenerator
v2.0.4
filesinc Verzeichnistemplates und template-partsfontsimg Verzeichnisjs Verzeichnisscss Verzeichnis PWA Generator ist ein statischer Site-Generator, der statische Websites basierend auf der in projects.json angegebenen Projektkonfiguration erstellt. Es kann alles generieren, was eine Website benötigt, um als progressive Web-App zu funktionieren, z. B. sie funktioniert offline und ist installierbar. Es kann auch auf Netlify bereitgestellt werden.
Listen Sie alle für die Erstellung konfigurierten Projekte in projects.json auf
./pwagenerator.php projects
Mithilfe der Projektkonfiguration in „ projects.json können Sie Symbole für ein Projekt erstellen, bereitstellen und/oder generieren
./pwagenerator.php [project] [option]
options:
-v verbose
-b build
-i generate icons
-d deploy
Zum Beispiel:
./pwagenerator exampleproject.com -b
Um ein neues Projekt zu erstellen, fügen Sie es zu projects.json hinzu und erstellen Sie es dann.
-v ): Bietet eine ausführlichere Ausgabe für die andere ausgewählte Option ( -b , -i oder -d ).-b ): Erstellt das Projekt. Während dieses Vorgangs generiert der PWA-Generator alle Dateien, die für die Funktion des Projekts erforderlich sind. Weitere Informationen finden Sie unter Build-Prozess.-i ): Erzeugt Symbole für das Projekt. Während dieses Vorgangs richtet der PWA-Generator ein Konfigurationsarray ein und generiert mithilfe von real-favicon eine Reihe von Favicons aus der Datei img/favicon.svg im Projektverzeichnis.-d ): Stellt das Projekt bereit. Während dieses Vorgangs erhöht der PWA-Generator die Projektversion und stellt das Projektverzeichnis für Netlify bereit, indem er die in projects.json und „netlify-cli“ festgelegte netlify_id verwendet. files Das files enthält Dateien, die beim Erstellen des Projekts kopiert werden.
Schriftarten im fonts werden nur kopiert, wenn sie im fonts in projects.json aufgeführt sind, z. B.:
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
}
Dateien im opt -Verzeichnis werden nur kopiert, wenn sie im opt_files Objekt in projects.json aufgeführt sind, z. B.:
"opt_files": [
"opt/google_auth.js"
]
inc Verzeichnis Das Verzeichnis inc enthält Dateien, die zum Ausführen von Projektaufgaben verwendet werden.
class-build.php enthält Funktionen zum Erstellen, Bereitstellen und Generieren von Favicons.class-cli.php enthält Funktionalität für Befehlszeilenoperationen.class-projects.php enthält Funktionen zum Abrufen von Projekten aus projects.json .class-text.php enthält Funktionen zum Formatieren von Text.templates und template-parts Die templates und template-parts enthalten Dateien, die zum Erstellen von Seiten verwendet werden.
Wenn ein Projekt zum ersten Mal erstellt wird, werden im Projektverzeichnis mehrere Dateien und Verzeichnisse erstellt.
index.php : Wird von zukünftigen Builds nicht überschrieben und sollte alle Markups und Funktionen enthalten, die für das Projekt spezifisch sind.js/main.ts : Wird von zukünftigen Builds nicht überschrieben und sollte alle projektspezifischen Funktionen enthalten.scss/style.scss : Wird von zukünftigen Builds nicht überschrieben und sollte alle für das Projekt spezifischen Stile enthalten._redirects : Netlify-Weiterleitungsdatei. Kann Umleitungs- und Umschreiberegeln enthalten..gitignore : Git-Ignorierdatei. Enthält eine Liste von Dateien und Ordnern, die Git nicht verfolgen sollte.manifest.json : Web-App-Manifestdatei. Enthält Daten, die den Browser über die Progressive-Web-App und deren Verhalten bei der Installation informieren.package.json : npm Projektdatendatei. Enthält Projektdaten für den npm Paketmanager.package-lock.json : npm Abhängigkeitsversionsdatei. Enthält Abhängigkeitsversionen für Pakete, die vom npm Paketmanager installiert wurden. Es wird automatisch von npm generiert, wenn ein Paket installiert wird.robots.txt : Robots-Datei. Enthält eine Liste von Regeln, die Suchmaschinen dabei helfen, zu bestimmen, welche Seiten gecrawlt werden sollen und welche nicht.sitemap.xml : Sitemap-Datei. Enthält eine Liste von Seiten, die Suchmaschinen bei der Inhaltserkennung unterstützen und dadurch die Suchmaschinenoptimierung (SEO) verbessern.sw.js : Service-Worker-Datei. Enthält Funktionen, die Assets zwischenspeichern und Offline-Browsing und ein herunterladbares „App-ähnliches“ Erlebnis ermöglichen.tsconfig.json : Webpack TypeScript-Kompilierungskonfigurationsdatei.webpack.config.js : Webpack-Konfigurationsdatei zum Generieren des bundle.[hash].js aus den Dateien js/*.ts und scss/*.scss .fonts Das fonts enthält Schriftartendateien, die während des Erstellungsprozesses aus files/fonts kopiert werden. Alle in diesem Verzeichnis vorgenommenen Änderungen werden von zukünftigen Builds überschrieben.
img Verzeichnis Das img -Verzeichnis enthält Bilder und Dateien, die über den Befehl -i generiert werden. Eine favicon.svg sollte in diesem Verzeichnis abgelegt werden, bevor dieser Befehl ausgeführt wird.
Dieses Verzeichnis sollte außerdem Folgendes enthalten:
cache_files in projects.json enthalten sind. Wenn das Bild in cache_files und im nav.image Objekt in projects.json enthalten ist, wird es in der oberen Navigationsleiste der Kopfzeile verwendet. Wenn das Bild in cache_files und im header.image Objekt in projects.json enthalten ist, wird es im Hauptheader verwendet.share.jpg Bild, das zum Teilen in sozialen Medien verwendet wird.posts.json enthaltenen Beiträge, das die URL des Beitrags mit der Dateierweiterung .jpg heißen sollte.screenshots Objekt enthaltenen Bilder in projects.json .js Verzeichnis Das js -Verzeichnis enthält .ts -Dateien, die während des Erstellungsprozesses von files/js kopiert werden, sowie eine bundle.[hash].js Datei, die aus diesen .ts Dateien und Dateien im scss -Verzeichnis generiert wird.
Dieses Verzeichnis enthält auch eine main.ts Datei, die beim ersten Build als leere Datei generiert wird. Es wird nicht durch zukünftige Builds überschrieben und sollte alle projektspezifischen Funktionen enthalten.
Dieses Verzeichnis kann optional auch eine main.js enthalten, wenn eine unkompilierte Datei benötigt wird. Bei Bedarf sollte diese Datei auch im Objekt cache_files in projects.json enthalten sein.
scss Verzeichnis Das scss -Verzeichnis enthält .scss -Dateien, die während des Erstellungsprozesses aus files/scss kopiert werden.
Dieses Verzeichnis enthält auch eine Datei style.scss , die beim ersten Build als Datei generiert wird, die nur eine :root {} -Deklaration enthält, die die Schriftarten und Farben aus den fonts und colors in projects.json enthält. Es wird nicht durch zukünftige Builds überschrieben und sollte alle für das Projekt spezifischen Stile enthalten.
projects.json ab, abhängig vom über die Befehlszeile übergebenen project .$this->project_data['files']['compile'] wird zum Kompilieren von Dateien im Projektverzeichnis verwendet.$this->project_data['files']['compile'] hinzugefügt.$this->project_data['files']['copy'] wird zum Kopieren von Dateien in das Projektverzeichnis verwendet.files/scss und files/js werden zu $this->project_data['files']['copy'] hinzugefügt.files/opt werden nur dann zu $this->project_data['files']['copy'] hinzugefügt, wenn sie auch im opt_files Objekt in projects.json aufgeführt sind, z. B.: "opt_files": [
"opt/google_auth.js"
]
$this->project_data['files']['copy'] hinzugefügt.$this->project_data['files']['cache'] wird verwendet, um Dateien zur sw.js Datei hinzuzufügen, die vom Servicemitarbeiter zwischengespeichert werden sollen.data.json (werden zum Generieren zusätzlicher Seiten verwendet, um ein App-ähnliches Sucherlebnis zu schaffen) und posts.json (werden zum Generieren von Blogbeiträgen verwendet) werden zu $this->project_data['files']['cache'] hinzugefügt. $this->project_data['files']['cache'] .cache_files in projects.json aufgeführt sind, werden zu $this->project_data['files']['cache'] hinzugefügt, z. B.: "cache_files": [
"img/logo_header.svg",
"img/logo_nav.svg",
"img/shortcut.png"
]
files/opt werden nur dann zu $this->project_data['files']['cache'] hinzugefügt, wenn sie auch im opt_files Objekt in projects.json aufgeführt sind, z. B.: "opt_files": [
"opt/google_auth.js"
]
$this->project_data['files']['cache'] hinzugefügt.post handelt (z. B. aus posts.json extrahiert), wird auch ein Bild zu $this->project_data['files']['cache'] hinzugefügt, wobei die Seiten-URL und die Dateierweiterung .jpg verwendet werden.$this->project_data['files']['cache'] hinzugefügt.$this->project_data['sitemap']['urls'] hinzu, um später die Datei sitemap.xml zu generieren.package.json Dateiindex.php Dateiscss -Verzeichnis und scss/style.scss mit einer :root {} -Deklaration, die die Schriftarten und Farben aus den fonts und colors in projects.json enthält, z. B "fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
},
"colors": {
"main": {
"normal": "92D7DA",
"dark": "489094"
},
"accent": {
"normal": "FA96C0",
"dark": "B34F78"
}
}
js Verzeichnis und js/main.tsopt Verzeichnis.gitignore Datei mit node_modulessw.js -Service-Worker-Datei$this->project_data['files']['copy'] aufgelisteten Dateien in das Projektverzeichnis.bundle.[hash].js Datei aus den js/*.ts und scss/*.scss Dateien, die mit Webpack über webpack-cli bereitgestellt werden, und verwendet dann den php -Befehl mit den übergebenen project , page und project_data als Argumente an Kompilieren Sie jede Datei in $this->project_data['files']['compile'] in eine minimierte .html Datei.manifest.json . Die Datei manifest.json wird in das Projektverzeichnis kopiert und dann entsprechend den Werten in projects.json ( categories , screenshots , shortcuts , android_app_id und apple_app_id ) geändert.$this->project_data['files']['compile'] und $this->project_data['files']['copy'] :***FILES*** : Dateien von $this->project_data['files']['cache']***URLS*** : URLs von $this->project_data['redirects'] und $this->project_data['sitemap']['urls']***REDIRECT_URLS*** : URLs von $this->project_data['files']['compile'] und $this->project_data['redirects']***URL*** : Die Projekt-URL von $this->project_data['url']***TITLE*** : Der Projekttitel aus $this->project_data['title']***DESCRIPTION*** : Die Projektbeschreibung aus $this->project_data['description']***VERSION*** : Die Projektversion von $this->project_data['version'] (extrahiert aus sw.js )***DATE*** : Datum('Ym-d') Dies sind die Schriftarten, die im fonts in projects.json verwendet werden können, z. B.:
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
}
Die folgenden Open-Source-Projekte wurden mit PWA Generator erstellt. Sehen Sie sich unten die Website, das GitHub-Repo und die Projektkonfiguration für projects.json an.
{
"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": []
}
Beiträge sind willkommen! Wenn Sie ein Problem entdecken oder eine Idee für eine Verbesserung haben, können Sie gerne ein Problem erstellen.
