Simple and clear step-by-step guide to implement a PWA (Progressive...

Simple and clear step-by-step guide to implement a PWA (Progressive Web App) in a Laravel project without using any package like cretueusebiu/laravel-pwa

2025-07-31 09:17:55 • Laravel

Here's a simple and clear step-by-step guide to implement a PWA (Progressive Web App) in a Laravel project without using any package like cretueusebiu/laravel-pwa:

1. Create the Manifest File

In the public directory of Laravel, create a file named:

manifest.json

{
  "name": "My Laravel PWA",
  "short_name": "LaravelPWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0d6efd",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

📁 Create the icons in public/icons/ folder.

2. Add Service Worker

Create a file in the public folder:

service-worker.js

self.addEventListener("install", event => {
  console.log("Service Worker installed");
  self.skipWaiting();
});

self.addEventListener("activate", event => {
  console.log("Service Worker activated");
});

self.addEventListener("fetch", event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

3. Link Manifest and Register Service Worker

In your main Blade layout (e.g., resources/views/layouts/app.blade.php), add this in <head>:

<!-- Manifest -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0d6efd">

And before the closing </body> tag, add:

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
      .then(reg => console.log("Service Worker registered"))
      .catch(err => console.error("Service Worker registration failed:", err));
  }
</script>

4. Make It HTTPS (For Real Use)

Service workers only work on HTTPS or localhost
If you’re using Laravel Valet, it already uses HTTPS
For production, make sure your Laravel site is served over HTTPS

5. Optional: Add Apple Support

For iOS compatibility, add this in <head>:

<link rel="apple-touch-icon" href="/icons/icon-192x192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

6. Test the PWA

Open in Chrome
Inspect → Application → Manifest and Service Worker
You should see it detected as a PWA
Add to Home Screen on mobile

Please log in to like, share and comment!