Introduzione | Introduction
Italiano: Questo articolo è disponibile sia in italiano che in inglese. Scrolla verso il basso per la versione in inglese.
English: This article is available in both Italian and English. Scroll down for the English version.
🇮🇹 Come ho trasformato un sito Laravel in una PWA moderna
Negli ultimi anni le Progressive Web App (PWA) sono diventate uno standard per offrire un’esperienza simile a quella delle app native, direttamente dal browser. Nel mio caso, volevo che il mio portfolio personale – sviluppato in Laravel + Bootstrap – potesse essere installato su dispositivi mobile e desktop, mantenendo la leggerezza di un sito classico.
1. Creare il Manifest
Il primo passo è aggiungere il file manifest.json nella directory public/.
Contiene le informazioni che definiscono il comportamento della tua app una volta installata.
{
"name": "Roberto Celano | Web Developer",
"short_name": "RC Dev",
"start_url": "/",
"display": "standalone",
"background_color": "#0d1117",
"theme_color": "#00bcd4",
"icons": [
{
"src": "/assets/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Ricorda di linkarlo nel tuo layout principale (resources/views/layouts/app.blade.php):
<link rel="manifest" href="{{ asset('manifest.json') }}">
2. Registrare il Service Worker
Nel file public/service-worker.js:
self.addEventListener("install", () => {
console.log("Service Worker installato");
});
self.addEventListener("fetch", (event) => {
event.respondWith(fetch(event.request));
});
E nella tua view Blade, aggiungi:
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/service-worker.js")
.then(() => console.log("Service Worker registrato"))
.catch(err => console.error("Errore:", err));
}
</script>
3. Aggiungere il prompt d’installazione
Con questo snippet puoi mostrare il messaggio “Installa App”:
let deferredPrompt;
window.addEventListener("beforeinstallprompt", (e) => {
e.preventDefault();
deferredPrompt = e;
document.getElementById("installButton").style.display = "block";
});
Quando l’utente clicca il bottone:
installButton.addEventListener("click", async () => {
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log("Scelta utente:", outcome);
});
4. Test con Lighthouse
Apri Chrome → DevTools → Lighthouse → Progressive Web App.
Ti mostrerà se la tua PWA è installabile e conforme agli standard.
5. Risultato finale
Ora il mio sito robertocelano.dev può essere installato come app su smartphone, tablet e desktop.
L’esperienza è fluida, il caricamento è rapido e l’interfaccia mantiene il design Bootstrap originale.
🇬🇧 How I turned a Laravel site into a modern PWA
In recent years, Progressive Web Apps (PWA) have become the standard for bringing native-like experiences to the browser. In my case, I wanted my personal portfolio — built with Laravel + Bootstrap — to be installable on mobile and desktop, while keeping the simplicity of a classic website.
1. Create the Manifest
Add a manifest.json file in your public/ directory:
{
"name": "Roberto Celano | Web Developer",
"short_name": "RC Dev",
"start_url": "/",
"display": "standalone",
"background_color": "#0d1117",
"theme_color": "#00bcd4",
"icons": [
{
"src": "/assets/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Then link it in your main Blade layout (resources/views/layouts/app.blade.php):
<link rel="manifest" href="{{ asset('manifest.json') }}">
2. Register the Service Worker
In public/service-worker.js:
self.addEventListener("install", () => {
console.log("Service Worker installed");
});
self.addEventListener("fetch", (event) => {
event.respondWith(fetch(event.request));
});
And in your Blade view:
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/service-worker.js")
.then(() => console.log("Service Worker registered"))
.catch(err => console.error("Error:", err));
}
</script>
3. Add the installation prompt
With this snippet you can show the “Install App” message:
let deferredPrompt;
window.addEventListener("beforeinstallprompt", (e) => {
e.preventDefault();
deferredPrompt = e;
document.getElementById("installButton").style.display = "block";
});
When the user clicks the button:
installButton.addEventListener("click", async () => {
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log("User choice:", outcome);
});
4. Test with Lighthouse
Open Chrome → DevTools → Lighthouse → Progressive Web App.
It will show whether your PWA meets installability standards.
5. Final result
Now robertocelano.dev can be installed like an app on smartphones, tablets, and desktops — fast, responsive, and consistent with its Bootstrap design.
Traduzione
Questo articolo è stato tradotto con l'ausilio di strumenti di traduzione professionali.
This article was translated with the help of professional translation tools.