> For the complete documentation index, see [llms.txt](https://learnphp.gitbook.io/learnphp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learnphp.gitbook.io/learnphp/learn-lavarel/push-notifications-with-laravel-and-webpush-phan-2-ok.md).
# Push Notifications with Laravel and Webpush phần 2 (ok)
https\://medium.com/@sagarmaheshwary31/push-notifications-with-laravel-and-webpush-446884265aaa
## Push Notifications with Laravel and Webpush
[](https://medium.com/@sagarmaheshwary31?source=post_page-----446884265aaa----------------------)[Sagar Maheshwary](https://medium.com/@sagarmaheshwary31?source=post_page-----446884265aaa----------------------)Follow[Dec 3, 2018](https://medium.com/@sagarmaheshwary31/push-notifications-with-laravel-and-webpush-446884265aaa?source=post_page-----446884265aaa----------------------) · 8 min read
In this tutorial, we will implement Push Notifications feature in our Laravel app using WebPush. We will use Vanilla Javascript with no frameworks or libraries. Push Notification is a feature of [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/). A Service Worker is a script inside the web browser that runs in the background. There are a lot of features like caching , background syncing but this tutorial is only about Push Notifications. We will also implement push notifications for guest users.
> *Note: Service Workers use HTTPS unless you are using localhost.*
## Getting Started
Let’s create a new laravel project with composer:
```
composer create-project laravel/laravel webpush
```
Before migrating table add this line in the **boot()** method of your **AppServiceProvider.php** located in **app\Providers** :
Above code will set the default length of a string column to 191. Since Laravel comes with **utf8mb4** charset as default and it’s max length of a unique key is **191**. If it exceeds the limit then Laravel will generate an error and won’t run migrations. If you want to specify a different charset then you can set it in **database.php** config file located in config directory. Now setup the database and add the database credentials to **.env** file and run **migrate** command which will create all the necessary tables used for authentication:
```
php artisan migrate
```
and generate authentication scaffolding:
```
php artisan make:auth
```
Instead of using a virtual host with apache, we will use Laravel dev server with (for localhost):
```
php artisan serve
```
Open your chrome and paste the url you see in your terminal. (I don’t suggest using browsers other than chrome or firefox).
## Subscribing a User
To start with our notifications, we will need to subscribe a user from the browser and we can do that with javascript. There will be two steps involved in subscribing a user which are,
* Getting the permission from the user.
* Getting the PushSubscription from that browser and sending it to server.
Before subscribing a user, we will need to generate application server keys known as **VAPID Keys**. VAPID Keys are public and private keys used for recognizing a user and these keys ensure that it’s the same server triggering the push messages to users. There are a couple of ways to generate these keys, you can visit this site [web-push-codelab.glitch.me](https://web-push-codelab.glitch.me/) to generate these keys or install **web-push** cli with npm to generate them from your command line:
```
$ npm install -g web-push
$ web-push generate-vapid-keys
```
Since we are using a Laravel package called **Webpush**, we can generate these keys with an artisan command. Webpush libraries are also available for other languages, see this [link](https://github.com/web-push-libs/) for a list all libraries. Let’s install the package:
```
composer require laravel-notification-channels/webpush
```
Laravel 5.6 or above uses package discovery feature, so we don’t need to add the package provider. Let’s add the **HasPushSubscription** trait to the **User** model:
After adding the trait we will need to publish the migration that will create the **push\_subscriptions** table:
```
php artisan vendor:publish --provider="NotificationChannels\WebPush\WebPushServiceProvider" --tag="migrations"
```
When you will run the migrate command it will generate an error because of charset saying **the specified key is too long**, so we will add a different charset for this table and add a different length for endpoint column. Let’s update the **up()** method:
You can also publish the **config** file (Which we won’t use):
```
php artisan vendor:publish --provider="NotificationChannels\WebPush\WebPushServiceProvider" --tag="config"
```
Now we can generate the **VAPID Keys**:
```
php artisan webpush:vapid
```
This command will generate VAPID public and private keys and store them to **.env** file.
Let’s create a Service Worker file in public directory named **sw\.js** and a javascript file named **enable-push.js** in **public/js** directory. Add the script right before the \ ending tag in **app.blade.php** layout file located in **resources/views/layouts** :
It will include the script only if we are autheticated.
Let’s start working on the client side by opening the **enable-push.js** file. We will register our service worker by defining a function named **initSW()** :
In above function, we are first checking if service workers and push are supported, after that we are registering our service worker which is outside one directory (you don’t have to check for push here, this will stop the registration of service worker but we are using service worker for the sole purpose of push, so we will keep it there.). Inside **then()** we are calling **initPush()** which will be responsible for subscribing a user. Don’t forget to call the initSW() in our enable-push.js. Just push this line at the top of the script:
```
initSW();
```
Let’s define **initPush()** after **initSW()** :
Inside **initPush()** we are requesting user permission and if the user clicks allow then we will be able to get **PushSubscription**. After we are granted permission, we are calling **subscribeUser()** which will subscribe the user and send the **PushSubscrption** to our server. Let’s define **subscribeUser()** :
**navigator.serviceWorker.ready** is used to check if a service worker is registered and active. Inside **then()** we are first creating an object **subscriptionOptions** which will have our **VAPID public key** and **userVisibleOnly** option. Use the public key that you have generated from the above command. Setting **userVisibleOnly** to true will not allow silent push that happen in background without letting users know (if not defined then you will get an error, read [more](https://developers.google.com/web/fundamentals/push-notifications/subscribing-a-user#uservisibleonly_options)). **urlBase64ToUint8Array()** function will convert our public key to appropriate format. After subscribing. it will return a **PushSubscription** which we can send it to the server. Inside the second **then()**, we are sending the **PushSubscription** to our server with **storePushSubscription()** function. Before defining it we should define **urlBase64ToUint8Array()** :
Our **storePushSubscription()** looks like this:
Above function is making a POST request to **/push** route. We are getting the [CSRF Token](https://laravel.com/docs/5.7/csrf#csrf-x-csrf-token) from a meta tag which is important for our ajax request. That meta tag was added when we had created authentication scaffolding.
## Storing PushSubscription to the database