README

这个 Laravel 包可以将您的网站转变为一个 Web 应用程序。在移动或桌面设备上访问您的网站将提示您将应用程序添加到主屏幕。

您将从主屏幕看到您应用程序的启动器图标，点击它后，您的 Web 应用程序将显示出来。因此，您的应用程序必须提供所有在 HTML 中的导航（而无需依赖于浏览器的前进或后退按钮）至关重要。

要求

此类 Web 应用程序需要 HTTPS 以启用安装功能，除非它们从本地主机提供服务。如果您尚未在您的网站上使用 HTTPS，请参阅 Let's Encrypt 和 ZeroSSL。

安装

我们可以在 composer.json 文件中添加依赖项

"require": {
    "edwinylil1/laravelwebapp": "~1.0.0",
},

或执行

composer require edwinylil1/laravelwebapp --prefer-dist

发布

我们需要将应用程序中的包文件公开

php artisan vendor:publish --provider="LaravelWebApp\Providers\LaravelWebAppServiceProvider"

配置

您可以在 config/laravelwebapp.php 中创建的文件中配置应用程序的名称、描述、图标、展示等。

文件示例

'manifest' => [
        'name' => env('APP_NAME_WA', 'My Web App'),
        'short_name' => env('APP_SN_WA', 'My Web App'),
        'description' => env('APP_DESCRIPTION_WA', 'Made with love by EVillegas'),
        'middleware' => ['web'],
        'start_url' => '/',
        'lang' => config('app.locale'),
        'background_color' => '#A1F188',
        'theme_color' => '#69F78C',
        'display' => 'standalone',
        'orientation'=> 'any',
        'status_bar'=> 'black',
        'icons' => [
            '72x72' => [
                'path' => '/images/icons/icon-72x72.png',
                'purpose' => 'any'
            ], ...
        ],
        'splash' => [
            '640x1136' => '/images/icons/splash-640x1136.png',
            '750x1334' => '/images/icons/splash-750x1334.png',
            '828x1792' => '/images/icons/splash-828x1792.png', ...
        ],
        'shortcuts' => [
            [
                'name' => 'Shortcut Link 1',
                'description' => 'Shortcut Link 1 Description',
                'url' => '/',
                'icons' => [
                    "src" => "/images/icons/icon-72x72.png",
                    "purpose" => "any"
                ]
            ]
        ],
        'custom' => []
    ]

您可以通过数组键指定每个图标的尺寸，或指定它

[
    'path' => '/images/icons/icon-512x512.png',
    'sizes' => '512x512',
    'purpose' => 'any'
],

注意：在 custom 标签中，您可以在 manifest.json 中插入自定义标签，例如

...
'custom' => [
    'tag_name' => 'tag_value',
    'tag_name_2' => 'tag_value_2',
    ...
]
...

我们需要将包的 Blade 指令 @laravelWebApp 添加到我们的 <head> 头部。

<html>
<head>
    <title>@yield('title')</title>
    ...
    @laravelWebApp
</head>
<body>
    ...
    My content
    ...
</body>
</html>

这应该包括适当的元标签、到 manifest.json 的链接和服务的脚本。

如果您从浏览器中查看代码，它将看起来像这个示例

<!-- Web Application Manifest -->
<link rel="manifest" href="/manifest.json">
<!-- Chrome for Android theme color -->
<meta name="theme-color" content="#000000">

<!-- Add to home screen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="PWA">
<link rel="icon" sizes="512x512" href="/images/icons/icon-512x512.png">

<!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="WebApp">
<link rel="apple-touch-icon" href="/images/icons/icon-512x512.png">

<link href="/images/icons/splash-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/images/icons/splash-750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/images/icons/splash-1242x2208.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="/images/icons/splash-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="/images/icons/splash-828x1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/images/icons/splash-1242x2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="/images/icons/splash-1284x2778.png" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="/images/icons/splash-1536x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/images/icons/splash-1668x2224.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/images/icons/splash-1668x2388.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/images/icons/splash-2048x2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

<!-- Tile for Win8 -->
<meta name="msapplication-TileColor" content="#A1F188">
<meta name="msapplication-TileImage" content="/images/icons/icon-512x512.png">

<script type="text/javascript">
    // Initialize the service worker
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/serviceworker.js', {
            scope: '.'
        }).then(function (registration) {
            // Registration was successful
            console.log('Laravel WebApp: ServiceWorker registration successful with scope: ', registration.scope);
        }, function (err) {
            // registration failed :(
            console.log('Laravel WebApp: ServiceWorker registration failed: ', err);
        });
    }
</script>

故障排除

在运行 Laravel 测试服务器时

验证 /manifest.json 是否正在提供服务
验证 /serviceworker.js 是否正在提供服务
使用 Chrome 开发者工具中的“应用程序”选项卡验证 Web 应用程序是否配置正确。
使用“添加到主屏幕”链接在“应用程序”选项卡上验证您是否可以成功添加应用程序。

服务工作者

默认情况下，此应用程序实现的服务工作者是

var staticCacheName = "webapp-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-828x1792.png',
    '/images/icons/splash-1125x2436.png',
    '/images/icons/splash-1242x2208.png',
    '/images/icons/splash-1242x2688.png',
    '/images/icons/splash-1284x2778.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("webapp-")))
                    .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');
            })
    )
});

要自定义服务工作者功能，更新 public_path/serviceworker.js。

离线视图

默认情况下，离线视图在 resources/views/vendor/laravelwebapp/offline.blade.php 中实现

@extends('layouts.app')

@section('content')

    <h1>Connect to the internet to continue.</h1>

@endsection

要自定义，更新此文件。

贡献

贡献很简单！只需复制存储库，进行更改，然后在 GitHub 上发送拉取请求。如果您的 PR 在队列中停滞不前，并且似乎没有发生任何事情，那么向 EVillegas 发送一封电子邮件。

edwinylil1 / laravelwebapp

维护者

详细信息

README

要求

安装

发布

配置

故障排除

服务工作者

离线视图

贡献

捐赠

通过 PayPal：捐赠

通过 Id Binance：359233003

edwinylil1 / laravelwebapp

维护者

详细信息

README

要求

安装

发布

配置

故障排除

服务工作者

离线视图

贡献

捐赠

通过 PayPal： 捐赠

通过 Id Binance：359233003

通过 PayPal：捐赠