PHPackages osenco/laravelpwa - 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. osenco/laravelpwa ActiveLibrary osenco/laravelpwa ================= Looks like an app, feels like an app, but NOT an app. 1.0.2(1y ago)045MITPHP Since Nov 18Pushed 1y agoCompare [ Source](https://github.com/osenco/laravel-pwa)[ Packagist](https://packagist.org/packages/osenco/laravelpwa)[ RSS](/packages/osenco-laravelpwa/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (3)DependenciesVersions (4)Used By (0) Laravel (PWA) Progressive Web Application ========================================= [](#laravel-pwa-progressive-web-application) [![Laravel 5.x](https://camo.githubusercontent.com/5a1939c3fb1f6760124421638f59ab4ed15b6d03dbb30a6824df9af781880437/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d352e782d6f72616e67652e737667)](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)[![Latest Stable Version](https://camo.githubusercontent.com/227579ca6946ef3c62d237c20d4275be5ced0cf11f4090cd06d50dec484eac95/68747470733a2f2f706f7365722e707567782e6f72672f73696c76696f6c6c656974652f6c61726176656c7077612f762f737461626c65)](https://packagist.org/packages/silviolleite/laravelpwa)[![Total Downloads](https://camo.githubusercontent.com/39fa560df20aaae61b04e4770ee4bd41482903a34c522ec05e27bb0bff7987e1/68747470733a2f2f706f7365722e707567782e6f72672f73696c76696f6c6c656974652f6c61726176656c7077612f646f776e6c6f6164732e706e67)](https://packagist.org/packages/silviolleite/laravelpwa)[![License](https://camo.githubusercontent.com/850eae1099d2b05f53383473d7cd51f9bc1ab09b7d0d9e5122f1dd930efdcc6d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d6173686170652f6170697374617475732e737667)](https://packagist.org/packages//silviolleite/laravelpwa) This Laravel package turns your project into a [progressive web app](https://developers.google.com/web/progressive-web-apps/). Navigating to your site on an Android phone will prompt you to add the app to your home screen. Launching the app from your home screen will display your app. As such, it's critical that your application provides all navigation within the HTML (no reliance on the browser back or forward button). See too the [Laravel PWA Demo](https://github.com/silviolleite/laravel-pwa-demo) Requirements ============ [](#requirements) Progressive Web Apps require HTTPS unless being served from localhost. If you're not already using HTTPS on your site, check out [Let's Encrypt](https://letsencrypt.org/) and [ZeroSSL](https://zerossl.com/). Installation ------------ [](#installation) Add the following to your `composer.json` file : ``` "require": { "osenco/laravelpwa": "~2.0.3", }, ``` or execute ``` composer require osenco/laravelpwa --prefer-dist ``` ### Publish [](#publish) ``` php artisan vendor:publish --provider="LaravelPWA\Providers\LaravelPWAServiceProvider" ``` ### Configuration [](#configuration) Configure your app name, description, icons and splashes in `config/laravelpwa.php`. ``` 'manifest' => [ 'name' => env('APP_NAME', 'My PWA App'), 'short_name' => 'PWA', 'start_url' => '/', 'background_color' => '#ffffff', 'theme_color' => '#000000', 'display' => 'standalone', 'orientation' => 'any', 'status_bar' => 'black', 'icons' => [ '72x72' => [ 'path' => '/images/icons/icon-72x72.png', 'purpose' => 'any' ], '96x96' => [ 'path' => '/images/icons/icon-96x96.png', 'purpose' => 'any' ], '128x128' => [ 'path' => '/images/icons/icon-128x128.png', 'purpose' => 'any' ], '144x144' => [ 'path' => '/images/icons/icon-144x144.png', 'purpose' => 'any' ], '152x152' => [ 'path' => '/images/icons/icon-152x152.png', 'purpose' => 'any' ], '192x192' => [ 'path' => '/images/icons/icon-192x192.png', 'purpose' => 'any' ], '384x384' => [ 'path' => '/images/icons/icon-384x384.png', 'purpose' => 'any' ], '512x512' => [ 'path' => '/images/icons/icon-512x512.png', 'purpose' => 'any' ], ], 'splash' => [ '640x1136' => '/images/icons/splash-640x1136.png', '750x1334' => '/images/icons/splash-750x1334.png', '828x1792' => '/images/icons/splash-828x1792.png', '1125x2436' => '/images/icons/splash-1125x2436.png', '1242x2208' => '/images/icons/splash-1242x2208.png', '1242x2688' => '/images/icons/splash-1242x2688.png', '1536x2048' => '/images/icons/splash-1536x2048.png', '1668x2224' => '/images/icons/splash-1668x2224.png', '1668x2388' => '/images/icons/splash-1668x2388.png', '2048x2732' => '/images/icons/splash-2048x2732.png', ], 'shortcuts' => [ [ 'name' => 'Shortcut Link 1', 'description' => 'Shortcut Link 1 Description', 'url' => '/shortcutlink1', 'icons' => [ "src" => "/images/icons/icon-72x72.png", "purpose" => "any" ] ], [ 'name' => 'Shortcut Link 2', 'description' => 'Shortcut Link 2 Description', 'url' => '/shortcutlink2' ] ], 'custom' => [] ] ``` You can specify the size of each icon as key of the array or specify it: ``` [ 'path' => '/images/icons/icon-512x512.png', 'sizes' => '512x512', 'purpose' => 'any' ], ``` Obs: In the `custom` tag you can insert personalized tags to `manifest.json` like this e.g: ``` ... 'custom' => [ 'tag_name' => 'tag_value', 'tag_name2' => 'tag_value2', ... ] ... ``` Include within your `` the blade directive `@laravelPWA`. ``` My Title ... @laravelPWA ... My content ... ``` This should include the appropriate meta tags, the link to `manifest.json` and the serviceworker script. how this example: ``` // Initialize the service worker if ("serviceWorker" in navigator) { navigator.serviceWorker .register("/serviceworker.js", { scope: ".", }) .then( function (registration) { // Registration was successful console.log( "Laravel PWA: ServiceWorker registration successful with scope: ", registration.scope ); }, function (err) { // registration failed :( console.log( "Laravel PWA: ServiceWorker registration failed: ", err ); } ); } ``` Troubleshooting =============== [](#troubleshooting) While running the Laravel test server: 1. Verify that `/manifest.json` is being served 2. Verify that `/serviceworker.js` is being served 3. Use the Application tab in the Chrome Developer Tools to verify the progressive web app is configured correctly. 4. Use the "Add to homescreen" link on the Application Tab to verify you can add the app successfully. The Service Worker ================== [](#the-service-worker) By default, the service worker implemented by this app is: ``` var staticCacheName = "pwa-v" + new Date().getTime(); var filesToCache = [ "/offline", "/css/app.css", "/js/app.js", "/images/icons/icon-72x72.png", "/images/icons/icon-96x96.png", "/images/icons/icon-128x128.png", "/images/icons/icon-144x144.png", "/images/icons/icon-152x152.png", "/images/icons/icon-192x192.png", "/images/icons/icon-384x384.png", "/images/icons/icon-512x512.png", "/images/icons/splash-640x1136.png", "/images/icons/splash-750x1334.png", "/images/icons/splash-1242x2208.png", "/images/icons/splash-1125x2436.png", "/images/icons/splash-828x1792.png", "/images/icons/splash-1242x2688.png", "/images/icons/splash-1536x2048.png", "/images/icons/splash-1668x2224.png", "/images/icons/splash-1668x2388.png", "/images/icons/splash-2048x2732.png", ]; // 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"); }) ); }); ``` To customize service worker functionality, update the `public/serviceworker.js`. The offline view ================ [](#the-offline-view) By default, the offline view is implemented in `resources/views/vendor/laravelpwa/offline.blade.php` ``` @extends('layouts.app') @section('content') You are currently not connected to any networks. @endsection ``` To customize update this file. Contributing ------------ [](#contributing) Contributing is easy! Just fork the repo, make your changes then send a pull request on GitHub. If your PR is languishing in the queue and nothing seems to be happening, then send Silvio an [email](mailto:silviolleite@gmail.com). Publish to Android Playstore ---------------------------- [](#publish-to-android-playstore) [Bubblewrap](https://github.com/GoogleChromeLabs/bubblewrap) is a tool to make wrapping your Progressive Web App into an Android App Bundle as easy as running a a couple of CLI commands. It does this by generating an Android project that launches your PWA as a [Trusted Web Activity](https://developer.chrome.com/docs/android/trusted-web-activity/). **Before You Start** What kind of information might Bubblewrap need about your PWA to generate an Android project? To start, create a directory for your project to live in and move into it: ```bash mkdir my-pwa && cd my-pwa ```Then, run the Bubblewrap command line tool to generate the configuration and Android project for the Android App Bundle you'll upload to Play: ``` $ bubblewrap init --manifest=https://my-pwa.com/manifest.json ``` **Important**: When Bubblewrap is run for the first time, it will ask for downloading extra dependencies. Those dependencies are the **Java Development Kit** and the [Android command-line tools](https://developer.android.com/studio/command-line). To ensure the correct versions are downloaded for each dependency, we strongly recommend allowing Bubblewrap to download the correct versions instead of using one already available on your computer. Here, Bubblewrap is initialized with the location of a PWA's [Web App Manifest](https://web.dev/add-manifest/) file. This will generate a default configuration from the Web App Manifest, and start an in-console wizard that will allow you to change the default configuration. Follow the wizard to change any of the values generated by the tool. [![Bubblewrap CLI wizard showing an initialization from airhorner with the domain overridden with example,.com and the start URLs overridden.](https://camo.githubusercontent.com/65d1b0078b5054ed1d754a1ac10760a85dec3c706ec4b149b4aed6f432440525/68747470733a2f2f646576656c6f706572732e676f6f676c652e636f6d2f7374617469632f636f64656c6162732f7077612d696e2d706c61792f696d616765732f627562626c65777261702d77697a6172642e706e67)](https://camo.githubusercontent.com/65d1b0078b5054ed1d754a1ac10760a85dec3c706ec4b149b4aed6f432440525/68747470733a2f2f646576656c6f706572732e676f6f676c652e636f6d2f7374617469632f636f64656c6162732f7077612d696e2d706c61792f696d616765732f627562626c65777261702d77697a6172642e706e67) Signing Key ----------- [](#signing-key) Google's Play Store requires application packages to be digitally signed with a certificate when uploaded, often referred to as signing key. This is a self-signed certificate and is *different from the one used to serve your application over HTTPS*. Bubblewrap will ask for the path for the key when creating the application. If you are using an existing Play Store listing for your application, you will need to add the path to the same key used by that listing. [![Bubblewrap CLI wizard asking for the location of the user’s existing signing key location and name.](https://camo.githubusercontent.com/c27db1361ab402744f93a1153214b0c6c4c187988f63295591cf69135e79cd3d/68747470733a2f2f646576656c6f706572732e676f6f676c652e636f6d2f7374617469632f636f64656c6162732f7077612d696e2d706c61792f696d616765732f627562626c65777261702d6b65792d696e666f2e706e67)](https://camo.githubusercontent.com/c27db1361ab402744f93a1153214b0c6c4c187988f63295591cf69135e79cd3d/68747470733a2f2f646576656c6f706572732e676f6f676c652e636f6d2f7374617469632f636f64656c6162732f7077612d696e2d706c61792f696d616765732f627562626c65777261702d6b65792d696e666f2e706e67) If you do not have existing signing key and are creating a new listing on the Play Store, you can use the default value provided by Bubblewrap to have it create a new key for you: [![Bubblewrap CLI wizard asking if the user would like to create new signing key.](https://camo.githubusercontent.com/b6f0370c325976e8208ed806736387f496101a40de76f8a6b7c90ad7847c5e70/68747470733a2f2f646576656c6f706572732e676f6f676c652e636f6d2f7374617469632f636f64656c6162732f7077612d696e2d706c61792f696d616765732f627562626c65777261702d6b65792d6372656174696f6e2e706e67)](https://camo.githubusercontent.com/b6f0370c325976e8208ed806736387f496101a40de76f8a6b7c90ad7847c5e70/68747470733a2f2f646576656c6f706572732e676f6f676c652e636f6d2f7374617469632f636f64656c6162732f7077612d696e2d706c61792f696d616765732f627562626c65777261702d6b65792d6372656174696f6e2e706e67) **Important**: Ensure your key and passwords are stored in a safe place. You will need them to build the application the first time and also to update your app on the Play Store regularly. Bubblewrap Output ----------------- [](#bubblewrap-output) After initializing your Bubblewrap project and completing the wizard, the following items will have been created: - **twa-manifest.json** - The project configuration, reflecting the values chosen in the Bubblewrap wizard. You will want to track this file with your version control system, as it can be used to regenerate the entire Bubblewrap project if need be. - **Android project files** - The remaining files in the directory are the generated Android project. This project is the source used for the Bubblewrap build command. You can optionally track these files with your version control system, too. - **(Optionally) Signing Key** - If you choose to have Bubblewrap create the signing key for you, the key will be output to the location described on the wizard. Ensure the key is kept in a safe place and limit the number of people who have access to it; it is what is used to prove apps on the Play Store come from you. With these files, we now have everything we need to build an Android Application Bundle. Build Your Android App Bundle ----------------------------- [](#build-your-android-app-bundle) From within the same directory you ran Bubblewrap's initialization command, run the following (you'll need the passwords for your signing key): ``` $ bubblewrap build ``` [![Bubblewrap CLI output for building a project, asking for passwords for the signing key and showing the generation of different versions of the Android app.](https://camo.githubusercontent.com/e6a0e403f1d6c4cdc4da8f95fb35c87b38da51ff46fa3d6e28907aa823eaea78/68747470733a2f2f646576656c6f706572732e676f6f676c652e636f6d2f7374617469632f636f64656c6162732f7077612d696e2d706c61792f696d616765732f627562626c65777261702d6275696c642d6f75747075742e706e67)](https://camo.githubusercontent.com/e6a0e403f1d6c4cdc4da8f95fb35c87b38da51ff46fa3d6e28907aa823eaea78/68747470733a2f2f646576656c6f706572732e676f6f676c652e636f6d2f7374617469632f636f64656c6162732f7077612d696e2d706c61792f696d616765732f627562626c65777261702d6275696c642d6f75747075742e706e67) The build command will generate two important files: - **app-release-bundle.aab** - Your PWA's [Android App Bundle](https://developer.android.com/platform/technology/app-bundle). This is the file you will upload to the Google Play Store. - **app-release-signed.apk** - An Android packaging format that can be used to install the application directly to a development device using the `bubblewrap install` command. ### Health Score 28 — LowBetter than 54% of packages Maintenance44 Moderate activity, may be stable Popularity8 Limited adoption so far Community13 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor1 Top contributor holds 51% 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 ~2 days Total 3 Last Release 538d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/1e4a04231f4571a99a35c6e8acb096b5cfd7a28eb73b71e026f2024f353fdaca?d=identicon)[maukoese](/maintainers/maukoese) --- Top Contributors [![silviolleite](https://avatars.githubusercontent.com/u/4688129?v=4)](https://github.com/silviolleite "silviolleite (26 commits)")[![maukoese](https://avatars.githubusercontent.com/u/14233942?v=4)](https://github.com/maukoese "maukoese (9 commits)")[![Umfi](https://avatars.githubusercontent.com/u/13978552?v=4)](https://github.com/Umfi "Umfi (7 commits)")[![vlados](https://avatars.githubusercontent.com/u/46914?v=4)](https://github.com/vlados "vlados (3 commits)")[![enescakir](https://avatars.githubusercontent.com/u/993199?v=4)](https://github.com/enescakir "enescakir (2 commits)")[![nadeemkhan](https://avatars.githubusercontent.com/u/1510017?v=4)](https://github.com/nadeemkhan "nadeemkhan (1 commits)")[![leganz](https://avatars.githubusercontent.com/u/3373530?v=4)](https://github.com/leganz "leganz (1 commits)")[![devluga](https://avatars.githubusercontent.com/u/98359599?v=4)](https://github.com/devluga "devluga (1 commits)")[![sharryy](https://avatars.githubusercontent.com/u/58107398?v=4)](https://github.com/sharryy "sharryy (1 commits)") --- Tags phplaravelpwaprogressive web apps ### Embed Badge ![Health badge](/badges/osenco-laravelpwa/health.svg) ``` [![Health](https://phpackages.com/badges/osenco-laravelpwa/health.svg)](https://phpackages.com/packages/osenco-laravelpwa) ``` ### Alternatives [silviolleite/laravelpwa Looks like an app, feels like an app, but NOT an app. 1.1k1.2M2](/packages/silviolleite-laravelpwa)[tomatophp/filament-pwa get a PWA feature on your FilamentPHP app with settings from panel 8115.8k](/packages/tomatophp-filament-pwa)[octw/aramex A Library to integrate with Aramex APIs 2925.2k](/packages/octw-aramex) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)