progressive web apps / gdg devfest - season 2016
TRANSCRIPT
Progressive Web AppsGDG DevFest / Season 2016
1
omranic.com
Abdelrahman OmranRinvex Co-founder | Google Developer Expert | Software Architect
2
Work hard until you no longer have to introduce yourself.“
”
omranic.com
RinvexIndustry Specific Enterprise Solutions
3
Value, Reach, Impactrinvex.com
omranic.com
We’re about to start an exciting tour together, so get your mind clear and ready for the journey.
Our GoalsWe 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 ReadyAwesome 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
omranic.com
Our AgendaYou should be excited about what’s coming!
5
PWA Introduction
Service Worker Introduction
Setup Environment
Quick Deployment
Codelab Step-by-step
omranic.com
Your tweet, facebook, or G+ post must contain the 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!
omranic.com
Follow the instructor step-by-step from start to end, and 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 ✨
PWA IntroductionWhat’s Progressive Web Apps and why it’s important?
omranic.com
Progressive Web Apps are experiences that combine the best 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
omranic.com
PWA CharacteristicsKey features of PWA
10
Progressive enhancement
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
omranic.com
PWA CharacteristicsKey features of PWA
11
Offline-first & 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
omranic.com
PWA CharacteristicsKey features of PWA
12
Zero steps 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
omranic.com
Some FactsIndustry Analysis
13
A study has shown 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
Service Worker IntroductionAt the core of Progressive Web Apps comes Service Workers
omranic.com
A service worker is a script that your browser 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
omranic.com
Service Worker LifecycleEvents: Install, Activate, Fetch
16
omranic.com
Service Worker LifecycleService Worker Install Event
17
omranic.com
Service Worker LifecycleService Worker Install Event
18
omranic.com
Service Worker as a ProxyService Worker Request Interception
19
omranic.com
Service Worker Fetch ModesCache Only
20
omranic.com
Service Worker Fetch ModesNetwork Only
21
omranic.com
Service Worker Fetch ModesCache, Falling Back To Network
22
omranic.com
Service Worker Fetch ModesNetwork, Falling Back To Cache
23
omranic.com
Service Worker Fetch ModesStale While Revalidate
24
omranic.com
Service Worker Fetch ModesCache Then Network
25
omranic.com
Service Worker Fetch ModesCache & Network Race
26
omranic.com
Service Worker Fetch ModesGeneric Fallback
27
omranic.com
Service Worker Push MessageSW Push Notification Flow
28
omranic.com
Service Worker NotesImportant point you must know
29
Works on HTTPS only, or localhost1
2
3
4
Has controlled scopes
Should be on same origin
Not supported in Firefox, private mode
Only One SW activated at a time5
6
7
8
Shipped in Chrome, Firefox, and Opera
In Development in Microsoft Edge
Under Consideration in Safari, iOS
Should be progressive9
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 effect13
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
...
Questions?Do you’ve any question
30
31
Abdelrahman Omran
THANKYOU
Setup EnvironmentGet ready for the journey, prepare your environment
omranic.com
Alongside NodeJs, npm is required for the deployment
step 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.
PrerequisitesWhat 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 ConnectionAppropriate internet
connection required for testing & deployment
NodeJs is required for the deployment step, where
you’ll install firebase cli tools
NodeJS
npm
omranic.com
Weather Web AppUsing PWA techniques
35
- Progressive - 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 KnowledgeHTML, CSS, JavaScript, and Chrome DevToolsThis 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.
omranic.com
CodelabBased on Google’s Codelab
36
goo.gl/AVsL6p
omranic.com
Setup1. Download Source Code
37
goo.gl/kTLicS
omranic.com
Setup2. Install web server
38
goo.gl/Jd8IAC
omranic.com
Setup3. Run web server
39
1
2
34
5
omranic.com
Setup4. Test the ready environment
40
Browse to 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 networkYou can browse your new PWA using Chrome Web Server over the local network via this linkhttp://192.168.1.2:8887
Ready to goThis is a minimal PWA placeholder ready for development!
omranic.com
Architect your App ShellWhat is the app shell?
41
omranic.com
Architect your App ShellDesign the App Shell
42
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
Quick Project Code ReviewLet’s review the basic PWA we’ll work on
Codelab: 1. Start with a fast first load
goo.gl/JSwvvn
Codelab: 2. Pre-cache the App Shell
goo.gl/2CizGK
Codelab: 3. Cache the forecast data
goo.gl/uly6OD
Codelab: 4. Native integration & Deployment
goo.gl/u9u6xM
48
Abdelrahman Omran
THANKYOU
omranic.com
Credits 50
Microsoft® and PowerPoint® are trademarks or registered trademarks of Microsoft Corporation.
© 2016 Google Inc, used with permission. Google and the Google logo are registered trademarks of Google Inc.
Google Drive® is a registered trademark of Google Inc.
Photos in this template were downloaded from pixabay.com and freepik.com. Attribution is located in each slide notes and the Credits slide.
The Template provides a theme with four basic colors:
The backgrounds were created by Free Google Slides Templates.
Vectorial Shapes in this Template were created by Free Google Slides Templates and downloaded from pexels.com and unsplash.com.
Icons in this Template are part of Google® Material Icons and 1001freedownloads.com.
Shapes & Icons Backgrounds Images
Fonts Color Palette TrademarksThe fonts used in this template are taken from Google fonts. ( Dosis,Open Sans )You can download the fonts from the following url: https://www.google.com/fonts/ #93c47dff #0097a7ff
#78909cff #eeeeeeff
#f7b600ff #00ce00e3
#de445eff #000000ff
51