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