cretueusebiu/laravel-web-push-demo

Laravel Web Push Notifications Demo

laravel-web-push-demo's Issues

Hi, composer require laravel-notification-channels/webpush doesn`t work

Problem 1 - laravel-notification-channels/web push 3.0.0 requires minish link/web-push ^2.0 -> satisfiable by minishlink/web-push[v2.0.0, v2.0.1]. - laravel-notification-channels/webpush 3.0.1 requires minishlink/web-push ^2.0 -> satisfiable by minishlink/web-push[v2.0.0, v2.0.1]. - minishlink/web-push v2.0.0 requires mdanter/ecc ^0.5.0 -> satisfiable by mdanter/ecc[v0.5.0]. - minishlink/web-push v2.0.1 requires mdanter/ecc ^0.5.0 -> satisfiable by mdanter/ecc[v0.5.0]. - mdanter/ecc v0.5.0 requires ext-gmp * -> the requested PHP extension gmp is missing from your system. - Installation request for laravel-notification-channels/webpush ^3.0 -> satisfiable by laravel-notification-channels/webpush[3.0.0, 3.0.1].

After receiving this error, I try to install everything I need for the package.But after trying to install I get errors

Push notifications - updateSubscription ajax fires on every page load?

Hey,

Small question regarding the NotificationsDemo.vue file if that's ok?

I've been following the docs and the JS example and noticed that it is firing an ajax call to updateSubscription on every page load if the user already has a push notification subscription. See the below link:

https://github.com/cretueusebiu/laravel-web-push-demo/blob/master/resources/js/components/NotificationsDemo.vue

Is this required? It's working fine for me (locally) only storing the push notification subscription at the initial point the user confirms but I don't have to do all the subsequent ajax requests. Or does the endpoint/public_key/auth_token need updating from time to time?

Thanks in advance :)

can update to bootstrap 4.3?

Is this working?

Because I did not receive a push notification in my mobile phone. All I receive is a laravel echo notification in my desktop

how to put working the notification like image on browser

Hi...
Nice work for this demo code and package, i'm trying to get working this.
but i need only icon notification without reload like image demo on chrome...

how to this???

https://my.mixtape.moe/hlypcc.gif

apologies my english ^^

problem when composer install

when i run composer install, the error occur:

Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Installation request for laravel-notification-channels/webpush dev-master -> satisfiable by laravel-notification-channels/webpush[dev-master].
    - laravel-notification-channels/webpush dev-master requires minishlink/web-push ^1.1 -> satisfiable by minishlink/web-push[v1.1, v1.2, v1.3, v1.3.1].
    - minishlink/web-push v1.1 requires mdanter/ecc ^0.4.0 -> satisfiable by mdanter/ecc[v0.4.0].
    - minishlink/web-push v1.2 requires mdanter/ecc ^0.4.0 -> satisfiable by mdanter/ecc[v0.4.0].
    - minishlink/web-push v1.3 requires mdanter/ecc ^0.4.0 -> satisfiable by mdanter/ecc[v0.4.0].
    - minishlink/web-push v1.3.1 requires mdanter/ecc ^0.4.0 -> satisfiable by mdanter/ecc[v0.4.0].
    - Conclusion: don't install mdanter/ecc v0.4.0

Cant click the Enable Push Notifications button

Hi Guys,

I probably have the most stupid question ever, but it has kept me busy for hours.
Have installed the project, and everything seems to work.

When I click the notification button I see the notification coming up.
Somehow I can't click the Enable Push Notifications button.

It seems disabled.
What could be the problem with this?

What am I missing here?

Thank you.

Installing demo inside a sub directory breaks app.js

Installing demo in to a sub directory of root domain breaks app.js (some where around it calls for notifications and gets 404 as the project is inside a sub directory) Could you please add non-minified version of app.js ?

Enable push notification doesn't work in mobile chrome

The enable push notification cannot be clicked in mobile chrome and cant receive notification. But it can send notification.
Any idea why?

showing unread notification counter on the Bell Icon

I Know this is not an issue, but I've been wondering how come in this demo that when new notification arrive it can automatically update the counter in bell icon, while when I check in service worker of this demo, what the push listener does is just register show notification. Could anybody please point me where the code that does the UI update of the bell icon counter.

GCM expire

Hi, I realise GCM will be expire soon and use FCM.. hope can update the code

How do you broadcast notification to all users?

So I've installed the package and was able to send / receive notifications in desktop as well as mobile. But, it only works when logged in person has enabled notifications and the same logged in person is sending the notification.

I want admin to send notifications to all users. What changes do I need to make in this case?

Records in push_subscriptions automatically disappear

Hi there,

Thanks for the awesome library and demo.
I have been trying out this in localhost and it works pretty well.

I set up a Artisan command to send notification (to test) like this:

Artisan::command('web-push', function () {
    $user = \App\Model\User::find(1);
    $user->notify(new \App\Notifications\HelloWorldNotification());
});

After run artisan web-push, the notification appears. But when I click on the notification, it opens the URL (that works as expected), but then the record in push_subscriptions table gets removed automatically.

I dont have any code to remove that at all, and I can 100% reproduce this by:

• click "enable push notification"
• see a new record stored in push_subscriptions table
• hit artisan web-push
• see new notification(*)
• click on the notification
• it opens localhost(**)
• hit artisan web-push
• now the record in push_subscriptions gets removed and no notification is showed

Notes:

• (*): if I dont click the notification, and keep hitting artisan web-push, I can see new notifications are showing up
• (**): after localhost is opened, I checked database and still can see record in push_subscriptions

My service worker JS is copied from https://github.com/cretueusebiu/laravel-web-push-demo/blob/master/public/sw.js and the demo is copied from https://github.com/cretueusebiu/laravel-web-push-demo/blob/master/resources/js/components/NotificationsDemo.vue, so nothing is changed.

P/S: Not sure if this is relevant, but I console.log('subscription', subscription) in https://github.com/cretueusebiu/laravel-web-push-demo/blob/master/resources/js/components/NotificationsDemo.vue#L74 and it always return null, even after I have enabled the push notification (record is stored in database successfully).

Thanks,

Not Receiving Notifications

Is there anything I need to setup with any external services? Does this not work on localhost? Am I required to use pusher? Everything seems to be working. I am able to save and delete my endpoints from the database. I even get the 201 when sending the notification; however, I never receive the notification.

Doesn't work in firefox v56.0 (64-bit) for Ubuntu

Hello,

On my device in Firefox from dev tools we can see that 500 is returned on post /subscriptions request with
SQLSTATE[22001]: String data, right truncated: 1406 Data too long for column 'endpoint' at row 1 .
Which would imply at first look that you should modify your DB.... But everything works on my Chrome v62 and my mobile android browsers(chrome tested - working good).

So it's a firefox related problem, it seems...

https://imgur.com/a/vdxuI

Feel free to test it out for your self at https://push.mkey.lt if you wish.

UPDATE
It seems this error only occurs when the site is fetched via Firefox for Ubuntu via https version of site. Seems that firefox for some reason doesn't like my cdn's CloudFlare SSL certificate . Normally it should work the opposite way... lol e.g. Chrome only allows this demo to work via https version....

I dont receive any notification in mobile device

do I need to run it in https?

not clear why one would set the pusher / gcm

Could anyone explain in which scenario would it be necessary / useful to set the GCM / PUSHER keys since they are optional?

No morph map defined for model [App\\Models\\User].

The following error was encountered when trying to send a notification

User::find(Auth::id())->notify(new HelloNotification);

Encountered the following error

Illuminate\Database\ClassMorphViolationException: No morph map defined for model [App\Models\User]. 
in file /home/htdocs/projects/bslcity/htdocs/www/vendor/laravel/framework/src/Illuminate/Database/Eloquent/Concerns/HasRelationships.php on line 736

Does anyone have a good solution?
Thanks

Not working in realtime

Hello,
Thank you for your project. It is working good but I have a problem for working in realtime. It is not working in realtime. I have to refresh the page to get the notifications.
I have made the configuration for .env file and all other configuration files based on your description but it doesn't work.
I'm using Laravel 5.7

Thank you in advance

notification not increase automaticlly

i install repo , make all steps that you write and add pusher account keys
but not working

In ECKey.php line 148: Unable to create the key

getting error:

In ECKey.php line 148:
Unable to create the key

when running php artisan webpush:vapid.

can't display notification in mobile list notifications

Hello, I cannot display notifications as in the example everything looks fine except that he can't display poems when there is a new poetry event.

No browser notifications

Hello,

Hoping to find a solution to my problem. Please see below - the browser notifications do not appear, and the application only shows notifications on reload.

I am also having trouble with this - I think when running php artisan migrate I get

" SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too l
ong; max key length is 767 bytes (SQL: alter table subscriptions add unique subscriptions_endpoint_unique(endpoint))
"

Then when running it again, I get

" SQLSTATE[42S01]: Base table or view already exists: 1050 Table 'subscriptions'
already exists (SQL: create table subscriptions (id int unsigned not null a
uto_increment primary key, subscribable_type varchar(191) not null, subscrib able_id bigint unsigned not null, endpoint varchar(500) not null, public_ke y varchar(191) null, auth_token varchar(191) null, content_encoding varcha
r(191) null, created_at timestamp null, updated_at timestamp null) default
character set utf8mb4 collate 'utf8mb4_unicode_ci')
"

The table is created, then it will not work past this point.

Thank you!

sending notification to other users.

Thanks for the api. I have one question, I want to send a inform notification to users when I update my database. So I don't want to display send notification to users. How to move it?

Really appreciate if you help about this.

Not able to receive notification in laravel backend vuejs frontend SPA!

hi I'm using vue2 SPA front end and in backbend laravel API and also Laravel echo with redis for chat and for push notification i used this laravel-notification-channels/webpush but I mentioned the return ['broadcast', WebPushChannel::class]; I 'm Abel to receive notification via broadcasting in my front end but not push notification even though not getting any errors

Thanks

visitor id

Hi , I am using guest table instead of user table like you advice before and everything good right now thanks , but I want to know the user id or his endpoint when he click on the web push or just close it to store this action in DB ,
is that possible :) ?

Service workers aren't supported in this browser.

Receiving Service workers aren't supported in this browser. in console, running Chrome Version 69.0.3497.100 (Official Build) (64-bit) on Windows.

Even when in console running 'serviceWorker' in navigator returns false. Any idea why?

Uncaught (in promise) DOMException: Registration failed - A subscription with a different applicationServerKey (or gcm_sender_id) already exists; to change the applicationServerKey, unsubscribe then resubscribe.

I am getting the above error on my server.

"The page has expired due to inactivity. Please refresh and try again" on dismiss of notification

I am getting the following in network whenever dismissing a notification:

The page has expired due to inactivity.
Please refresh and try again

Is this something to do with below code in NotificationController constructor?
$this->middleware('auth')->except('last', 'dismiss');

Uncaught (in promise) TypeError: Cannot read property 'socketId' of undefined

I've followed the instructions and everything went well.

However when I load the page I get this JS error:

Uncaught (in promise) TypeError: Cannot read property 'socketId' of undefined at app.js:formatted:17480

and both buttons are disabled.

The pretty-printed line where the error occurs is:

config.headers['X-Socket-ID'] = window.Echo.socketId();

Server is running on localhost, I see the error at http://localhost/home.

Thanks for your help!

app.js:897 POST http://localhost:8000/chat/sendChat 500 (Internal Server Error)

this error was showing in console when I tried to send a message to another person it give me this error and message is not delivered to him but when I refresh the page all work correctly message is also delivered to another person why this is happen.

this is all showing in console
POST http://localhost:8000/chat/sendChat 500 (Internal Server Error)
dispatchXhrRequest @ app.js:897
xhrAdapter @ app.js:731
dispatchRequest @ app.js:29721
Promise.then (async)
request @ app.js:29177
Axios.(anonymous function) @ app.js:29197
wrap @ app.js:520
sendChat @ app.js:46495
keyup @ app.js:46534
invoker @ app.js:36935
fn._withTask.fn._withTask @ app.js:36734
app.js:922 Uncaught (in promise) Error: Request failed with status code 500
at createError (app.js:922)
at settle (app.js:29249)
at XMLHttpRequest.handleLoad (app.js:796)
createError @ app.js:922
settle @ app.js:29249
handleLoad @ app.js:796
Promise.then (async)
sendChat @ app.js:46495
keyup @ app.js:46534
invoker @ app.js:36935
fn._withTask.fn._withTask @ app.js:36734

app.js:33556 WebSocket connection to 'ws://ws.pusherapp.com/app/67006e7ceebb6ff4d753' failed: Invalid frame header

I have installed your Laravel package for pusher in my application. however, i am getting the issue as

app.js:33556 WebSocket connection to 'ws://ws.pusherapp.com/app/67006e7ceebb6ff4d753?protocol=7&client=js&version=4.2.2&flash=false' failed: Invalid frame header WebSocket connection to 'ws://ws.pusherapp.com/app/67006e7ceebb6ff4d753?protocol=7&client=js&version=4.2.2&flash=false' failed:

WebSocket is closed before the connection is established.

Whereas "Enable Push Notification" Button is always disabled. Please let me know how I can solve this issue.

Illegal Instruction: 4

I have cloned and followed the steps except adding pusher and gcm keys
since it said optional.

set my database to sqlite

when I run php artisan webpush:vapid

It gives me Illegal instruction: 4

This is my php-v results
PHP 7.1.10 (cli) (built: Oct 2 2017 08:58:21) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2017 Zend Technologies
with Zend OPcache v7.1.10, Copyright (c) 1999-2017, by Zend Technologies
with Xdebug v2.5.3, Copyright (c) 2002-2017, by Derick Rethans

/notifications/last Route Error - No intro/outro on passed notification object

I was digging through the web-push-demo and tried to access the /notifications/last route, appending my endpoint URL to it (same one in the database) and I receive the following error:

(1/1) ErrorExceptionimplode(): Invalid arguments passed
--
in NotificationController.php (line 191)
at HandleExceptions->handleError(2, 'implode(): Invalid arguments passed', '/Users/steven/Documents/Projects/laravel-web-push-demo/laravel-web-push-demo-master/app/Http/Controllers/NotificationController.php', 191, array('notification' => object(DatabaseNotification)))

What's happening is the last method makes it to the end, line 128, where the following snippet is:
return $this->payload($notification);

Then, inside the payload method, there is a format method call that references to 2 properties that do not exist on the notification object being passed-in...

• $notification->intro
• $notification->outro

Thus, causing errors...

[Feature Request] Upgrade to Laravel 5.6

Is it possible to upgrade the project to Laravel 5.6? I try npm run dev/production but the generated app.js doesn't work and as a workaround, I have to copy the /public/app.js in the current repo (5.5) to my project (5.6)

Upgrade to Vue 2

• Upgrade to Vue 2
• Replace vue-resource with axios

Server 500 in demo site Send Notification

jQuery instead of Vue.js?

Is there any jQuery version? I do not use Vue.js and when I complete all step base on your readme.md and I realize that you use Vue.js in your demo.

Thanks in advanced.

BroadcastException in PusherBroadcaster.php line 105:

full error when i click on send notifications:

BroadcastException in PusherBroadcaster.php line 105:
in PusherBroadcaster.php line 105
at PusherBroadcaster->broadcast(array(object(PrivateChannel)), 'Illuminate\Notifications\Events\BroadcastNotificationCreated', array('title' => 'Hello from Laravel!', 'body' => 'Thank you for using our application.', 'action_url' => 'https://laravel.com', 'created' => '2017-01-15T16:21:09+00:00', 'id' => '943d7017-1dc7-4d2d-8f22-cdaa3a30dda1', 'type' => 'App\Notifications\HelloNotification')) in BroadcastEvent.php line 52
at BroadcastEvent->fire(object(SyncJob), array('event' => 'O:60:"Illuminate\Notifications\Events\BroadcastNotificationCreated":6:{s:10:"notifiable";O:45:"Illuminate\Contracts\Database\ModelIdentifier":2:{s:5:"class";s:8:"App\User";s:2:"id";i:1;}s:12:"notification";O:35:"App\Notifications\HelloNotification":4:{s:2:"id";s:36:"943d7017-1dc7-4d2d-8f22-cdaa3a30dda1";s:10:"connection";N;s:5:"queue";N;s:5:"delay";N;}s:4:"data";a:4:{s:5:"title";s:19:"Hello from Laravel!";s:4:"body";s:36:"Thank you for using our application.";s:10:"action_url";s:19:"https://laravel.com";s:7:"created";s:25:"2017-01-15T16:21:09+00:00";}s:10:"connection";N;s:5:"queue";N;s:5:"delay";N;}')) in Job.php line 73
at Job->fire() in SyncQueue.php line 42
at SyncQueue->push('Illuminate\Broadcasting\BroadcastEvent', array('event' => 'O:60:"Illuminate\Notifications\Events\BroadcastNotificationCreated":6:{s:10:"notifiable";O:45:"Illuminate\Contracts\Database\ModelIdentifier":2:{s:5:"class";s:8:"App\User";s:2:"id";i:1;}s:12:"notification";O:35:"App\Notifications\HelloNotification":4:{s:2:"id";s:36:"943d7017-1dc7-4d2d-8f22-cdaa3a30dda1";s:10:"connection";N;s:5:"queue";N;s:5:"delay";N;}s:4:"data";a:4:{s:5:"title";s:19:"Hello from Laravel!";s:4:"body";s:36:"Thank you for using our application.";s:10:"action_url";s:19:"https://laravel.com";s:7:"created";s:25:"2017-01-15T16:21:09+00:00";}s:10:"connection";N;s:5:"queue";N;s:5:"delay";N;}'), null) in Queue.php line 37
at Queue->pushOn(null, 'Illuminate\Broadcasting\BroadcastEvent', array('event' => 'O:60:"Illuminate\Notifications\Events\BroadcastNotificationCreated":6:{s:10:"notifiable";O:45:"Illuminate\Contracts\Database\ModelIdentifier":2:{s:5:"class";s:8:"App\User";s:2:"id";i:1;}s:12:"notification";O:35:"App\Notifications\HelloNotification":4:{s:2:"id";s:36:"943d7017-1dc7-4d2d-8f22-cdaa3a30dda1";s:10:"connection";N;s:5:"queue";N;s:5:"delay";N;}s:4:"data";a:4:{s:5:"title";s:19:"Hello from Laravel!";s:4:"body";s:36:"Thank you for using our application.";s:10:"action_url";s:19:"https://laravel.com";s:7:"created";s:25:"2017-01-15T16:21:09+00:00";}s:10:"connection";N;s:5:"queue";N;s:5:"delay";N;}')) in BroadcastManager.php line 122
at BroadcastManager->queue(object(BroadcastNotificationCreated)) in Dispatcher.php line 255
at Dispatcher->broadcastEvent(object(BroadcastNotificationCreated)) in Dispatcher.php line 217
at Dispatcher->fire('Illuminate\Notifications\Events\BroadcastNotificationCreated') in BroadcastChannel.php line 51
at BroadcastChannel->send(object(User), object(HelloNotification)) in ChannelManager.php line 79
at ChannelManager->sendNow(object(Collection), object(HelloNotification)) in ChannelManager.php line 43
at ChannelManager->send(object(Collection), object(HelloNotification)) in RoutesNotifications.php line 18
at User->notify(object(HelloNotification)) in NotificationController.php line 58
at NotificationController->store(object(Request))
at call_user_func_array(array(object(NotificationController), 'store'), array(object(Request))) in Controller.php line 55
at Controller->callAction('store', array(object(Request))) in ControllerDispatcher.php line 44
at ControllerDispatcher->dispatch(object(Route), object(NotificationController), 'store') in Route.php line 189
at Route->runController() in Route.php line 144
at Route->run(object(Request)) in Router.php line 653
at Router->Illuminate\Routing{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing{closure}(object(Request)) in SubstituteBindings.php line 41
at SubstituteBindings->handle(object(Request), object(Closure)) in Pipeline.php line 137
at Pipeline->Illuminate\Pipeline{closure}(object(Request)) in Pipeline.php line 33
at Pipeline->Illuminate\Routing{closure}(object(Request)) in Authenticate.php line 43
at Authenticate->handle(object(Request), object(Closure)) in Pipeline.php line 137
at Pipeline->Illuminate\Pipeline{closure}(object(Request)) in Pipeline.php line 33
at Pipeline->Illuminate\Routing{closure}(object(Request)) in VerifyCsrfToken.php line 65
at VerifyCsrfToken->handle(object(Request), object(Closure)) in Pipeline.php line 137
at Pipeline->Illuminate\Pipeline{closure}(object(Request)) in Pipeline.php line 33
at Pipeline->Illuminate\Routing{closure}(object(Request)) in ShareErrorsFromSession.php line 49
at ShareErrorsFromSession->handle(object(Request), object(Closure)) in Pipeline.php line 137
at Pipeline->Illuminate\Pipeline{closure}(object(Request)) in Pipeline.php line 33
at Pipeline->Illuminate\Routing{closure}(object(Request)) in StartSession.php line 64
at StartSession->handle(object(Request), object(Closure)) in Pipeline.php line 137
at Pipeline->Illuminate\Pipeline{closure}(object(Request)) in Pipeline.php line 33
at Pipeline->Illuminate\Routing{closure}(object(Request)) in AddQueuedCookiesToResponse.php line 37
at AddQueuedCookiesToResponse->handle(object(Request), object(Closure)) in Pipeline.php line 137
at Pipeline->Illuminate\Pipeline{closure}(object(Request)) in Pipeline.php line 33
at Pipeline->Illuminate\Routing{closure}(object(Request)) in EncryptCookies.php line 59
at EncryptCookies->handle(object(Request), object(Closure)) in Pipeline.php line 137
at Pipeline->Illuminate\Pipeline{closure}(object(Request)) in Pipeline.php line 33
at Pipeline->Illuminate\Routing{closure}(object(Request)) in Pipeline.php line 104
at Pipeline->then(object(Closure)) in Router.php line 655
at Router->runRouteWithinStack(object(Route), object(Request)) in Router.php line 629
at Router->dispatchToRoute(object(Request)) in Router.php line 607
at Router->dispatch(object(Request)) in Kernel.php line 268
at Kernel->Illuminate\Foundation\Http{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing{closure}(object(Request)) in CheckForMaintenanceMode.php line 46
at CheckForMaintenanceMode->handle(object(Request), object(Closure)) in Pipeline.php line 137
at Pipeline->Illuminate\Pipeline{closure}(object(Request)) in Pipeline.php line 33
at Pipeline->Illuminate\Routing{closure}(object(Request)) in Pipeline.php line 104
at Pipeline->then(object(Closure)) in Kernel.php line 150
at Kernel->sendRequestThroughRouter(object(Request)) in Kernel.php line 117
at Kernel->handle(object(Request)) in index.php line 53
at require_once('E:\wamp64\www\noti\public\index.php') in server.php line 21

Endpoint truncated

I got this error

(url)

app.js:33 Uncaught (in promise) TypeError

I just download the demo project ad done as it's step but it give error.
Help me asap.
Thax

app.js:33 Uncaught (in promise) TypeError: Cannot read property 'socketId' of undefined
at app.js:33
(anonymous) @ app.js:33

/sw.js:1 A bad HTTP response code (404) was received when fetching the script.
http://localhost/sw.js Failed to load resource: net::ERR_INVALID_RESPONSE

home:1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.