 Hello, everybody. Welcome. Thank you for joining. I hope you're having a great Drupal con so far Let me introduce myself. My name is Ronald Braca. I'm 29 years old and I've been working with Drupal for roughly six years now It's my first time speaking at Drupal console. Give me a break if you'd like But I'd love to share some of my newfound knowledge with with everybody. So that's why I'm here on slide you see Our team I work at goal relay in the Netherlands. It's our team some family and friends At goal. We have about 30 people working now you might know us from Greenpeace Greenwire, which is a case on Drupal dot com better check it out. It's really awesome Yeah, sure, sorry, this is better. Thank you So you might have heard us from Greenpeace Greenwire dot com. It's it's on Drupal dot com It's a case study. It's a predecessor for for open social Which you also might have heard from if not, then please check it out. It's a Drupal 8 distribution. It's really cool As a goal gorilla, we are funding the core team of open social So all the techniques mentioned here All the research that has been done on progressive web apps We've all tested it in open social and it's going to be in there in this distribution So in this 25-minute session, I would like to share some knowledge about progressive web apps and It's focused on push notifications, which we use to enhance the engagement in our distribution So first things first what is a progressive web app? the term got introduced in 2015 by Google developer and designer and that's actually a Term which is used for describing apps that take advantage of new features supported by modern browsers Features like service workers the web app manifest that will make sure that your web applications Actually are amazing applications in their native operating system and they behave a bit like apps in your on your phone So it really gives that empty feeling And I would argue that Progressive web apps are first of all reliable. So unfortunately no more cool down a sore where you can play with They will load instantly. They will never show it down a sore anymore if you do it correctly It's because service workers they enable your progressive web app to pre-cache your resources So it will eliminate the dependence on your network Yeah, and it will ensure that regardless of your network. You will be able to use your website Second of all progressive web apps are fast So they really respond quickly to your user interactions and they have the silky smooth scrolling which you're used to and That's needed of course because research have shown that 53% of users will abandon your website if it takes longer than three seconds to load So performance is really really a big thing Um Progressive web apps are engaging So as you can see in this example It will feel like a natural app, but users do not have to download anything from the app store. It's just in your browser and It's not just engaging. It's also re-engaging. So By enabling push notifications people are triggered to come back to your platform. So that's also what we're gonna focus on but more on that later and Progressive web apps are secure. So without serving your content over HTTPS It's really powerful. So people can snoop around with your content and you really don't want to Service workers also do not work without HTTPS. So Definitely secure So I've dropped the name already a couple of times service workers What our service workers I will give you a little introduction I'm not sure. Is anybody already familiar with the sofas workers We're sure of hands not not that much So a service worker in essence is is a script that runs in your browser It runs in the background. So it's not connected to your web page. I'd like to paraphrase Joe from Google who actually Tried Showing it by saying that the service workers actually some somewhat like an air traffic controller So all the requests coming in From your web page from a server a server's worker handles it just like a air traffic controller would handle your plane So it could reroute your request. It could actually stop your request could cash your request So it's yeah, it's a bit simple way to say it's some somewhat similar to an air traffic controller And yeah, it's basically just a script that runs in the background But it's so powerful. It will enable you to create rich offline experiences Things like periodic background things push notifications. It's all enabled because of service workers so that's really the the foundation of your progressive web app and next to that the web app manifest The web app manifest is just a simple JSON file that enables you as a developer to Give it really that that appy feeling So you have the app on your home screen And the JSON manifest file will make sure that it looks the way you want to But also behaves the way you want to so if you open up your your application through your Progressive web app you can configure yourself if it's going to be in portrait mode or landscape mode If it's going to be ending up on the index PHP or any other sub page So it's all configurable through the web app manifest So maybe a little bit of background on why I'm having this talk So I already mentioned open social And the challenge for us because we're building a Drupal 8 distribution that's mainly focused on social communities and internets a big challenge for us is for Making the communities thrive and excel So you do that by creating engagement with your users people should come back should get triggered to come back and Make your platform bigger and bigger more content more value So that that was our challenge and the way we tried to Yeah, get that challenge done is by using push notifications So I would like you to I would like to dive a bit into the code with you on how we did this So what you see here is the config form. It's basically Something from symphony we can just extend We build a custom module for this as you can see here. This is just a build form This is where we put all our fields in and these fields are the ones that the manifest JSON needs To make your app feeling. Yeah, correct. So in an admin form you can now just configure anything you like and By putting it in the submit form we just make sure that it gets into the configuration of your installation and Somewhere else. We can just get it out of the config. So it's all you can just manage it yourself and That managing yourself we do that by Having first of all the hook page attachments. What we do there is we create a link in the HTML head That link has a rel tag for manifest and that's a rel tag will make sure that your browser understands that all your Configuration is going to be in there So we pointed in this case to the manifest JSON file And if you look above there We have a routing dot jammel where we say hey for manifest of Jason we have a controller and The only thing that the controller does it's really simple It will just get your configuration which you just stored through the admin form It will get it it will make sure that it maps correctly with your manifest jason settings And it will just output it as as a jason response and that's everything that's there to it So to give a little example, this is one of the configurations. I did for open social So you can see the short name the icons and on the right I I posted the gif which make sure that you can actually see it working So just by filling out that form. This is what you get You will get an epi feeling you have your app on your home screen. You can install it I think if you get back to your website twice within five minutes Actually an install banner pops up saying hey, would you like to pin it to your home screen? It's all been done through Just this so it's it's really powerful and actually quite simple But that's not all next to that we have the service worker as I said, that's maybe the most powerful thing So first of all because it's not supported by every browser We need to make sure that we check if a service worker is actually available So that's the top line. You actually see there in the code This is where we check if the service worker is enabled for your browser. I think safari Doesn't support it yet. So that's why we do it like this So if it's available, we try to register a new service worker We do that by registering JavaScript file in this case the SW.js service worker jazz And it will return a promise So if it's successful, then we can continue to the next stop if not then unfortunately probably your browser doesn't support it and the next step for us is by creating a Push subscription so because we want to enable push notifications We also have to check if your browser can actually handle push notifications. So that's what we do here for your user We actually ask the push manager for a subscription if it's not already there. We're gonna try and create a new one So that's a subscribe user function. You see there in the bottom what the subscribe user function actually does is It will check if you have your notification settings Allowed so I think everybody already has seen it before that you get ask permissions maybe to access your microphone your webcam Now notifications is also part of that. So what we do here is we actually create a little overlay just to get the attention there And then the service worker will ask if you would allow for the website to send push notification to you If that's the case, we're gonna store that Because every browser has different endpoints for sending push notifications So we store that endpoint for your user and that's also the way how we know what users of our platform actually enabled push notifications So to give a little schematic overview of what just happened First of all the top two You see we Registered the service worker. We got a promise returned in the happy flow, of course After that we try to create a push subscription for our user and Also that and a return is a promise and if that's correct, then we store it in our database And we're actually ready to receive push notifications It depends on your application on What event listener will handle this? So if we look at our implementation of the event listener You see here that there is this is actually the sw.js or the service worker file It will just listen to the push event. That's something that the service worker will push towards us So that's the only thing that it does in this case for the push notifications It will listen to the push event And it will ask the service worker to send the push notification In this case with a payload, which is usually just a message an icon It's the icon in front of the service work or in the in front of the notification And that's actually all there is to it. The bottom part is just getting the the data out of the response So you don't really have to be a JavaScript guru to make sure that push notifications work. This is actually all there is to it And for us, of course, we need also to implement Sending push notifications. So we use a web push library This is the library that makes sure that we can also push correctly to the endpoint. We just created and In this case what it does is we created in two ways the first option you see here is just an admin form again So we get the user from the admin form, which you select there. I will show it later in a little demo And we can send a push notification to that user. So we just get the user. We get the subscription we stored a while ago We make sure that we get all the data so the endpoint from the browser But also the authentication to make sure that everything is is valid And that's when we were gonna send it So that's what you're seeing here our web push library asked us to use vape it which is a actually authentication method And if we have the correct credentials We push our message to the web push library and the authentication then it's able to send a notification So to summarize it in a little demo So what you see here is the the ask for the permission So in this case as a Chris Hall, it's a user. We just created on our platform. We're gonna allow it And Then we're gonna go to our admin form we're actually gonna be able to send our push notification So this is all in our open social distribution This is the manifest form which we just discussed so here you can enable your your icons your short name the orientation if you want to have it in landscape Portrait mode and we need to do this because that's how our service worker gets registered for now so once we save this then We can actually send one so we're logging in as an admin now and Yeah, we're gonna send our push notification So on the top you see all the users that are actually registered for notifications. We're just gonna send it to the admin for now Yeah, and we can give it a title and a payload sort of message in this case and it works So this is our first implementation of push notifications The second one is actually the integration with our message stack So what you see here is a really brief overview of what we have in open social So in this case the creation of an entity or an update or the lead on entity actually triggers our activity factory That activity factory is basically connected to the message stack. You can download it on the Drupal at org So it's a contract module And in this case it will make sure that we actually create a new message for that message type We render a message template and that message template contains tokenized text. So whatever you want in there, you can configure it And that will trigger creating a new activity and activities for us means that we show a message On a certain destination. It's all pluggable the destinations and in our open social case The destinations are actually the stream you see on the left Picture and on the right picture our notification center both. I think you know from Facebook. It's kind of similar But in this case, of course, we wanted a new Destination the push notification So basically by copy pasting what we just did in the form Creating a new plugin for our activity factory I don't have enough time to show you all the details behind that But basically the same code make sure that it will also work for our activity factory And here's a little demo. So this is Chris Hall again. You saw that he allowed his push notifications So he's gonna minimize his browser so he's actually out of focus and we really want to re-engage him So now I'm logged in as myself on the platform and I'm actually gonna like a comment That Chris hall made But first you see this is actually a message template. I'm gonna configure it especially for you and here is our new plug-in That's available the web push plug-in So we save it So now it should work. We're gonna like a comment that Chris made and Chris will get his notification Of course, so once he clicks on it Actually the browser reopens again so he's immediately re-engaged with our platform and hopefully he will check what's happening and Why he get re-engaged so that's that's really really powerful. This is how we implemented it, but Yeah, it's also so really probable. So you can do it yourself. Basically with the code. I just shown Did we actually succeed in creating our own a progressive web app? There's a cool open source tool out there. It's called lighthouse. It will check your web app and score it So in our case, we really didn't touch anything on the performance yet there's a Drupal 7 module out there called PWA PWA and That touches the Performance so hopefully we can Combine that with our Drupal 8 version But actually we got quite a good score already just with the code that you've seen so for the future Yeah, it's progressive enhancement, which means that it shouldn't hurt you or your users to Enable it to create it It won't break the site if it's not there if you do it correctly. It's really powerful All the browsers operating systems. They're all working on it and if it's not there Probably it will be there in the coming years I think only Safari is the only browser that we are not quite sure how long it's gonna take but other than that Yeah, I can definitely recommend and I truly believe that it's gonna be the future So I'm open for questions But first of all, I would like to share that there's a github repo with all the code so you can look into it there It's my username slash Baltimore And there's a really cool tool. It's called what what what web can do today? This is where you can see what your browser actually already Can do with progressive apps So if you have any questions, there's a mic in there in the middle so we can archive everything This Friday there are sprints. So join us. I'll be there as well. I might actually work on the progressive web app And please fill in the survey and rate the session Thanks for your attention