HTML5 has brought us the ability to add banners to our web apps that can trigger downloads to the home screen. Doing so makes the web app open up like a native downloaded app from the respective app store. In today’s tutorial I will show you how to add a web app manifest file to your web app so you can add this new functionality to your web applications.
Webmanifest.json
Webmanifest.json is a file that the browser uses to gather meta data about your application. In it you can set information such as author, description, icons and more. For the purpose of app installs the manifest file must have the following:
short_name
name
192×192 png icon
start_url that loads
the site must have a registered service worker
the site must be served over https
background script with webworker
The benefits of using web app manifest is that you can add your web app to your home screen and it can be opened in a native like view. Another benefit is that your app has zero install time and can install on any device without having to pay Google or Apple developer fees. Your app has better performance as well since all of your files are local to the device. Lastly you can have an offline experience for your app (think web games, or news readers). Web App opening from homescreen
How To Implement
I am a big proponent of using tools so whenever I need to create a web app manifest I just head over to this site after plugging in your details you should end up with a file looking similar to this:
{
"name": "This Is A Test",
"short_name": "Test",
"lang": "en-US",
"start_url": "/",
"display": "standalone",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
It is missing the description, and background scripts which you can simply add. For a more complete example here is my Twitter Scheduler manifest.json
{
"name": "Twitter Scheduler",
"short_name": "Twitter Scheduler",
"start_url": "/home",
"display": "standalone",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#000000",
"background_color": "#000000",
"display": "fullscreen",
"description": "The app let's you schedule your tweets!!",
"background": {
"scripts": ["background.js"]
}
}
Now when someone visits the site at least twice within 5 minutes of each other a prompt will come up asking them if they want to add to homescreen. You can also manually add to homescreen yourself same experience. If you want more in depth explanations here is a great resource from Google.
In today’s tutorial I will be creating a point of sales system utilizing Vue and Laravel with Stripe being our payment processor. The program will allow a stripe account holder to take payments and if on mobile will allow them to scan the card via the device’s camera. It will utilize Laravel Passport for secure API calls and Stripe to handle the payments.
Installing The Dependencies
The app uses two dependencies as of now and those are Stipe and Laravel Passport install them using composer
'web'=>[ // Other middleware...
\Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,],
Controller
This application only needs one external controller
php artisan make:controller StripeController
This controller will only contain 2 methods __construct() and charge(). The __construct method will set the StripeApiKey and the charge method actually makes the charge
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class StripeController extends Controller
{
//
public function __construct(){
\Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));
}
public function charge(Request $request){
try {
// Use Stripe's library to make requests...
$token = \Stripe\Token::create(array(
"card" => array(
"number" => $request->card['card_number'],
"exp_month" => $request->card['expiry_month'],
"exp_year" => $request->card['expiry_year'],
"cvc" => $request->card['cvv']
)
));
\Stripe\Charge::create(array(
"amount" => $request->amount * 100,
"currency" => "usd",
"source" => $token, // obtained with Stripe.js
"description" => $request->description,
"receipt_email" => $request->email
));
return response()->json([
'success' => true
]);
} catch(\Stripe\Error\Card $e) {
// Since it's a decline, \Stripe\Error\Card will be caught
return response()->json($e->getJsonBody());
} catch (\Stripe\Error\RateLimit $e) {
// Too many requests made to the API too quickly
return response()->json($e->getJsonBody());
} catch (\Stripe\Error\InvalidRequest $e) {
// Invalid parameters were supplied to Stripe's API
return response()->json($e->getJsonBody());
} catch (\Stripe\Error\Authentication $e) {
// Authentication with Stripe's API failed
// (maybe you changed API keys recently)
return response()->json($e->getJsonBody());
} catch (\Stripe\Error\ApiConnection $e) {
// Network communication with Stripe failed
return response()->json($e->getJsonBody());
} catch (\Stripe\Error\Base $e) {
// Display a very generic error to the user, and maybe send
// yourself an email
return response()->json($e->getJsonBody());
} catch (Exception $e) {
// Something else happened, completely unrelated to Stripe
return response()->json($e->getJsonBody());
}
}
}
The controller is now finished let’s create the API routes
API Routes
Open the routes/api.php file and add the following routes
<?php
use Illuminate\Http\Request;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
Route::middleware('auth:api')->get('/user', function (Request $request) {
return $request->user();
});
Route::middleware('auth:api')->post('/charge','StripeController@charge');
The backend is now complete now for the front end.
Vue Component
Get rid of the example component and create a new one called ChargeComponent and add the following content
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('charge-component', require('./components/ChargeComponent.vue'));
const app = new Vue({
el: '#app'
});
now install the npm dependencies and run mix
npm install && npm run dev
Enjoy your new app! You can fork the source code here! Be sure to like/subscribe/share and if you want to show your support please check out the shop!
