README

此包用于 Laravel，可以将您的项目转换为 (PWA)。从设备进入网站时，它会要求添加到主屏幕

您的应用程序应在 HTML 中具有导航功能。（不依赖浏览器的前进或后退按钮）。

demo of the pwzcrizprz package

要求

建议使用 Composer v.2

渐进式网络应用程序需要通过 HTTPS 协议进行工作，除非您正在使用 localhost，如果您的网站没有 SSL 证书，请访问 Let's Encrypt

安装

通过 Composer 安装此包。

composer require crizprz/pwacrizprz

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

"require": {
    "crizprz/pwacrizprz": "^2.0",
},

配置

打开 config/app.php 并将此行添加到您的 Service Providers 数组中。

Crizprz\Pwacrizprz\Providers\PwacrizprzServiceProvider::class,

发布资源。

php artisan vendor:publish --provider="Crizprz\Pwacrizprz\Providers\PwacrizprzServiceProvider"

清除视图。

php artisan view:clear

清单

配置位于 public_path/manifest.json 的 manifest.json 文件

清单的关键属性

"short_name": "我的 PWA", 您必须提供至少 short_name 或 name 属性。

"start_url": "/" start_url 是必需的，它告诉浏览器应用程序启动时应该从哪里开始。

"background_color": "#5DCCE2" 当应用程序首次在移动设备上启动时，将使用 background_color 属性在启动画面中。

"display": "standalone" 您可以自定义在应用程序启动时显示的浏览器 UI。例如：fullscreen、standalone、minimal-ui，更多详细信息请访问 manifest.json。

"theme_color": "#5DCCE2" theme_color 设置工具栏的颜色，并且可能反映在应用程序的预览中。主题颜色应与文档头部中指定的元主题颜色匹配 <meta name="theme-color" content="#5DCCE2">。此元标签已包含在文件 resources/views/PWA/metatags.blade.php 中。

"icons": "[{}]" 当用户安装您的 PWA 时，您可以定义一组浏览器用于主屏幕、应用程序启动器、任务切换器、启动画面等的图标。

"shortcuts": "[{}]" shortcuts 属性是一个包含应用程序快捷方式对象的数组，其目的是为您的应用程序中的关键任务提供快速访问。每个成员都是一个包含至少名称和 URL 的字典。

{
    "short_name": "My PWA",
    "name": "PWA by CRIZPRZ",
    "start_url": "/",
    "background_color": "#5DCCE2",
    "theme_color": "#5DCCE2",
    "display": "standalone",
    "orientation": "portrait",
    "status_bar": "black",
    "icons": [{
            "src": "/img/icons/icon_72px.png",
            "type": "image/png",
            "sizes": "72x72",
            "purpose": "maskable any"
        },
        {
            "src": "/img/icons/icon_96px.png",
            "type": "image/png",
            "sizes": "96x96",
            "purpose": "maskable any"
        },
        {
            "src": "/img/icons/icon_128px.png",
            "type": "image/png",
            "sizes": "128x128",
            "purpose": "maskable any"
        },
        {
            "src": "/img/icons/icon_144px.png",
            "type": "image/png",
            "sizes": "144x144",
            "purpose": "maskable any"
        },
        {
            "src": "/img/icons/icon_152px.png",
            "type": "image/png",
            "sizes": "152x152",
            "purpose": "maskable any"
        },
        {
            "src": "/img/icons/icon_192px.png",
            "type": "image/png",
            "sizes": "192x192",
            "purpose": "maskable any"
        },
        {
            "src": "/img/icons/icon_384px.png",
            "type": "image/png",
            "sizes": "384x384",
            "purpose": "maskable any"
        },
        {
            "src": "/img/icons/icon_512px.png",
            "type": "image/png",
            "sizes": "512x512",
            "purpose": "maskable any"
        }
    ],
    "shortcuts": [{
            "name": "Register",
            "short_name": "Register in site web",
            "description": "Redirect register",
            "url": "/register",
            "icons": [{ "src": "/img/icons/icon_192px.png", "sizes": "192x192" }]
        },
        {
            "name": "Login",
            "short_name": "Login",
            "description": "Redirect Login",
            "url": "/login",
            "icons": [{ "src": "/img/icons/icon_192px.png", "sizes": "192x192" }]
        }

    ]
}

指令

在您的 Blade 指令中包含 @PWACRIZPRZ

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

元标签

元标签必须包含在内，才能正确部署到安卓和 IOS 设备。您可以在文件 resources/views/PWA/metatags.blade.php 中找到它。

在此文件中注册了服务工作者，配置了元主题颜色，并包含了适用于iOS设备的启动画面。

<link rel="manifest" href="{{ asset('manifest.json') }}">
<script src="{{ asset('js/registerSW.js') }}" charset="utf-8"></script>

{{-- Android --}}
<meta name="theme-color" content="#5DCCE2">

{{-- IOS --}}
<meta name="apple-mobile-web-app-capable" content="yes">

<link rel="apple-touch-icon" href="img/icons/icon_192px.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/icons/icon_152px.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/icons/icon_192px.png">
<link rel="apple-touch-icon" sizes="167x167" href="img/icons/icon_152px.png">

<!-- iPhone Xs Max (1242px x 2688px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" href="img/splashScreen/SplashScreen-1242x2688.png">
<!-- iPhone Xr (828px x 1792px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" href="img/splashScreen/SplashScreen-828x1792.png">
<!-- iPhone X, Xs (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="img/splashScreen/SplashScreen-1125x2436.png">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="img/splashScreen/SplashScreen-1242x2208.png">
<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="img/splashScreen/SplashScreen-750x1334.png">
<!-- iPad Pro 12.9" (2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="img/splashScreen/SplashScreen-2048x2732.png">
<!-- iPad Pro 11” (1668px x 2388px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" href="img/splashScreen/SplashScreen-1668x2388.png">
<!-- iPad Pro 10.5" (1668px x 2224px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="img/splashScreen/SplashScreen-1668x2224.png">
<!-- iPad Mini, Air (1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="img/splashScreen/SplashScreen-1536x2048.png">

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<meta name="apple-mobile-web-app-title" content="PWA by CRIZPRZ">


<style>
    body{
        overscroll-behavior-y: contain;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
</style>

错误

检查 public_path/manifest.json 的语法。
当编辑 manifest.json 文件时，运行 artisan 命令 php artisan view:clear。
检查 sw.js 的语法。
检查图标名称和启动画面是否与 public_path/manifest.json、public_path/sw.js 以及 resources/views/PWA/metatags.blade.php 文件匹配。

服务工作者

您可以通过文件 public_path/sw.js 定制服务工作者。默认情况下，此应用实现的服务工作者是

注意：在注册新的服务工作者时，如果添加文件到缓存中，会移除旧缓存并创建新缓存。

//cache name
const CACHE = 'static-' + new Date();

//files necessary for your site to work in offline mode
const APP_SHELL = [
    '/',
    '/offline',
    '/img/icons/icon_72px.png',
    '/img/icons/icon_96px.png',
    '/img/icons/icon_128px.png',
    '/img/icons/icon_144px.png',
    '/img/icons/icon_152px.png',
    '/img/icons/icon_192px.png',
    '/img/icons/icon_384px.png',
    '/img/icons/icon_512px.png',
    '/img/splashScreen/SplashScreen-1125x2436.png',
    '/img/splashScreen/SplashScreen-1242x2208.png',
    '/img/splashScreen/SplashScreen-1242x2688.png',
    '/img/splashScreen/SplashScreen-1536x2048.png',
    '/img/splashScreen/SplashScreen-1668x2224.png',
    '/img/splashScreen/SplashScreen-1668x2388.png',
    '/img/splashScreen/SplashScreen-2048x2732.png',
    '/img/splashScreen/SplashScreen-750x1334.png',
    '/img/splashScreen/SplashScreen-828x1792.png',
];

//install service worker
self.addEventListener('install', e => {
    this.skipWaiting();
    const cacheStatic = caches.open(CACHE).then(cache =>
        cache.addAll(APP_SHELL));
    e.waitUntil(cacheStatic);

});

//activate service worker an delete old cache
self.addEventListener('activate', e => {
    const response = caches.keys().then(keys => {
        keys.forEach(key => {
            if (key !== CACHE && key.includes('static')) {
                return caches.delete(key);
            }
        });
    });
    e.waitUntil(response);
});

// Serve from Cache
self.addEventListener('fetch', e => {
    e.respondWith(
        caches.match(e.request)
        .then(response => {
            return response || fetch(e.request);
        })
        .catch(() => {
            return caches.match('/');
        })
    )
});


//push notifications
self.addEventListener('push', e => {
    // it is preferable to send the data from a back-end
    const title = "title notification";
    const body = "body notification"
    const options = {
        body: body,
        icon: 'img/icon-72x72.png', //preference use the whole url of the img example: https://tusitioweb.com/img/icon-72x72.png
        badge: 'img/icon-72x72.png', //preference use the whole url of the img example: https://tusitioweb.com/img/icon-72x72.png
        vibrate: [125, 75, 125, 275, 200, 275, 125, 75, 125, 275, 200, 600, 200, 600], // more vibrations
        openUrl: '/', // url where the application will open when clicking on the notification
        data: {
            url: '/', // url where the application will open when clicking on the notification
        }
    };
    e.waitUntil(registration.showNotification(title, options));
});

//event when giving close notification
self.addEventListener('notificationclose', e => {
    console.log('notification close');
});

self.addEventListener('notificationclick', e => {
    const notificacion = e.notification;
    clients.openWindow(notificacion.data.url);
    notification.close();
});

贡献

要贡献代码，请fork代码仓库，进行更改后，在GitHub上发送pull request，然后发送电子邮件至al221711754@gmail.com。

许可

Laravel CRIZPRZ\PWACRIZPRZ开源软件，基于MIT许可协议。

crizprz / pwacrizprz

维护者

详细信息

README

要求

安装

配置

如何使用

清单

清单的关键属性

指令

元标签

错误

服务工作者

贡献

许可