PWA in Small Steps (Progressive Web App Summit 2016)

Key Takeaways

[Music] good morning everyone thanks for being here um my name is Jesse young I work for the mobile web team of booking.com I was in charge of developing all the uh service workers related features for our mobile website and first of all I want to ask how many of you have used the booking.com before Oh that's a lot uh thanks guys and um how many of you are from out outside of Amsterdam for this event oh did you use booking.com for your recommendations yes Ah that's a small number but uh wise choice for you uh you can never go around to book a hotel for in Amsterdam via a company in Amsterdam right and booking Doon was first founded in the Netherlands in 1996 and um uh after 20 years we now have over 194,000 properties worldwide and and uh we each day there are over 1 million Dr lights reserved on our site and apps and um uh in terms of the mobile website it was first built on 2010 and after 6 years as you can see the look has changed a lot and I bet you the code has changed a lot too um but all these histories and numbers contribute to the premises we need to take into consideration when we build our uh SS for service workers and the progress of app app first of all our website is already highly optimized it's converting well it's um serve the business need and there is just no way we're going to show it away and build everything from ground and second we have a very large team uh that is still growing fast and uh we don't want to slow things down just by introducing a whole new way of work second we uh search we have a very large Cod base that is serving the websites from since the beginning of time like from since 1996 of course and um we have a very convenient AB testing infrastructure we use everything uh we use that for every features we put online and we just uh have to use that for even new features like service workers that's why it's very important to be Progressive and that's the whole idea of progress web app right and then the team sat down and uh looked into the real possibilities uh the real potentials we have for from service workers and progress web app and also uh uh what we can really achieve with it and ideally you should have a very extremely optimized performance with all this fancy new patterns and the infrastruct and and the Technologies sub worker can do you can do precasting app show and even stream downloading I bet a lot of people have talked about this from uh these two days and also you can have a a fantastic user engagement experience you can have a full screen that's opening your website from the home screen of users you can have also push notification to better re engage your users and for us um for our business it's about checking reminders uh review invitations that is when you check out hotel we invite you to review to add reviews for the hotel and also it's uh something else like abandon basket when you browse some hotel but you didn't book when you want to to come back and finish your booking but uh uh we have a very limited scope for what we can work on uh service workers we currently only have a secure. booking.con domain that is what we use for booking process and post booking Pages all this uh user uh security sensitive data uh pages and uh we don't have https for the main website the search result and hotel pages that means we can't really experiment experiment much in that in those pages uh second is for those user engagement s it's really hard to um see what's a the real impact is our current uh experiment tool don't have that much of metrics for our users offline behaviors how would you analyze those behaviors how how would you decide they are good for your business it's uh challenging for us and also for those P notifications we are a little bit concerned what to push uh for those of you who have used the booking.com I bet you have uh uh all this experiments of receiving many emails from us right and those and and um even push notifications if you use our apps so that's why we don't really want to annoying our users uh even more with push notification from the webs and then there is another ideal versus reality check that is uh impl mation wise implementation wise you should have web components and full CLI rendering and all the fancy things that's making your website a single page app and you should also ideally have your users always logged in so they can put more personalized stuff for them but we don't have um we can't really go for uh strings for all this uh uh things we still we are a traditional web page which means it's simple robust and S friendly that is some that is just some traits you can't uh easily give up for just for the for making your things more technically exciting and second we use St jury we are not ashamed of it and um uh we use this uh use Jory and all the uh small pieces of libraries we have to write very fast AB testing and experiments and uh that's making the whole uh waste of our work is quick and dirty is the norm but we are trying still trying to improve the quality of our Cod of course and then for the users we have uh mostly last mini Bookers and uh new users that is uh who is who will do only very no frequency purchases you don't don't stay in the hotel every day right and that's why uh we start to think about the real smallest wable steps for our uh experiments with service workers what we can really achieve with it and uh what is the meaningful uh features we can push to our users first experiment we tried is to make our booking confirmation page accessible offline but uh without telling the users that they can access it offline the reason is that we want it to play safe but we still want to have a meaningful feature online and uh just to see how user interact with it we with this experiment we get the idea of um what the traffic size is like how many percentage of our users actually have service worker available and we are also trying to clear the potential roadblocks that is how to integrate s worker codes with our existing current uh code bace how to make the build process more smooth and also we are just uh uh delivering this to users to observe if there is any side effect like in in any aspect and actually we did uh see a few side effects and we saw much more page views on the booking process which is not the page we install the service worker they are the pages under the same secur booking domain but um uh people still visited those pages much more we started wondering why is this and then explanation would be users open the the confirmation page more often because they they can reach cash now and then they navigate to other pages uh but we still can say for sure whether that's true or not and we did also see an increase in page no time why is that when with service worker with all this performance uh improve and everybody else is talking about why we see an increase in the page do time the explanation would be we didn't really add any additional cash for S uh but because every ask is already cached by the native caching mechanism of browser uh one explanation might be service work could consume some CPU and somehow make the browser slower and we didn't see any conclusive result um conversion impact that's why we didn't really put this Experiment full on and then we went through next experiment the experiment is more meaningful to the users we're kind of telling users to or add the the the last last last latest booking to the home screen so they can access their bookings even more easily and this home screen icon will opens the last scene confirmation page from cash and uh it opens very fast it works offline and it will always be the latest booking users made say say if you book another booking after you add this home screen and you open you use that link again it will still open your latest booking and for this R most users just ignore this Banner because it's uh prompt out after right after users made the booking and next to next uh next iteration we added this explanation banner before we show The Prompt this is down with the before install trumpt event I think uh if if you have played with app manifest there should be you should be aware of this event and it's quite straightforward to set up so when user click on this Banner we show this stive prompt with this approach user get a better understanding of what it is and uh actually a very high percentage of people who clicked on the banner will accept the the instrument of home screen icon and a lot of them who added this to the home screen will actually use it so they're not just accepting something you you you you promote to them they are doing this with the conscious and uh this approach also lead to more people added the home screen than previous R where we show the prompter right away with with regarding this I want to talk a little bit about this engagement check that is something you need to pass when you want to display this prompt and this is a flag you can turn on in Chrome which will allow you in Dave mode to always seal this prompt but uh in real in real life real users will only see this prompt when they pass some kind of Engagement check and that criteria is defined by Google uh it is said to be the user have has visited your site at least twice with not with at least 5 minutes between visits at first we thought it's request user to leave your site and come back again but actually it doesn't users can still uh get uh engaged um uh pass the engagement check uh in the first visit but still that number is um uh this kind of this kind of limitation makes us uh really hard to control which type of users can see this feature uh we still see a very decent amount of people who who should have seen the promt didn't really see it we don't know it's whether it's really because they didn't pass the engagement check they didn't me me the 5 minutes requirements or whether because some version of qu doesn't support this feature at all or whether it's because some uh vendors some custom RS of Android disable disable this feature for good and that's making it harder for us to really examine the real impact then uh I want to dive a little deep into the code we wrote for service workers and this will show you how powerful service worker can be just by intercepting the uh Network request the first story we tried is um uh the first one I want to talk about is consolidating canonical URLs so the idea is different URLs for the same resource should fit the same cast right or even ideally fit the same request and we have all these kind of different structures of URLs uh that is actually pointing to the same thing we have language either in the HTM doc or either in the parameters uh uh of queries and uh that's why we used this s SW chalkbox middleware to write our own middleware to handle this uh s toolbox is a library way built by Google Chrome team if you haven't uh check it out uh do please check it out it's a it provides all these um cach patterns you have um and it's very easy to use so uh we created this let work first enhanced uh uh middleware which will just which is add a additional use canonic option to the options and um if this true we will check whether the request Ur has the canonic UR and that is just a function we wrote on the client side just do some uh regx matching and try to figure out so what the canonic UR for that specific URL and then if it's different than the request Ur we just fire a new request with the canonic UR and then another story we had is to home screen link via ration if you remember what we added to us as home screen is a link to the latest booking and their latest booking will have different URLs right if they Ma several different bookings and that's why we you need to and for the app manifest you can only add a static URL as they start URL of the home screen icon so that's why we do this kind of a redirection and for this start URL and that redirection we always redirect to ERS latest bookings so this router intercepts all the requests for the confirmation page and when user reach that open that confirmation page each time a 302 redirector response was forged on the client site and stored in the cash and uh then the last confirmation in end point is used for the start URL and every time user visits that URL it will go through servers uh it will go a cash owning in service worker router and it will always try to look this 302 director from the cach this allows us to make the home scol icon work as a shortcut for users bookins but actually it is not recommended to do so now simply because the quom team has decided that this is not the best experience for the users um it's will feel weird if you have uh a home screen icon that's just opening something in the browser as a shortcut starting from Crown 51 I think if you set uh the display mode in the Manifest to anything else other than standing on or full screen you will get this error and then the app Banner will never show up and um then we have another solution for preach and traditionally for precussion you will have to like M all the URLs uh uh in an array or something and you pass that via a message to service worker and let service worker to uh fetch all the content but uh what we did is to uh fire an ax request from the client side page and add some kind of additional or request header to it then the service worker get to read that header and uh tries to figure out whether this is a request for the cash for preach if this is a request for preach the service worker uh tries to matching those requests from the cash and if the cash exists then the request will never fire if the cash doesn't request then it fires a request with no C with C S Mode set to no CIS this will in en this a request to be able to work even um you request something outside of your domain and um that's some ideas we had for this uh um service recing then I like to talk about some final sorts we have for service sters uh and and uh for us it's always about to finding the best approach fits your business needs we are a very large website uh we have a lot of people working on the same we don't want to slow people down that's why we have to go into this small step uh uh approach and U gradually adding things up and then you need to be creative on your Solutions uh I guess some of the redirection and the things are quite um surprising to you guys if it is but if it's not it's also okay and um uh we kind of uh start because we can't try web compilat we can't try polymer then that's why we start to think about what else we can try for that and uh our general experience with service worker is even if we are trying something so small we still see sometimes the API is unstable it's changing and it has some uh added limitation for the Le CH version and that you don't know you have then you have to reset your experiment which prolongs our experiment circles and that's kind of frustrated to us frustrating to us and the but we still think the future looks Bri for Server work itself and for us as well so many opportunity still awaits us to explore and uh we do want to try the option architecture even that we are not a single page web app uh we wanted to try to use this streaming API to to return users a upsh show screen when they load the page and from the the upsh show screen will be returned from the client s side but we will stream the real request from server that's the plan we want to try and also we want to try projective loading that is when for example when you select a room in the hotel page it often means you want to make a booking so that's when we decide we can preload assets for the book process and we also of course are very open to build a offline resilience app and uh once we have hgps deployed for all their uh web pages we have then it will become POS possible and of course notifications although it's kind of annoying to some users we will still want to see the real value of it and so the message is clear just experience and learn even if you are a large company who has a lot of restrictions yeah thanks a lot I hope you enjoy your stay in Amsterdam and do the rest of the [Music]