get your mind clear and ready for the journey. Our Goals We will understand, and build together a progressive web app, now! 4 Build / 2 steps Follow the step-by-step codelab, use the provided materials, and build your first PWA Get Ready Awesome things coming your way, you’ll learn new things, and get new skills, let’s have fun together! Awesomeness Inside Launch / 1 step Deploy your first PWA online using Firebase cloud hosting and share it with others Understand / 2 steps What’s Progressive Web Apps, Why it’s important now, and How to use it effectively
following hashtags #ProgressiveWebApps #DevFest16 Activity Announcement Twitter/FB/G+ livestream what’s happening, you may win a special SWAG! 6 1 2 3 4 You must mention GDG chapter’s twitter account, Facebook page, or Google plus page Write something new you’ve learned, a new or exciting feature, add emoji and post photos Mention the speaker, re-share and re-tweet others, and keep posting all day!
implement all features explained Activity Announcement #2 Follow the codelab, and deploy online during the session & win a special SWAG! 7 1 2 3 4 Be honest & follow the steps, don’t jump to conclusion, the main goal here is to learn while having fun Deploy your demo online using Firebase cloud hosting, and try to access it through your mobile Finally, show your working online demo to the instructor, it must be fully functional with offline support ✨
of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience. What’s Progressive Web Apps 9 PWA in a nutshell Google's Progressive Web Apps are blurring the lines between apps and the mobile web. “ ” ― Business Insider
used throughout Progressive Easily discovered by search engines Discoverable It’s the web, linkable by definition Linkable UI fits device’s form factor and screen size Responsive Looks & interacts like a native app App-like
cache support via service workers Connectivity Independent Engage users through push notifications Re-engageable Install to device’s home screen, run in fullscreen Installable Always get newest data from server Fresh Always served over HTTPS Secure
that, on average, an app loses 20% of its users for every step between the user’s first contact with the app and the user starting to use the app. Usage Friction Roughly 80 percent of smartphone app time is spent with users’ top three apps, notwithstanding the fact that people typically engage with 25 apps per month, while 100+ sites navigated to. Usage Frequency Web apps will generally be easier to deploy and maintain (there’s always one source of truth), compared to the massive version fragmentation of native apps on platforms like Android. Version Fragmentation
runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Today, they already include features like push notifications and background sync. In the future service workers will support other things like periodic sync or geofencing. The core features discussed here is the ability to intercept and handle network requests, including programmatically managing a cache of responses. What’s a Service Worker 15 SW in a nutshell In short, a service worker is an asynchronous background thread that takes control of all network requests in a page, acting as a proxy. “ ” ― Booking Blog
Works on HTTPS only, or localhost 1 2 3 4 Has controlled scopes Should be on same origin Not supported in Firefox, private mode Only One SW activated at a time 5 6 7 8 Shipped in Chrome, Firefox, and Opera In Development in Microsoft Edge Under Consideration in Safari, iOS Should be progressive 9 10 11 12 Doesn’t control origin page on first load Run on background, in a separate thread Doesn’t have access to page DOM Open tabs must be closed for old service workers to die, and new workers take effect 13 14 15 16 Use self.skipWaiting() with self.clients.claim() to skip waiting, and enforce the new SW Unregistering a SW doesn’t clear SW cache ...
your new PWA using Chrome Web Server via your localhost link http://127.0.0.1:8887 Visit your app localy You can access your app on the local network You can browse your new PWA using Chrome Web Server over the local network via this link http://192.168.1.2:8887 Ready to go This is a minimal PWA placeholder ready for development!