Added support for VAPID

Author: cretueusebiu

.env.example

@@ -27,12 +27,12 @@ MAIL_USERNAME=null
 MAIL_PASSWORD=null
 MAIL_ENCRYPTION=null
 
-GCM_KEY=
-GCM_SENDER_ID=
-
 BROADCAST_DRIVER="pusher"
 
 PUSHER_APP_ID=
 PUSHER_APP_KEY=
 PUSHER_APP_SECRET=
 PUSHER_CLUSTER=us
+
+VAPID_PUBLIC_KEY=
+VAPID_PRIVATE_KEY=

.eslintrc

@@ -1,11 +1,6 @@
 {
   "extends": "vue",
-  "parserOptions": {
-    "ecmaVersion": 8
-  },
   "env": {
-    "es6": true,
-    "node": true,
     "browser": true
   }
 }

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.0.0 - 2017-03-25
+
+- Added support for VAPID. 
+See [laravel-notification-channels/webpush@1.0.0](https://github.com/laravel-notification-channels/webpush/releases/tag/1.0.0)
+
 ## 0.3.0 - 2017-01-26
 
 - Upgraded to Laravel 5.4.

README.md

@@ -13,19 +13,16 @@
 - `php artisan key:generate`
 - Edit `.env` 
     - Set your database connection details
-    - Set `GCM_KEY` and `GCM_SENDER_ID` from [Google Console](https://console.cloud.google.com)
+    - (optional) Set `GCM_KEY` and `GCM_SENDER_ID` from [Google Console](https://console.cloud.google.com)
     - (optional) Set `PUSHER_APP_ID`, `PUSHER_APP_KEY`, `PUSHER_APP_SECRET` from [Pusher](https://pusher.com/)
 - `php artisan migrate`
-- (optional) `npm install` / `yarn` && `npm run dev`
+- `php artisan webpush:vapid` - Generates the VAPID keys required for browser authentication.
+- (optional) `npm install` or `yarn` and `npm run dev`
 
 ## Browser Compatibility
 
 The [Push API](https://developer.mozilla.org/en/docs/Web/API/Push_API) currently works on Chrome and Firefox. Some features like the notification close event only works on Chrome. 
 
-## Known Issues
-
-- If you use [Laravel Valet](https://github.com/laravel/valet) for your local development the service worker might not start because of the self signed certificate. At least that happened to me on Windows, so I had to use Apache.
-
 ## Changelog
 
 Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.

composer.json

@@ -6,9 +6,9 @@
     "type": "project",
     "require": {
         "php": ">=5.6.4",
+        "laravel-notification-channels/webpush": "^1.0",
         "laravel/framework": "5.4.*",
         "laravel/tinker": "~1.0",
-        "laravel-notification-channels/webpush": "^0.2",
         "pusher/pusher-php-server": "^2.6"
     },
     "require-dev": {

config/services.php

@@ -35,8 +35,4 @@
         'secret' => env('STRIPE_SECRET'),
     ],
 
-    'gcm' => [
-        'key' => env('GCM_KEY'),
-        'sender_id' => env('GCM_SENDER_ID'),
-    ],
 ];

package.json

@@ -1,18 +1,19 @@
 {
   "private": true,
   "scripts": {
-    "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "dependencies": {
     "axios": "^0.15.3",
     "bootstrap-sass": "^3.3.7",
     "jquery": "^3.1.0",
     "laravel-echo": "^1.2.0",
     "pusher-js": "^4.0.0",
-    "vue": "^2.1.8",
+    "vue": "^2.2.4",
     "vue-timeago": "^3.1.5"
   },
   "devDependencies": {
@@ -21,6 +22,6 @@
     "eslint-plugin-html": "^1.7.0",
     "eslint-plugin-vue": "^1.0.0",
     "json-loader": "^0.5.4",
-    "laravel-mix": "^0.8.8"
+    "laravel-mix": "^0.9.2"
   }
 }

public/js/app.js

@@ -14,7 +14,7 @@ window.jQuery = window.$ = $
 require('bootstrap-sass/assets/javascripts/bootstrap')
 
 // Configure Laravel Echo
-const { key, cluster } = window.PUSHER_OPTIONS
+const { key, cluster } = window.Laravel.pusher
 if (key) {
   window.Echo = new Echo({
     broadcaster: 'pusher',

resources/assets/js/bootstrap.js

@@ -86,7 +86,14 @@ export default {
      */
     subscribe () {
       navigator.serviceWorker.ready.then(registration => {
-        registration.pushManager.subscribe({ userVisibleOnly: true })
+        const options = { userVisibleOnly: true }
+        const vapidPublicKey = window.Laravel.vapidPublicKey
+
+        if (vapidPublicKey) {
+          options.applicationServerKey = this.urlBase64ToUint8Array(vapidPublicKey)
+        }
+
+        registration.pushManager.subscribe(options)
           .then(subscription => {
             this.isPushEnabled = true
             this.pushButtonDisabled = false
@@ -185,6 +192,28 @@ export default {
       axios.post('/notifications')
         .catch(error => console.log(error))
         .then(() => { this.loading = false })
+    },
+
+    /**
+     * https://github.com/Minishlink/physbook/blob/02a0d5d7ca0d5d2cc6d308a3a9b81244c63b3f14/app/Resources/public/js/app.js#L177
+     *
+     * @param  {String} base64String
+     * @return {Uint8Array}
+     */
+    urlBase64ToUint8Array (base64String) {
+        const padding = '='.repeat((4 - base64String.length % 4) % 4);
+        const base64 = (base64String + padding)
+          .replace(/\-/g, '+')
+          .replace(/_/g, '/')
+
+        const rawData = window.atob(base64)
+        const outputArray = new Uint8Array(rawData.length)
+
+        for (let i = 0; i < rawData.length; ++i) {
+            outputArray[i] = rawData.charCodeAt(i)
+        }
+
+        return outputArray
     }
   }
 }