cretueusebiu / laravel-web-push-demo Goto Github PK
View Code? Open in Web Editor NEWLaravel Web Push Notifications Demo
Home Page: https://laravel-webpush.cretueusebiu.com
License: MIT License
Laravel Web Push Notifications Demo
Home Page: https://laravel-webpush.cretueusebiu.com
License: MIT License
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
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
Because I did not receive a push notification in my mobile phone. All I receive is a laravel echo notification in my desktop
Could anyone explain in which scenario would it be necessary / useful to set the GCM / PUSHER keys since they are optional?
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
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.
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 :) ?
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...
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 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
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)
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!
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.
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.
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?
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.
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!
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');
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 ?
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
I am getting the above error on my server.
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 ^^
getting error:
In ECKey.php line 148:
Unable to create the key
when running php artisan webpush:vapid.
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
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.
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.
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?
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:
push_subscriptions
tableartisan web-push
artisan web-push
push_subscriptions
gets removed and no notification is showedNotes:
artisan web-push
, I can see new notifications are showing uppush_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,
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:
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 :)
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.
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...
Hi, I realise GCM will be expire soon and use FCM.. hope can update the code
The enable push notification cannot be clicked in mobile chrome and cant receive notification. But it can send notification.
Any idea why?
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
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
do I need to run it in https?
i install repo , make all steps that you write and add pusher account keys
but not working
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.