Recently, I have created a new package for Laravel Community. it’s called Laravel PWA. first of all what is PWA? let me explain a bit more about PWA. PWA means progressive web application. PWA provides a facility to install your web application on mobile and desktop. you don’t need to write lots of line code in native platform-specific code.
You can create a PWA site in a few minutes using Laravel PWA.
You can watch the video tutorial as well to install this package.
Step 1:
Install the package by the following command,
composer require ladumor/laravel-pwa
Step 2:
Add Service Provide into app.php config file in provider section. You can skip this step if you installed it in Laravel 6 and more.
Ladumor\LaravelPwa\PWAServiceProvider::class,
Step 3:
Add Facade to app.php config file in aliases section. You can skip this step if you installed it in Laravel 6 and more.
'LaravelPwa' => \Ladumor\LaravelPwa\LaravelPwa::class,
Step 4:
I think installation is done and no need to publish all the assets using the following command,
php artisan laravel-pwa:publish
Step 5:
This step is very important. you published all the assets in the previous step. now, you need to link all the assets in your main blade file. for ex app.blade.php
Add the following code in the root blade file in the header section.
<!-- PWA -->
<meta name="theme-color" content="#6777ef"/>
<link rel="apple-touch-icon" href="{{ asset('logo.PNG') }}">
<link rel="manifest" href="{{ asset('/manifest.json') }}">
Add following code in root blade file before close the body,
<script src="{{ asset('/sw.js') }}"></script>
<script>
if (!navigator.serviceWorker.controller) {
navigator.serviceWorker.register("/sw.js").then(function (reg) {
console.log("Service worker has been registered for scope: " + reg.scope);
});
}
</script>
You should watch this tutorial if you want to set it up manually instead of using this package.
