Recommended
More Related Content
What's hot
What's hot (20)
Similar to Pwa devoxx
Similar to Pwa devoxx (20)
Recently uploaded
Recently uploaded (20)
Pwa devoxx
- 1. #pwa_devoxx @_prateekbh Progressive web apps Prateek Bhatnagar @_prateekbh https://medium.com/@prateekbh/
- 2. What are PWAs NETWORK RESILIENT RESPONDS FAST ENGAGING FOR USERS
- 3. What are you missing • Imagine a game is losing its place on homescreen • Multiple businesses are missing notifications(e.g. sale notifications, delivery notifications, doctor’s appointment and lot more) • Your web is responding slowly and your apps are already heavy to download • Your web presence goes on and off
- 4. Are you getting a fair chance Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 OF TIME SPENT IS IN USERS’ TOP 3 APPS 80%
- 5. HOW CAN PWAs HELP YOU Network Resilience Responds Fast Engaging for users Responds Fast Service workers to build reliable first class offline experiences Responding from cache with a fine grainer control over it, gives capability to load your content within 2-3 seconds Push Notifications and home screen icons help your users engage with you web app
- 6. SERVICE WORKERS The mothership A service worker is a script that your browser runs in the background, separate from a web page, opening the doors to features that don't need a web page or user interaction.
- 10. Offline first - Part 1/2 more tutorial: https://github.com/jakearchibald/simple-serviceworker-tutorial
- 11. Offline first - Part 2/2 ref: https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
- 12. Helper tools?
- 13. So what else then offline shell? • Your user’s last searches • Their last ride details • An entire game • A product page(without buying option may be) • Your social network’s last updated feed • Your last updated inbox
- 14. Manifest.json Manifest.json is a small description about app in a json file format ref: https://developer.mozilla.org/en-US/docs/Web/Manifest
- 15. Manifest.json Either follow this spec: https://w3c.github.io/manifest/ or use an online manifest generator https://app-manifest.firebaseapp.com/ https://tomitm.github.io/appmanifest/
- 16. Homescreen
- 17. Homescreen // in manifest.json { "name": "Guess", "short_name": "Guess", "description": "An images based game where you have to guess what is common among all the images.", "theme_color": "#333333", "background_color": "#333333", "display": “fullscreen/standalone/minimal-ui/browser“, "orientation": “portrait/landscape/…“, "scope": "/", "start_url": "/?start=home", "gcm_sender_id": "103953800507", "icons": [ { "src": "/images/logo.png", "sizes": "192x192", "type": "image/png" } ], "splash_pages": null }
- 18. Homescreen
- 19. Homescreen API WAIT WHAT NO API?
- 20. Homescreen API Heuristics for Add to home screen • A valid service worker • Manifest.json • User spend sometime on your app
- 21. Homescreen API But what if it doesn’t make sense for me?
- 22. Push notifications Easily the most awaited feature for web
- 23. Push notifications Guarded by User permissions modal
- 24. Push notifications Push notification powered by service worker
- 26. Push notifications Firebase your cross browser, push notification friend ref: https://firebase.google.com/docs/cloud-messaging/js/client
- 27. Push notifications Firebase your cross browser, push notification friend ref: https://developers.google.com/web/fundamentals/getting-started/codelabs/push-notifications/
- 28. Push notifications Firebase your cross browser, push notification friend ref: https://firebase.google.com/docs/cloud-messaging/js/client
- 29. What more can you expect Improved Add to home-screen
- 30. What more can you expect Replace your images for webP
- 31. What more can you expect Background sync ref: https://ponyfoo.com/articles/backgroundsync
- 32. Some more tools
- 33. Some more tools
- 34. Browser Support
- 35. Some examples I know http://outweb.io/
Editor's Notes
- Network resilience: Works on 3g/2g/offline Responds fast: super speed while, because now you have a position on user’s home screen Engaging: PWA have better re engagement with PN at your disposal.
- GAME CAB/E-Com/Doctor’s apptmt Apps > loading a web, and if its a PWA you don't have to re-download assets Net goes on & off and hence ur website
- users spend 80% of their time in top 3 apps, where as for web you can have links via which your users can simply hop from one point to another without any restriction of downloading/installing it again and again
- SW for offline SW for faster response SW-PN for re engagement
- sw a js in the background, opens door to PN/background sync
- service worker lifecycle install activate/error idle terminated/or events
- a simple sw registration, takes the scope and responds with a promise. and inside sw.js a simple dummy responder that catches all the outgoing requests
- If you are able to get a sw up and running, this is where to look for it.
- Lets have a look on a little bit more practical example: this code lets you cache assets of your website while the service-worker is getting installed these will later be used to return response from cache P.S. it uses caches storage
- while that installed the assets in cache, sw needs code to respond from the cache(REMEMBER you are not dealing with HTTP cache here). This code implements the strategy known as CACHE-FIRST skipWaiting and clients.claim help you service worker take over the previous sw without closing the tab
- Now all of that might seem a little too much to write by our own hands entry helper tools like sw-precache and sw-toolbox this help you cache and serve static assets and also add runtime caching strategies like cacheFirst, NEtworkFirst, Fastest, NetworkOnly, CacheOnly
- So a lot of that covers mostly the caching part of the shells, but sw being a very low level API allows you to be really creative with what you can really do with that. last searches, last few ride details, last seen social network feed, partial mailbox
- Now where as SW is the functional side of PWAs manifest is the descriptive side. it defines the name/icon/display mode/ theme color of your top bar and the splash screen of your PWA.
- You can find the entire description of web app manifest here or ou can go to one these bottom links and geerate a manifest for your webapp.
- After you have successfully generated one and added a sw to your PWA. your user can choose to add it to home screen and thats what the result will be
- you can control the display of your PWA with the display key. use fullscreen/standalone etc to display without a battery bar/ notification tray or just with our the URL bar of the browser Orientation lets you decide the primary mode of display orientation
- If you are using a SW and a manifest, and your user has used your PWA for a while The browser will prompt the the “Add to home screen” banner. If chosen yes your PWA’s icon will be added to user’s home screen. right beside his native apps and thus leaving no difference between PWAs and native apps on his launcher
- But did you notice their is no code to add your app to home screen. browsers decides if your website qualifies as a PWA to be added to the user’s home screen and shows the previously shown banner.
- The 3 main heuristics used to show the add to home screen banner are: a valid sw: sw should be installed and controlling your page a manifest with app name/icon and info for your app user spending sometime which varies under an ongoing experiment telling the browser that the user is interested in your app
- But there can be a pretty good chance that the browser decides to show this up when its not a good time. in that case do the following
- Push notification: this was the most awaited feature for web developers for the longest time. Now finally web can send push notifications just like any other native apps can
- Though in order to avoid any kind of spam, this feature require explicit user permission. This permission modal is enforced on all form factors and looks like these.
- Great news is that even push notifications are lowered by sw. Also sw is the reason why they are made possible. the main use case of PN comes when user is not active on your web app and at that point of time SW is the only piece of script that can be activated
- a simple PN looks like this explain
- where a cross browser solution like firebase looks like this:
- in order to take permission for push notification here’s the code
- taking the permission of PN with firebase smooths out the process for you.
- your apps will not only be on home screen, but also on the app menu. will have separate settings screen as well
- heres a very popular idea.
- Light house is a tool that runs tests on your PWA and tells how correctly are you doing the things? it checks TTI, first paints offline behavior etc. and gives you a score out of 100
- this is a typical light house report
- here’s a brilliant directory that has links to tons of greatly built PWA. go ahead take a look and experience what they have to offer.