DEV Community

Cover image for Creare una PWA con Laravel e Bootstrap | Building a PWA with Laravel and Bootstrap
Roberto Celano
Roberto Celano

Posted on

Creare una PWA con Laravel e Bootstrap | Building a PWA with Laravel and Bootstrap

#laravel #webdev #javascript #pwa

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"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Ricorda di linkarlo nel tuo layout principale (resources/views/layouts/app.blade.php):

<link rel="manifest" href="{{ asset('manifest.json') }}">
Enter fullscreen mode Exit fullscreen mode

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));
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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";
});
Enter fullscreen mode Exit fullscreen mode

Quando l’utente clicca il bottone:

installButton.addEventListener("click", async () => {
  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  console.log("Scelta utente:", outcome);
});
Enter fullscreen mode Exit fullscreen mode

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"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Then link it in your main Blade layout (resources/views/layouts/app.blade.php):

<link rel="manifest" href="{{ asset('manifest.json') }}">
Enter fullscreen mode Exit fullscreen mode

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));
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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";
});
Enter fullscreen mode Exit fullscreen mode

When the user clicks the button:

installButton.addEventListener("click", async () => {
  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  console.log("User choice:", outcome);
});
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)