Feature/push notifications #2
Conversation
…moves around Service Worker registration code
…ebpack manifesto changes, Adds Add to home screen capability
|
|
||
| componentDidMount () { | ||
| navigator.serviceWorker.ready.then((swRegistration) => { | ||
| console.log("hello world"); |
There was a problem hiding this comment.
Can we change this to something more meaningful, or remove altogether?
| }) | ||
| } | ||
|
|
||
| buttonClicked = (event) => { |
There was a problem hiding this comment.
No need to pass the event object in here - a simple () will be fine
| } | ||
|
|
||
| render () { | ||
| let isSubscribed = this.state.userSubscribed |
There was a problem hiding this comment.
I could be wrong; but this variable looks unnecessary
| render () { | ||
| let isSubscribed = this.state.userSubscribed | ||
|
|
||
| const button = this.state.userSubscribed ? ( |
There was a problem hiding this comment.
We don't create components like this. It would be better to make this elsewhere and import it
| title: '', | ||
| message: '' | ||
| } | ||
| state = this._initState |
There was a problem hiding this comment.
Assigning state like this doesn't quite seem right. You could just change _initState to state
| state = this._initState | ||
|
|
||
| handleChange = (event) => { | ||
| const { value, name } = event.target |
There was a problem hiding this comment.
Here's a perfect time to use argument desctructuring 😉 You can grab these in the function ()
So it'll be: handleChange = ({ value, name }) => {}
| badge: '../../assets/mmt.png' | ||
| } | ||
| swRegistration.showNotification(title, options) | ||
| this.setState(this._initState) |
There was a problem hiding this comment.
Might be worth having a function called resetState or similar that will setState to your initial set up
| onChange={this.handleChange} | ||
| styleName='message' | ||
| /> | ||
| <button styleName='button' type="submit">Send Notification</button> |
There was a problem hiding this comment.
Here's where you could import the button component you made earlier 😄
| return outputArray; | ||
| } | ||
|
|
||
| function subscribeUser() { |
There was a problem hiding this comment.
Can we change these to ES6 functions please?
src/sw.js
Outdated
| '/assets/bundle.js', | ||
| '/assets/styles.css' | ||
| ]) | ||
| if(enableCache) { |
Usage
http://localhost:8000/pushTesting on Mobile
First you will need to install Local Tunnel ( https://localtunnel.github.io/www/ )
Basically run
npm install -g localtunnelto installThen run
lt --port 8000and you will be given a URLType the URL ( with '/push') into the browser, including 'https://' as Local Tunnel doesnt forward to https, and it is required for Service Workers to work
You might have issues on iOS. This all works on android, however I couldnt seem to get it to show up on iOS. Im not 100% sure if this is a localtunnel issue or something to do with the app / an error.
I think if we ran it in X-Code Simulator we should be able to see if theres an error.
Notes
The majority of this commit / investigative work is based on the Google Codelabs article
https://developers.google.com/web/fundamentals/codelabs/push-notifications/
Initially the code was based upon being able to send Push Notifications using the following tool:
https://web-push-codelab.glitch.me/
However I found it quite flakey so removed most of it. It can however still be used by going to the site and copying the public key it gives you, and adding it to the serviceWorker.js file.
Then after reloading the application, in the console copy the code beginning with
{"endpoint":and paste it into the tool.As a result of this, the
updateSubscriptionOnServer()function in serviceWorker.js has been left in.General Changes
In order to keep things neater and not flood index.js with code I've moved the Service Worker into its own folder in 'services', I wasnt sure if this is the right folder for it.
In that file Ive set it to export the registerWorker and subscribeUser functions, as well as the swRegistration variable itself so that they can be used in index.js / any components.
Also an eventListener for 'push' has been added to the sw.js file
Ive also had a few issues with caching so have added a variable
enableCacheto sw.js, which just stops the caching functions running when set to falseIve made a few changes to webpack in how it was constructing the manifest.json file in order to get 'Save to Home Screen' working. Also removed publicPath as it was causing an issue with the image loading for the manifest.
Push Notification Example
I've created a React Component to be able to test Push Notifications called PushNotificationExample. Effectively it just imports the swRegistration variable it into the component and call
swRegistration.showNotification(title, options)Where the title and options (message) are then typed into the form by the user and then when the button is pressed a Push Notification is sent.
I also added the MMT Logo to the Push Notification
Push Subscribe Example
Initially I moved the Allow / Block notifications function to run in the Service Worker Registration request so it shows on page load the first time a user visits, however when testing on mobile it sometimes required a few page refreshes in order to work.
To allow for easier demonstrations / testing I decided to create a React component with a button instead that when clicked will set off the promt to allow a user to sign up for notifications.
Issues
There also seem to be a couple of bugs I can't seem to figure out;