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
barrier, Just Use It! Low Friction Uses web technologies, HTML, JavaScript, and CSS Just Web Smooth navigations keep the experience silky smooth Fast With service workers at the heart Instant Loading Many PWA features still in labs, yet to come Shiny Future
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 ...
as well This codelab is focused on Progressive Web Apps. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste. Prerequisites What you'll need 34 Power on your laptop, and login to your account Laptop Download code samples from the provided Github repository Code Samples Latest version of Google Chrome browser is recommended Chrome 52+ Any text editor will be sufficient, don’t use word processors Text Editor Recommended but your own web server of choice will be OK Web Server For Chrome Basic Knowledge Notes Basic knowledge of HTML, CSS, JavaScript, and Chrome DevTools You’ll need a Google account to create a new Firebase Project Google Account Internet Connection Appropriate internet connection required for testing & deployment NodeJs is required for the deployment step, where you’ll install firebase cli tools NodeJS npm
- App-like - Fresh - Responsive - Linkable - Safe - Connectivity independent - Discoverable and installable Features What you'll learn - How to design and construct an app using the "app shell" method - How to make your app work offline - How to store data for use offline later Basic Knowledge HTML, CSS, JavaScript, and Chrome DevTools This codelab is focused on Progressive Web Apps. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.
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!
Ask yourself - What needs to be on screen immediately? - What other UI components are key to our app? - What supporting resources are needed for the app shell? For example images, JavaScript, styles, etc. Our Weather App Components - Header with a title, and add/refresh buttons - Container for forecast cards - A forecast card template - A dialog box for adding new cities - A loading indicator
omranic
hsawaji
asayamakk
falcon8823
cer
righttouch
seike460
tasshi
ivargrimstad
hideg
1024jp
javiergs
kneath
wjessup
moore
philnash
csswizardry
soudai
akosma
jakevdp
marcelosomers
paulrobertlloyd
trallard
keathley
![Twitter: Omranic Mobile: +201228160181 Email: [email protected] Website: https://omranic.com](https://files.speakerdeck.com/presentations/7ccc106666a14b0786fa0c75a127e142/slide_31.jpg){kind=link}
![Twitter: Omranic Mobile: +201228160181 Email: [email protected] Website: https://omranic.com](https://files.speakerdeck.com/presentations/7ccc106666a14b0786fa0c75a127e142/slide_48.jpg){kind=link}
