felixwetell/Turning Laravel into a progressive web app - Laravel 8.X.md

## Turning Laravel into a progressive web app - Laravel 8.X.md

      
    Raw
  

              Turning Laravel into a progressive web app - Laravel 8.X.md
            
          
    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.

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');
       })
   )
});


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"
}


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);
   });  
}


Add the sw.js file to your main JS file. Example below.

// some other code
require('./sw.js');


Add a link tag that references your manifest.json in your HTML head.

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


Compile the JS file with the command below.
npm run dev
Now you have set up all the necessary JavaScript and you are ready to add your meta tags to tie the bag together.
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.
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


Maskable editor - Easy editor to create a maskable icon
Favicon Generator - Easy favicon generator
Meta Tags - Meta tag generator, others are available.

Links


Service Workers: an Introduction
manifest.json
Maskable icon
Favicon