← home
// Open Source · MIT License
PWA Firebase Vanilla Boilerplate
Un template pronto al deploy per costruire una Progressive Web App con Firebase,
Netlify e JavaScript puro — zero framework, zero bundler, zero magie.
Basato sull'architettura reale di PanelControl,
costruita e usata in produzione dal 2024.
A deploy-ready template for building a Progressive Web App with Firebase,
Netlify and plain JavaScript — zero framework, zero bundler, zero magic.
Based on the real architecture of PanelControl,
built and used in production since 2024.
Vanilla JS
Firebase RTDB
Firestore
Netlify Functions
Service Worker
PWA
i18n IT/EN
Zero dipendenze
Cosa include
What's included
⚙️
Service Worker completoComplete Service Worker
Cache strategy, offline fallback, aggiornamenti gestiti. Funziona senza Workbox.Cache strategy, offline fallback, update management. Works without Workbox.
📋
manifest.json configuratoConfigured manifest.json
Icone, shortcut, Apple meta tag, theme color. Installabile su Android e iOS.Icons, shortcuts, Apple meta tags, theme color. Installable on Android and iOS.
🔥
Firebase RTDB + FirestoreFirebase RTDB + Firestore
Init modulare SDK v9, helper per lettura una tantum e ascolto real-time, gestione errori.Modular SDK v9 init, helpers for one-time reads and real-time listeners, error handling.
🚀
Netlify Functions pronteNetlify Functions ready
Cartella netlify/functions/ con esempio proxy per evitare CORS su API esterne.netlify/functions/ folder with a proxy example to avoid CORS on external APIs.
🌍
i18n bilingue IT/ENIT/EN bilingual i18n
Sistema lang.js con toggle flag. Attributi data-i18n su ogni elemento traducibile.lang.js system with flag toggle. data-i18n attributes on every translatable element.
🎨
Design system minimalistaMinimalist design system
CSS Variables, dark theme, card 3D, animazioni reveal on scroll. Nessun Tailwind, nessun Bootstrap.CSS Variables, dark theme, 3D cards, reveal-on-scroll animations. No Tailwind, no Bootstrap.
🔒
Autenticazione baseBasic authentication
Login con password hash PBKDF2 via Web Crypto API. Nessun Firebase Auth richiesto per casi semplici.Password login hashed with PBKDF2 via Web Crypto API. No Firebase Auth needed for simple cases.
📊
sitemap.xml + robots.txtsitemap.xml + robots.txt
SEO foundation pronta. Schema.org, Open Graph, Twitter Card nei template di pagina.SEO foundation ready. Schema.org, Open Graph, Twitter Card in page templates.
Struttura del progetto
Project structure
pwa-firebase-vanilla-boilerplate/
netlify/
functions/
proxy.js
index.html
style.css
main.js
lang.js
sw.js
manifest.json
firebase-init.js
firebase-helpers.js
netlify.toml
sitemap.xml
robots.txt
404.html
README.md
Perché vanilla JS e non un framework?
I framework risolvono problemi di scala: componenti riusabili, state management complesso, team numerosi. Per una PWA personale o un tool interno con poche pagine, aggiungono complessità senza valore reale — build time, bundle size, dipendenze che si rompono ad ogni aggiornamento.
Questo boilerplate usa le API native del browser che esistono già: fetch(), crypto.subtle, IntersectionObserver, serviceWorker. Tutto funziona senza npm install, senza build step, senza configurazioni. Cloni, sostituisci le credenziali Firebase, fai deploy su Netlify.
Il codice che vedi qui è la stessa architettura che gira in produzione su PanelControl da oltre un anno, con un team di 15 persone che lo usa ogni giorno.
Why vanilla JS and not a framework?
Frameworks solve scale problems: reusable components, complex state management, large teams. For a personal PWA or an internal tool with a few pages, they add complexity with no real value — build time, bundle size, dependencies that break with every update.
This boilerplate uses native browser APIs that already exist: fetch(), crypto.subtle, IntersectionObserver, serviceWorker. Everything works without npm install, without a build step, without configuration. Clone, replace Firebase credentials, deploy to Netlify.
The code here is the same architecture running in production on PanelControl for over a year, with a team of 15 people using it every day.
Quick start
- Clona il repo:
git clone https://github.com/andrearoversi/pwa-firebase-vanilla-boilerplate
- Crea un progetto Firebase e copia le credenziali in
firebase-init.js
- Collega il repo a Netlify (drop & deploy oppure
netlify deploy)
- Personalizza colori, font e contenuto in
style.css e index.html
- Aggiungi le chiavi i18n in
lang.js per ogni testo bilingue