DOCSEARCHbyAlgolia
Submit Docs

laravel-pwa Documentation

repository·master·Indexed 22 days ago

https://github.com/silviolleite/laravel-pwa

A Laravel package that transforms standard web applications into Progressive Web Apps (PWA). It provides features for home screen installation, offline support, and custom splash screens via the @laravelPWA Blade directive and a configurable manifest.

Tokens
1.2K
Snippets
5
Records
7
Agent score
28%

What's inside laravel-pwa

  2. Customize the offline view

    master

    When a user is offline and attempts to access a page not in the cache, the default offline view is shown. You can customize this view by editing the Blade template located at resources/views/vendor/laravelpwa/offline.blade.php.

    @extends('layouts.app')

@section('content')

    <h1>You are currently not connected to any networks.</h1>

@endsection

  4. Integrate Laravel PWA into Blade templates

    master

    To enable the PWA features (meta tags, manifest link, and service worker registration), include the @laravelPWA Blade directive within the <head> section of your main layout file.

    <html
<head>
    <title>My Title</title>
    ...
    @laravelPWA
</head>
<body>
    ...
</body>
</html>

  5. Customize the Service Worker

    master
    The default service worker handles caching for assets and provides an offline view. To change how files are cached or how the service worker behaves (e.g., changing the filesToCache list), you must update the file located at public/serviceworker.js.

  6. Configure the PWA manifest

    master

    Customize your application's name, description, icons, splash screens, and shortcuts in config/laravelpwa.php.

    Key configuration areas include:

    • manifest: Defines core PWA properties like name, short_name, start_url, theme_color, and icons.
    • splash: Defines splash screen images for various device resolutions.
    • shortcuts: Defines quick-access links for the user.
    • custom: Allows you to insert personalized tags directly into the manifest.json.

    For icons, you can specify the size as the array key or use the sizes property within the array.

    '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'
            ],
            // ... other icon sizes
        ],
        'splash' => [
            '640x1136' => '/images/icons/splash-640x1136.png',
            // ... other splash sizes
        ],
        'shortcuts' => [
            [
                'name' => 'Shortcut Link 1',
                'description' => 'Shortcut Link 1 Description',
                'url' => '/shortcutlink1',
                'icons' => [
                    "src" => "/images/icons/icon-72x72.png",
                    "purpose" => "any"
                ]
            ]
        ],
        'custom' => [
            'tag_name' => 'tag_value',
        ]
    ]

  7. Troubleshoot PWA installation

    master

    If your PWA is not working as expected during local development:

    1. Verify that /manifest.json is being served correctly.
    2. Verify that /serviceworker.js is being served correctly.
    3. Open Chrome Developer Tools, navigate to the Application tab, and check the PWA configuration.
    4. Use the 'Add to homescreen' link within the Application tab to test the installation process.