Added support for VAPID

.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"
   }
 }

resources/assets/js/bootstrap.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/components/NotificationsDemo.vue

@@ -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
     }
   }
 }

resources/assets/js/components/NotificationsDropdown.vue

@@ -15,6 +15,7 @@
 
       <ul class="dropdown-menu">
         <notification v-for="notification in notifications"
+          :key="notification.id"
           :notification="notification"
           v-on:read="markAsRead(notification)"
         ></notification>
@@ -111,7 +112,7 @@ export default {
      * Listen for Echo push notifications.
      */
     listen () {
-      window.Echo.private(`App.User.${window.USER.id}`)
+      window.Echo.private(`App.User.${window.Laravel.user.id}`)
         .notification(notification => {
           this.total++
           this.notifications.unshift(notification)

resources/views/layouts/app.blade.php

@@ -5,8 +5,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <!-- GCM Manifest -->
-    <link rel="manifest" href="/manifest.json">
+    <!-- GCM Manifest (optional if VAPID is used) -->
+    @if (config('webpush.gcm.sender_id'))
+        <link rel="manifest" href="/manifest.json">
+    @endif
 
     <!-- CSRF Token -->
     <meta name="csrf-token" content="{{ csrf_token() }}">
@@ -20,7 +22,13 @@
     <!-- Scripts -->
     <script>
         window.Laravel = {!! json_encode([
+            'user' => Auth::user(),
             'csrfToken' => csrf_token(),
+            'vapidPublicKey' => config('webpush.vapid.public_key'),
+            'pusher' => [
+                'key' => config('broadcasting.connections.pusher.key'),
+                'cluster' => config('broadcasting.connections.pusher.options.cluster'),
+            ],
         ]) !!};
     </script>
 </head>
@@ -90,15 +98,6 @@
         @yield('content')
     </div>
 
-    <!-- Scripts -->
-    <script>
-        window.USER = {!! Auth::check() ? Auth::user() : 'null' !!};
-
-        window.PUSHER_OPTIONS = {
-            key: '{{ config('broadcasting.connections.pusher.key') }}',
-            cluster: '{{ config('broadcasting.connections.pusher.options.cluster') }}'
-        };
-    </script>
     <script src="/js/app.js"></script>
 </body>
 </html>

routes/web.php

@@ -31,10 +31,10 @@
 Route::post('subscriptions', 'PushSubscriptionController@update');
 Route::post('subscriptions/delete', 'PushSubscriptionController@destroy');
 
-// Manifest file
+// Manifest file (optional if VAPID is used)
 Route::get('manifest.json', function () {
     return [
         'name' => config('app.name'),
-        'gcm_sender_id' => config('services.gcm.sender_id')
+        'gcm_sender_id' => config('webpush.gcm.sender_id')
     ];
 });