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

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.

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

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

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

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

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

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

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

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

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

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.

plz explane
Add the sw.js file to your main JS file. Example below.
and
Add a link tag that references your manifest.json in your HTML head.

@goozre

plz explane Add the sw.js file to your main JS file. Example below. and Add a link tag that references your manifest.json in your HTML head.

1. The sw.js file included in your main JS file, I wrote an example above.
2. The link tag should be added to your head tag, probably in in some layout file. It should reference to where your manifest.json file is located.

Sir, I Was New Here, May Someone Guide Me On How Add a link tag that references your manifest.json in your HTML head. I Was Installed Laravel Script Website DirectoryIndex Reading Is index.php

Second The Add sw.js File Into Main JS file Is webpack.mix.js

Correct Me If I'm Wrong

@goozre

plz explane Add the sw.js file to your main JS file. Example below. and Add a link tag that references your manifest.json in your HTML head.

1. The sw.js file included in your main JS file, I wrote an example above.
2. The link tag should be added to your head tag, probably in in some layout file. It should reference to where your manifest.json file is located.

Is That The Index.php File Is The Place That I Should Be Added Into And Main JS file Is File Named webpack.mix.js