Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Turning Laravel into a progressive web app - Laravel 8.X

Turning Laravel into a progressive web app - Laravel 8.x

Using Laravel 8.x and Mix. Simple guide to make your Laravel app to a progressive web app fast.

Prerequisites

This guide requires that you already have a working Laravel application and have some familiarity working in Laravel applications.

Installation guide

Before starting ensure that your Laravel app runs on https, otherwise this would not work. It is also good if you have created some maskable icons and generated a favicon. There are some help links further down to check out.

This guide assumes that you have prior knowledge on how to create and develop Laravel apps.

Now that we have mentioned that, lets get started.

  1. Create a file called serviceworker.js under the public folder and add the code below.
let staticCacheName = "pwa-v" + new Date().getTime();
let filesToCache = [
   '/css/app.css',
   '/js/app.js',
   // add your favicons and maskable icons 
   // and add any other resource you want to be cached 
];

// Cache on install  
self.addEventListener("install", event => {
   this.skipWaiting();
   event.waitUntil(
       caches.open(staticCacheName)
       .then(cache => {
           return cache.addAll(filesToCache);
       })
   )
});

// Clear cache on activate  
self.addEventListener('activate', event => {
   event.waitUntil(
       caches.keys().then(cacheNames => {
           return Promise.all(
               cacheNames
               .filter(cacheName => (cacheName.startsWith("pwa-")))
               .filter(cacheName => (cacheName !== staticCacheName))
               .map(cacheName => caches.delete(cacheName))
           );
       })
   );
});

// Serve from Cache  
self.addEventListener("fetch", event => {
   event.respondWith(
       caches.match(event.request)
       .then(response => {
           return response || fetch(event.request);
       })
       .catch(() => {
           return caches.match('offline');
       })
   )
});
  1. Create a file, in the same folder as before, called manifest.json and add the code below. I recommend that you customise the values to make it fit your project, like colours.
{
 "name": "your app name",
 "short_name": "yourappname",
 "icons": [
   {
     "src": "/img/favicon.png",
     "sizes": "192x192",
     "type": "image/png"
   } 
   // add your favicons and maskable icons, above is an example
 ],
 "theme_color": "#FFFFFF",
 "background_color": "#FFFFFF",
 "orientation": "portrait",
 "start_url": "/",
 "display": "standalone"
}
  1. Create a file called sw.js in your js folder found under resources and add the code below. Path is resources/js.
if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/serviceworker.js', {
       scope: '.'
   }).then(function(registration) {
       // Registration was successful  
       console.log('ServiceWorker registration successful with scope: ', registration.scope);
   }, function(err) {
       // registration failed :(  
       console.log('ServiceWorker registration failed: ', err);
   });  
}
  1. Add the sw.js file to your main JS file. Example below.
// some other code
require('./sw.js');
  1. Add a link tag that references your manifest.json in your HTML head.
<link rel="manifest" href="{{ url('manifest.json') }}">
  1. Compile the JS file with the command below. npm run dev
  2. Now you have set up all the necessary JavaScript and you are ready to add your meta tags to tie the bag together.
  3. Add your meta tags to you HTML head file. Recommended that you use a generator (see below for recommendations) to create these since it is easy to forget some.
  4. Now you are all done, yay! 🚀

That is all that is needed for a basic and simple progressive web app. Take your time and read the documentation on how you can make this more adjusted to your project. Links can be found below.

Tips and tricks

Links

@MeikyuuTrader

This comment has been minimized.

Copy link

@MeikyuuTrader MeikyuuTrader commented Nov 11, 2021

Do not forget to add the manifest into your head. If you were blindly following this guide like I was, that will mess you up.

<link rel="manifest" href="{{ url('manifest.json') }}">

@felixwetell

This comment has been minimized.

Copy link
Owner Author

@felixwetell felixwetell commented Nov 11, 2021

Do not forget to add the manifest into your head. If you were blindly following this guide like I was, that will mess you up.

<link rel="manifest" href="{{ url('manifest.json') }}">

Thanks for the input.
I will update the guide shortly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment