PWAs:�Web finally �takes over��
Hello!
I am Mashhood Rastgar
2
1.
What is a
Progressive Web App?
3
PWAs: Rules Of Engagement
4
2.
Why should I build a
Progressive Web App?
5
Let’s see...
Faster to download
Your average native app is at least 20MB to download. With PWAs the focus is on size and lazy loading so your initial package is very small.
Push Notifications
Target your users like you do with native apps - Android and iOS will handle push notifications from the users in exactly the same way.
Ship quickly
(and often!) No doubt a big big advantage if we remove the time to build and submit your app to the app store.
No App Store!
Ever shipped a build and got rejected? Not any more. You can build whatever you like and ship whenever you like.
Cross platform
PWAs are supported across Android and iOS so you just need to be mobile optimized and you are good to go!
Installable
Yes, you can push your PWA right on the home screen! And configure your icons and app colors using the manifest.
6
Are ServiceWorkers
ready for prime time?
7
All major browser have basic support
Which means we can start building!
8
3.
But is anybody using Progressive Web Apps?
9
Twitter Lite
Twitter launched their whole app as an installable PWA and were able to bring down their render time by 50% and increased overall engagement
Place your screenshot here
Flipkart Lite
Flipkart lite was way more popular in India due to its light- weight and small size. With Push Notifications, they got better engagement, more sales and repeat customers.
Place your screenshot here
Tinder
This experiment based on React, React Router and Webpack has reduce Tinder’s loading time by 50%. Repeat visits and over user acitivity has increased dramatically on this version of their app.
Place your screenshot here
4.
How do I test if my PWA meets all requirements?
13
Lighthouse
Tool by the chrome dev team to give insights into your app - right in your browser!
14
This is just the tip of the iceberg!
PWAs are also supported natively by frameworks like React and Angular!
Is this the end of native mobile app development?�(most probably not)
Thanks!
Any questions?
You can ask on:
mashhoodr@recurship.com
slides: http://bit.ly/devfestpwa
16
17
Instructions for use
18
EDIT IN GOOGLE SLIDES
Click on the button under the presentation preview that says "Use as Google Slides Theme".
You will get a copy of this document on your Google Drive and will be able to edit, add or delete slides.
You have to be signed in to your Google account.
EDIT IN POWERPOINT®
Click on the button under the presentation preview that says "Download as PowerPoint template". You will get a .pptx file that you can edit in PowerPoint.
Remember to download and install the fonts used in this presentation (you’ll find the links to the font files needed in the Presentation design slide)
More info on how to use this template at www.slidescarnival.com/help-use-presentation-template
This template is free to use under Creative Commons Attribution license. You can keep the Credits slide or mention SlidesCarnival and other resources used in a slide footer.
Quotations are commonly printed as a means of inspiration and to invoke philosophical thoughts from the reader.
19
“
This is a slide title
Your audience will listen to you or read the content, but won’t do both.
20
Big concept
Bring the attention of your audience over a key concept using icons or illustrations
21
You can also split your content
White
Is the color of milk and fresh snow, the color produced by the combination of all the colors of the visible spectrum.
Black
Is the color of coal, ebony, and of outer space. It is the darkest color, the result of the absence of or complete absorption of light.
22
In two or three columns
Yellow
Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange.
Blue
Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum.
Red
Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage.
23
A picture is worth a thousand words
A complex idea can be conveyed with just a single still image, namely making it possible to absorb large amounts of data quickly.
24
Use charts to explain your ideas
25
Gray
White
Black
And tables to compare data
26
| A | B | C |
Yellow | 10 | 20 | 7 |
Blue | 30 | 15 | 10 |
Orange | 5 | 24 | 16 |
Maps
27
our office
89,526,124
Whoa! That’s a big number, aren’t you proud?
28
89,526,124$
100%
185,244 users
That’s a lot of money
Total success!
And a lot of users
29
Our process is easy
30
first
second
last
Let’s review some concepts
Yellow
Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange.
Blue
Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum.
Red
Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage.
Yellow
Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange.
Blue
Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum.
Red
Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage.
31
You can copy&paste graphs from Google Sheets
32
Android project
Show and explain your web, app or software projects using these gadget templates.
33
Place your screenshot here
iPhone project
Show and explain your web, app or software projects using these gadget templates.
34
Place your screenshot here
Tablet project
Show and explain your web, app or software projects using these gadget templates.
35
Place your screenshot here
Desktop project
Show and explain your web, app or software projects using these gadget templates.
36
Place your screenshot here
Credits
Special thanks to all the people who made and released these awesome resources for free:
37
Presentation design
This presentations uses the following typographies and colors:
You can download the fonts on these pages:
https://www.fontsquirrel.com/fonts/roboto-slab
https://www.fontsquirrel.com/fonts/source-sans-pro
38
You don’t need to keep this slide in your presentation. It’s only here to serve you as a design guide if you need to create new slides or download the fonts to edit the presentation in PowerPoint®
39
SlidesCarnival icons are editable shapes.
This means that you can:
Isn’t that nice? :)
Examples:
40
Now you can use any emoji as an icon!
And of course it resizes without losing quality and you can change the color.
How? Follow Google instructions https://twitter.com/googledocs/status/730087240156643328
✋👆👉👍👤👦👧👨👩👪💃🏃💑❤😂😉😋😒😭👶😸🐟🍒🍔💣📌📖🔨🎃🎈🎨🏈🏰🌏🔌🔑 and many more...
😉