PHP code example of crizprz / pwacrizprz

1. Go to this page and download the library: Download crizprz/pwacrizprz library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

crizprz / pwacrizprz example snippets


Crizprz\Pwacrizprz\Providers\PwacrizprzServiceProvider::class,

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

php artisan view:clear

{
    "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" }]
        }

    ]
}

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

<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>

//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.se notification
self.addEventListener('notificationclose', e => {
    console.log('notification close');
});

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