Progressive Web Apps (PWA)

Our PWAs are written in Laravel because the technology stack is optimal for providing a close to native experience. Some of the setup is done with Silviolleite's Laravel PWA package.

Troubleshooting

If you are not seeing the 'Install' option in your desktop browser or 'Add to homescreen' on mobile then you are likely experiencing one of many issues.

401 console error

resources/views/vendor/laravelpwa/offline.blade.php - out of the box, this points to layouts and not layout as it is now named in Laravel.

Vite specific issues

Manifest console errors

public/serviceworker.js - this file assumes that the js/app.js and css/app.css are in the public directory and that they are not cache busted. This may be an issue since Laravel incorporated Vite into the build. Simply include the following commands in deployment to resolve this on staging/production:

cp public/build/assets/app.*.css public/build/assets/app.css
cp public/build/assets/app.*.js public/build/assets/app.js

This also requires changing public/serviceworker.js itself

var filesToCache = [
    ...
    '/build/assets/app.css',
    '/build/assets/app.js',
    ...
];

Production ready splash/icons

If npm run dev is run either locally or on deployment, you may get errors should image files not be found. You can copy the following code into resources/js/app.js so the icons and splash images are copied over with cache busting filenames:

import.meta.glob([
    ...
    '../images/icons/**',
    ...
]);

Assets required

PNGs are required for both icons and splash images:

Icon

Splash