README

这个Laravel包将您的项目转变为一个渐进式Web应用程序。在安卓手机上导航到您的网站将提示您将应用添加到主屏幕。

从主屏幕启动应用将显示您的应用。因此，您的应用程序必须在HTML中提供所有导航（不依赖于浏览器的前进或后退按钮）。

要求

渐进式Web应用程序需要HTTPS（除非是从localhost服务）。如果您尚未在网站上使用HTTPS，请查看Let's Encrypt 和 ZeroSSL。

安装

将以下内容添加到您的 composer.json 文件

"require": {
    "googleshokry/laravelpwa": "^1.0.0",
},

或执行

composer require googleshokry/laravelpwa

发布

$ php artisan vendor:publish --provider="LaravelPWA\Providers\LaravelPWAServiceProvider"

配置

在 config/laravelpwa.php 中配置您的应用名称、描述和图标。

'manifest' => [
        'name' => env('APP_NAME', 'My PWA App'),
        'short_name' => 'PWA',
        'start_url' => '/',
        'background_color' => '#ffffff',
        'theme_color' => '#000000',
        'display' => 'standalone',
        'icons' => [
            '72x72' => '/images/icons/icon-72x72.png',
            '96x96' => '/images/icons/icon-96x96.png',
            '128x128' => '/images/icons/icon-128x128.png',
            '144x144' => '/images/icons/icon-144x144.png',
            '152x152' => '/images/icons/icon-152x152.png',
            '192x192' => '/images/icons/icon-192x192.png',
            '384x384' => '/images/icons/icon-384x384.png',
            '512x512' => '/images/icons/icon-512x512.png',
        ]
    ]

在 <head> 中包含blade指令 @laravelPWA，这应该包括适当的meta标签，指向 manifest.json 的链接以及服务工作者脚本。

如何在这个示例中实现

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

<!-- Add to homescreen 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 homescreen 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="PWA">
<link rel="apple-touch-icon" href="/images/icons/icon-512x512.png">

<!-- Tile for Win8 -->
<meta name="msapplication-TileColor" content="#ffffff">
<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 PWA: ServiceWorker registration successful with scope: ', registration.scope);
        }, function (err) {
            // registration failed :(
            console.log('Laravel PWA: ServiceWorker registration failed: ', err);
        });
    }
</script>

故障排除

在运行Laravel测试服务器时

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

服务工作者

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

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',
];

// 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');
            })
    )
});

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

离线视图

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

@extends('layouts.app')

@section('content')

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

@endsection

要自定义，请更新此文件。

贡献

贡献很简单！只需分支仓库，做出更改，然后在GitHub上发送pull请求。如果您的PR在队列中停滞不前，似乎没有发生任何事情，那么请发送Silvio一封电子邮件。

googleshokry / laravelpwa

维护者

详细信息

README

要求

安装

发布

配置

故障排除

服务工作者

离线视图

贡献