PHPackages crizprz/pwacrizprz - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. crizprz/pwacrizprz ActiveLibrary[Utility & Helpers](/categories/utility) crizprz/pwacrizprz ================== this package will turn your website into a pwa v2.0.1(5y ago)4818—0%MITBlade Since Feb 15Pushed 5y ago1 watchersCompare [ Source](https://github.com/CRIZPRZ/LARAVEL-PWACRIZPRZ)[ Packagist](https://packagist.org/packages/crizprz/pwacrizprz)[ RSS](/packages/crizprz-pwacrizprz/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (2)DependenciesVersions (14)Used By (0) Progressive Web Aplication (PWA) for Laravel by CRIZPRZ ======================================================= [](#progressive-web-aplication-pwa-for-laravel-by-crizprz) [![Laravel 5.7](https://camo.githubusercontent.com/7a6bc90bc9116fff17e46c90bb4664b47c91d319cd5b523839b0e3b98f8e187d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d352e372d6f72616e67652e737667)](https://laravel.com/docs/5.7)[![Laravel 5.8](https://camo.githubusercontent.com/1cff10331e3b22b08c1f7631bf4ef72f69b5fa08a07b867a2d807a33e5e048a4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d352e382d6f72616e67652e737667)](https://laravel.com/docs/5.8)[![Laravel 6.x](https://camo.githubusercontent.com/3a7d4d26bc9feba844a1e77c4c6b0d2587e13f9925f4a1bda796bd32f5c5b3d8/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d362e782d626c75652e737667)](https://laravel.com/docs/6.x)[![Laravel 7.x](https://camo.githubusercontent.com/cb1a5f73220a771a314c8172f22a24beab337002200ad62c5b2d38e7d4d525c3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d372e782d7265642e737667)](https://laravel.com/docs/7.x)[![Laravel 8.x](https://camo.githubusercontent.com/ab3298aa7dabdd5c5225db3293c3e1940974373dfe1c60a3462ba53fc653edb8/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d382e782d7265642e737667)](https://laravel.com)[![Latest Stable Version](https://camo.githubusercontent.com/97655839065ecada42d2b8dc69c4d8a921e2fef24ba6bccdedcfd9b62da225f2/68747470733a2f2f706f7365722e707567782e6f72672f6372697a70727a2f7077616372697a70727a2f762f737461626c65)](https://packagist.org/packages/crizprz/pwacrizprz)[![Total Downloads](https://camo.githubusercontent.com/42351b0df8ad5e8c59a7523962e5bcc3f711cf316f5e724c40ec3ed6c614c2da/68747470733a2f2f706f7365722e707567782e6f72672f6372697a70727a2f7077616372697a70727a2f646f776e6c6f616473)](https://packagist.org/packages/crizprz/pwacrizprz)[![License](https://camo.githubusercontent.com/031369c74cc5d103c875fd86d45a06c95caada867e358988c0622465b1aa45ba/68747470733a2f2f706f7365722e707567782e6f72672f636f6d706f7365722f636f6d706f7365722f6c6963656e7365)](//packagist.org/packages/crizprz/pwacrizprz) This package for Laravel converts your project to a [(PWA)](https://developer.mozilla.org/es/docs/Web/Progressive_web_apps). When entering the site from a device it will ask to add to the home screen Your application should work with navigation within the HTML. (no reliance on the browser back or forward button). [demo](https://github.com/CRIZPRZ/laravel-pwacrizprz-demo) of the pwzcrizprz package REQUIREMENTS ============ [](#requirements) Composer v.2 is recommended progressive web applications require working over the [HTTPS](https://developers.google.com/search/docs/advanced/security/https?hl=es) protocol, unless you are working with localhost, if your site does not have an SSL certificate visit [Let's Encrypt](https://letsencrypt.org/es/) INSTALLATION ------------ [](#installation) Install the package through [Composer](http://getcomposer.org/). ``` composer require crizprz/pwacrizprz ``` Or add the following to your `composer.json` file : ``` "require": { "crizprz/pwacrizprz": "^2.0", }, ``` CONFIGURATION ------------- [](#configuration) 1. Open `config/app.php` and add this line to your Service Providers Array. ``` Crizprz\Pwacrizprz\Providers\PwacrizprzServiceProvider::class, ``` 2. publish the assets. ``` php artisan vendor:publish --provider="Crizprz\Pwacrizprz\Providers\PwacrizprzServiceProvider" ``` 3. clear the views. ``` php artisan view:clear ``` HOW TO USE ---------- [](#how-to-use) - [Manifest](#manifest) - [Blade Directive](#directive) - [Meta Tags](#meta) - [Possible mistakes](#mistakes) - [Service Worker](#serviceworker) - [Contributing](#contributing) - [License](#license) manifest -------- [](#manifest) configure [manifest.json](https://web.dev/add-manifest/) file located in `public_path/manifest.json` Key manifest properties ======================= [](#key-manifest-properties) `"short_name": "My PWA",` You must provide at least the `short_name` or `name` property. `"start_url": "/"` The `start_url` is required and tells the browser where your application should start when it is launched. `"background_color": "#5DCCE2"` The `background_color` property is used on the splash screen when the application is first launched on mobile. `"display": "standalone"` You can customize what browser UI is shown when your app is launched. Example: `fullscreen`, `standalone`, `minimal-ui`, for more details visit [manifest.json](https://web.dev/add-manifest/). `"theme_color": "#5DCCE2"` The `theme_color` sets the color of the tool bar, and may be reflected in the app's preview in task switchers. The theme\_color should match the meta theme color specified in your document head. ``This meta has already been included in the file `resources/views/PWA/metatags.blade.php`. `"icons": "[{}]"` When a user installs your PWA, you can define a set of icons for the browser to use on the home screen, app launcher, task switcher, splash screen, and so on. `"shortcuts": "[{}]"` The `shortcuts` property is an array of [app shortcut](https://web.dev/app-shortcuts/) objects whose goal is to provide quick access to key tasks within your app. Each member is a dictionary that contains at least a name and a url ``` { "short_name": "My PWA", "name": "PWA by CRIZPRZ", "start_url": "/", "background_color": "#5DCCE2", "theme_color": "#5DCCE2", "display": "standalone", "orientation": "portrait", "status_bar": "black", "icons": [{ "src": "/img/icons/icon_72px.png", "type": "image/png", "sizes": "72x72", "purpose": "maskable any" }, { "src": "/img/icons/icon_96px.png", "type": "image/png", "sizes": "96x96", "purpose": "maskable any" }, { "src": "/img/icons/icon_128px.png", "type": "image/png", "sizes": "128x128", "purpose": "maskable any" }, { "src": "/img/icons/icon_144px.png", "type": "image/png", "sizes": "144x144", "purpose": "maskable any" }, { "src": "/img/icons/icon_152px.png", "type": "image/png", "sizes": "152x152", "purpose": "maskable any" }, { "src": "/img/icons/icon_192px.png", "type": "image/png", "sizes": "192x192", "purpose": "maskable any" }, { "src": "/img/icons/icon_384px.png", "type": "image/png", "sizes": "384x384", "purpose": "maskable any" }, { "src": "/img/icons/icon_512px.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable any" } ], "shortcuts": [{ "name": "Register", "short_name": "Register in site web", "description": "Redirect register", "url": "/register", "icons": [{ "src": "/img/icons/icon_192px.png", "sizes": "192x192" }] }, { "name": "Login", "short_name": "Login", "description": "Redirect Login", "url": "/login", "icons": [{ "src": "/img/icons/icon_192px.png", "sizes": "192x192" }] } ] } ``` directive --------- [](#directive) Include within your the blade directive @PWACRIZPRZ ``` head> My Title ... @PWACRIZPRZ .. ``` meta ---- [](#meta) The meta tags must be included for the correct deployment to an android and IOS device. You find this in the file `resources/views/PWA/metatags.blade.php`. in this file the service worker is registered, the meta theme-color is configured and the splash screens for IOS devices are included. ``` {{-- Android --}} {{-- IOS --}} body{ overscroll-behavior-y: contain; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } ``` mistakes -------- [](#mistakes) 1. Check syntax of `public_path/manifest.json` . 2. when the `manifest.json` file is edited run the artisan command `php artisan view:clear`. 3. Check syntax of `sw.js` . 4. check icon names and splash screen match `public_path/manifest.json`, `public_path/sw.js`, and `resources/views/PWA/metatags.blade.php` files . ServiceWorker ------------- [](#serviceworker) you can customize the service worker in the file `public_path/sw.js`By default, the service worker implemented by this app is: Note that if files are added to the cache when registering the new service worker removes the old cache and creates the new one ``` //cache name const CACHE = 'static-' + new Date(); //files necessary for your site to work in offline mode const APP_SHELL = [ '/', '/offline', '/img/icons/icon_72px.png', '/img/icons/icon_96px.png', '/img/icons/icon_128px.png', '/img/icons/icon_144px.png', '/img/icons/icon_152px.png', '/img/icons/icon_192px.png', '/img/icons/icon_384px.png', '/img/icons/icon_512px.png', '/img/splashScreen/SplashScreen-1125x2436.png', '/img/splashScreen/SplashScreen-1242x2208.png', '/img/splashScreen/SplashScreen-1242x2688.png', '/img/splashScreen/SplashScreen-1536x2048.png', '/img/splashScreen/SplashScreen-1668x2224.png', '/img/splashScreen/SplashScreen-1668x2388.png', '/img/splashScreen/SplashScreen-2048x2732.png', '/img/splashScreen/SplashScreen-750x1334.png', '/img/splashScreen/SplashScreen-828x1792.png', ]; //install service worker self.addEventListener('install', e => { this.skipWaiting(); const cacheStatic = caches.open(CACHE).then(cache => cache.addAll(APP_SHELL)); e.waitUntil(cacheStatic); }); //activate service worker an delete old cache self.addEventListener('activate', e => { const response = caches.keys().then(keys => { keys.forEach(key => { if (key !== CACHE && key.includes('static')) { return caches.delete(key); } }); }); e.waitUntil(response); }); // Serve from Cache self.addEventListener('fetch', e => { e.respondWith( caches.match(e.request) .then(response => { return response || fetch(e.request); }) .catch(() => { return caches.match('/'); }) ) }); //push notifications self.addEventListener('push', e => { // it is preferable to send the data from a back-end const title = "title notification"; const body = "body notification" const options = { body: body, icon: 'img/icon-72x72.png', //preference use the whole url of the img example: https://tusitioweb.com/img/icon-72x72.png badge: 'img/icon-72x72.png', //preference use the whole url of the img example: https://tusitioweb.com/img/icon-72x72.png vibrate: [125, 75, 125, 275, 200, 275, 125, 75, 125, 275, 200, 600, 200, 600], // more vibrations openUrl: '/', // url where the application will open when clicking on the notification data: { url: '/', // url where the application will open when clicking on the notification } }; e.waitUntil(registration.showNotification(title, options)); }); //event when giving close notification self.addEventListener('notificationclose', e => { console.log('notification close'); }); self.addEventListener('notificationclick', e => { const notificacion = e.notification; clients.openWindow(notificacion.data.url); notification.close(); }); ``` Contributing ------------ [](#contributing) To contribute fork the repository, make your changes then send a pull request on GitHub, then send CRIZPRZ an [email](mailto:al221711754@gmail.com). License ------- [](#license) The Laravel CRIZPRZ\\PWACRIZPRZ open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT) ### Health Score 30 — LowBetter than 65% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity20 Limited adoption so far Community7 Small or concentrated contributor base Maturity60 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 13 Last Release 1907d ago Major Versions v1.0.10 → v2.0.02021-02-17 ### Community Maintainers ![](https://www.gravatar.com/avatar/f285ce6738482a350d8d6c9699c0cac2bc20aeb600140905dbfc97045949248c?d=identicon)[CRIZPRZ](/maintainers/CRIZPRZ) --- Top Contributors [![CRIZPRZ](https://avatars.githubusercontent.com/u/50276449?v=4)](https://github.com/CRIZPRZ "CRIZPRZ (30 commits)") --- Tags laravelmetameta-theme-colorpwapwacrizprzservice-workersplash-screensphplaravelpwaprogressive web apps ### Embed Badge ![Health badge](/badges/crizprz-pwacrizprz/health.svg) ``` [![Health](https://phpackages.com/badges/crizprz-pwacrizprz/health.svg)](https://phpackages.com/packages/crizprz-pwacrizprz) ``` ### Alternatives [silviolleite/laravelpwa Looks like an app, feels like an app, but NOT an app. 1.1k1.2M2](/packages/silviolleite-laravelpwa)[amranidev/laracombee Recommendation system for laravel 11636.7k1](/packages/amranidev-laracombee)[wujunze/money-wrapper MoneyPHP Wrapper 113.8k](/packages/wujunze-money-wrapper) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)