My #ProgressiveWebApps presentation is available online now  Use it, learn more, and be awesome  https://goo.gl/TbgI7d

1. Progressive Web Apps
GDG DevFest / Season 2016
1

2. omranic.com
Abdelrahman Omran
Rinvex Co-founder | Google Developer Expert | Software Architect
2
Work hard until you no longer have to
introduce yourself.“
”

3. omranic.com
Rinvex
Industry Specific Enterprise Solutions
3
Value, Reach, Impact
rinvex.com

4. omranic.com
We’re about to start an exciting tour together, so 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

5. omranic.com
Our Agenda
You should be excited about what’s coming!
5
PWA
Introduction
Service Worker
Introduction
Setup
Environment
Quick
Deployment
Codelab
Step-by-step

6. 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!

7. 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 ✨

8. PWA Introduction
What’s Progressive Web Apps and why it’s important?

9. 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

10. omranic.com
PWA Characteristics
Key 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

11. omranic.com
PWA Characteristics
Key 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

12. omranic.com
PWA Characteristics
Key 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

13. omranic.com
Some Facts
Industry 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

14. Service Worker Introduction
At the core of Progressive Web Apps comes Service Workers

15. 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

16. omranic.com
Service Worker Lifecycle
Events: Install, Activate, Fetch
16

17. omranic.com
Service Worker Lifecycle
Service Worker Install Event
17

18. omranic.com
Service Worker Lifecycle
Service Worker Install Event
18

19. omranic.com
Service Worker as a Proxy
Service Worker Request Interception
19

20. omranic.com
Service Worker Fetch Modes
Cache Only
20

21. omranic.com
Service Worker Fetch Modes
Network Only
21

22. omranic.com
Service Worker Fetch Modes
Cache, Falling Back To Network
22

23. omranic.com
Service Worker Fetch Modes
Network, Falling Back To Cache
23

24. omranic.com
Service Worker Fetch Modes
Stale While Revalidate
24

25. omranic.com
Service Worker Fetch Modes
Cache Then Network
25

26. omranic.com
Service Worker Fetch Modes
Cache & Network Race
26

27. omranic.com
Service Worker Fetch Modes
Generic Fallback
27

28. omranic.com
Service Worker Push Message
SW Push Notification Flow
28

29. omranic.com
Service Worker Notes
Important 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
...

30. Questions?
Do you’ve any question
30

31. 31
Abdelrahman Omran
THANK
YOU

32. Twitter: Omranic
Mobile: +201228160181
Email: me@omranic.com
Website: https://omranic.com

33. Setup Environment
Get ready for the journey, prepare your environment

34. 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.
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

35. omranic.com
Weather Web App
Using 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 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.

36. omranic.com
Codelab
Based on Google’s Codelab
36
goo.gl/AVsL6p

37. omranic.com
Setup
1. Download Source Code
37
goo.gl/kTLicS

38. omranic.com
Setup
2. Install web server
38
goo.gl/Jd8IAC

39. omranic.com
Setup
3. Run web server
39
1
2
3
4
5

40. omranic.com
Setup
4. 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 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!

41. omranic.com
Architect your App Shell
What is the app shell?
41

42. omranic.com
Architect your App Shell
Design 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

43. Quick Project Code Review
Let’s review the basic PWA we’ll work on

44. Codelab: 1. Start with a fast first load
goo.gl/JSwvvn

45. Codelab: 2. Pre-cache the App Shell
goo.gl/2CizGK

46. Codelab: 3. Cache the forecast data
goo.gl/uly6OD

47. Codelab: 4. Native integration & Deployment
goo.gl/u9u6xM

48. 48
Abdelrahman Omran
THANK
YOU

49. Twitter: Omranic
Mobile: +201228160181
Email: me@omranic.com
Website: https://omranic.com

50. 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 Trademarks
The 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. 51