static pwa boilerplate

Grundlegende HTML -Vorlage für moderne statische progressive Web -Apps

Bereit, eine statische progressive Web -App mit einem Manifest und einem Serviceworker zu erstellen, der problemlos mit Github -Seiten eingesetzt werden kann.

Beinhaltet:

• Miniaturbilder
• Skelett CSS + Normalisieren
• Web -App Manifest
• Basic Service Worker + Registrierungsbegleiter
• Erst -Web -Push -Benachrichtigungsunterstützung (Sie benötigen einen externen Server)

Demo: https://gallaoro.github.io/static_pwa_boilerplate/ oder besuchen Sie den GH-Pages-Zweig dieses Repositorys

Installation

• Installieren Sie Git sudo apt-get install git
• Klon The Repo: git clone https://github.com/lellefood/static_pwa_boilerplate.git
• Verzeichnis umbenennen: mv static_pwa_boilerplate <new_project_name>
• Verzeichnis ändern: cd <new_project_name>
• Ändern Sie das manifest.json mit Ihren Informationen
• Schreiben Sie Ihre Website

Entwicklung

Projektordnerstruktur

 root
├── css
│   └── skeleton.css
│   └── normalize.css
│   └── index.css
│
├── js
│   └── index.js
│
├── img
│   └── thumb
│       └── 64.png
│       └── 144.png
│       └── 192.png
│       └── 512.png
│       └── 1366x768.png
│
├── index.html
├── manifest.json
├── README.md
└── serviceworker.js

FAQ

• Wie kann ich eine neue Seite hinzufügen? Fügen Sie eine neue Datei <new_page_name>.html im root des Projekts hinzu.
  Link dazu mit /<new_page_name>.html

• Wie kann ich Web -Push -Benachrichtigungen hinzufügen? Der erste Code, um eine PushSubscription zu erhalten, ist bereits im Skript index.js angegeben. Folgen Sie diesem Tutorial, um zu wissen, wie Web -Push -Arbeiten funktioniert.

Einsetzen

Befolgen Sie die einfachen Anweisungen auf der Website von Github Pages, um zu wissen, wie Sie Ihre PWA kostenlos bereitstellen