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();
});