crizprz / pwacrizprz
this package will turn your website into a pwa
Installs: 410
Dependents: 0
Suggesters: 0
Security: 0
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 0
Language:Blade
README
This package for Laravel converts your project to a (PWA). When entering the site from a device it will ask to add to the home screen
Your application should work with navigation within the HTML. (no reliance on the browser back or forward button).
demo of the pwzcrizprz package
REQUIREMENTS
Composer v.2 is recommended
progressive web applications require working over the HTTPS protocol, unless you are working with localhost, if your site does not have an SSL certificate visit Let's Encrypt
INSTALLATION
Install the package through Composer.
composer require crizprz/pwacrizprz
Or add the following to your composer.json
file :
"require": { "crizprz/pwacrizprz": "^2.0", },
CONFIGURATION
- Open
config/app.php
and add this line to your Service Providers Array.
Crizprz\Pwacrizprz\Providers\PwacrizprzServiceProvider::class,
- publish the assets.
php artisan vendor:publish --provider="Crizprz\Pwacrizprz\Providers\PwacrizprzServiceProvider"
- clear the views.
php artisan view:clear
HOW TO USE
manifest
configure manifest.json file located in public_path/manifest.json
Key manifest properties
"short_name": "My PWA",
You must provide at least the short_name
or name
property.
"start_url": "/"
The start_url
is required and tells the browser where your application should start when it is launched.
"background_color": "#5DCCE2"
The background_color
property is used on the splash screen when the application is first launched on mobile.
"display": "standalone"
You can customize what browser UI is shown when your app is launched. Example: fullscreen
, standalone
, minimal-ui
, for more details visit manifest.json.
"theme_color": "#5DCCE2"
The theme_color
sets the color of the tool bar, and may be reflected in the app's preview in task switchers. The theme_color should match the meta theme color specified in your document head. <meta name="theme-color" content="#5DCCE2">
This meta has already been included in the file resources/views/PWA/metatags.blade.php
.
"icons": "[{}]"
When a user installs your PWA, you can define a set of icons for the browser to use on the home screen, app launcher, task switcher, splash screen, and so on.
"shortcuts": "[{}]"
The shortcuts
property is an array of app shortcut objects whose goal is to provide quick access to key tasks within your app. Each member is a dictionary that contains at least a name and a 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" }] } ] }
directive
Include within your the blade directive @PWACRIZPRZ
<html> head> <title>My Title</title> ... @PWACRIZPRZ </head> <body> .. </body> </html>
meta
The meta tags must be included for the correct deployment to an android and IOS device.
You find this in the file resources/views/PWA/metatags.blade.php
.
in this file the service worker is registered, the meta theme-color is configured and the splash screens for IOS devices are included.
<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>
mistakes
-
Check syntax of
public_path/manifest.json
. -
when the
manifest.json
file is edited run the artisan commandphp artisan view:clear
. -
Check syntax of
sw.js
. -
check icon names and splash screen match
public_path/manifest.json
,public_path/sw.js
, andresources/views/PWA/metatags.blade.php
files .
ServiceWorker
you can customize the service worker in the file public_path/sw.js
By default, the service worker implemented by this app is:
Note that if files are added to the cache when registering the new service worker removes the old cache and creates the new one
//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(); });
Contributing
To contribute fork the repository, make your changes then send a pull request on GitHub, then send CRIZPRZ an email.
License
The Laravel CRIZPRZ\PWACRIZPRZ open-sourced software licensed under the MIT license