Presented during DevCon Summit 2016 #DevFutureForward on November 5-6, 2016 at SMX Convention Center Manila, Mall of Asia Complex, Pasay City.

1. Startup notes:
1. Slides URL: cardistry-arena.com/slides.php
2. You can turn on your mobile data on for some
progressive web apps sites that we will visit during the
presentation.
Note: Please unblock the notifications temporarily.

2. Progressive Web Apps

3. Survey
If you’re going to use Facebook, Gmail or Google maps in your smartphone, which
step will you use?
1. Go to chrome, then type in
the URL bar facebook.com
or youtube.com
(Mobile Web)
2. Tap in the Icon in your
homescreen
(Native)

4. Mobile Web Vs. Native Apps

6. What is Progressive Web Apps?
Progressive Web Apps (PWA) is a new life-cycle model that
combines most of the features of web apps with the benefits
of mobile apps.
Its main features are instant loading, offline mode, cache
control and push notifications.

7. Who’s using this?
Results:
● Users time on site with Flipkart
lite vs. previous mobile
experience: 3.5 minutes vs 70
seconds.
● 40% higher re-engagement rate
● 70% greater conversion rate
among those arriving via Add to
Homescreen
● 3x lower data usage
India’s largest e-commerce site

8. Who’s using this?
Almost all of the top visited sites are using it for their Push
Notification.

9. Skills needed
Javascript is the basic skill that you need
for making Progressive Web Apps. Here
are the libraries/concepts that helps us
make PWAs.
● JSON
● Javascript Promises (doesn’t have to
be an expert)
● Gulp.js (for SW-precache and
SW-toolbox)
● SW-precache
● SW-toolbox

10. Resources
Service worker
- A javascript file that is stored on the user’s browser and runs in the
background. It intercepts with the network request made by the web app.
Url sample: chrome://serviceworker-internals
Installation:

11. Resources
Manifest.json
- A json file that stores information that will be used by the service worker.
Url sample:
https://devcon.cardistry-arena.com/devcon/manifest.json
HTTPS
- Progressive Web apps requires HTTPS for security.
- http://localhost is allowed for development purposes

12. Caching
Strategies
● Network First
● Cache First
● Fastest
● Cache Only
● Network Only

13. Cache First
Credits to: https://jakearchibald.com/2014/offline-cookbook

14. Cache First
Credits to: https://jakearchibald.com/2014/offline-cookbook
Ideal For
- Newspaper articles
- Social media Timelines
- Anything you want that updates frequently

15. Cache First Pseudo Code without SW-Toolbox
Credits to: https://jakearchibald.com/2014/offline-cookbook

16. Cache First Pseudo Code with SW-Precache

17. Network First
Credits to: https://jakearchibald.com/2014/offline-cookbook

18. Network First Pseudo Code With Sw-precache

19. Fastest
Credits to: https://jakearchibald.com/2014/offline-cookbook

20. Fastest Pseudo Code without SW-precache
Credits to: https://jakearchibald.com/2014/offline-cookbook

21. Fastest Pseudo Code with SW-precache

22. Cache only

23. Network Only

24. Push
Notifications

25. This is what a Push Notification looks like
(In Desktop) (In Mobile)

26. Requirements to make a dynamic push notification?
1. Get your server and sender key
- Go to firebase
- Create a project
- Go to project settings (Gear icon on the upper left beside project name)
- Choose Cloud Messaging
- Under the Project Credentials, get the server and sender key
2. Add the sender id to your manifest.json

27. Requirements to make a dynamic push notification?
3. Add the server-key to your curl script as Authorization:.

28. Requirements to make a dynamic push notification?
4. Add a push listener to you service-worker.js

29. Requirements to make a dynamic push notification?
5. Do your installation script for service-worker in your js that is accessible in your DOM

30. MAKING IT WORK

31. Making it work
What’s happening in the background?
When you click yes, it registers the sw.js
(service-worker.js) in the browser and sends
an ajax call to save the subscription_id in the
subscriptions table.

32. Making it work
What’s happening in the background?
When you click send, the title, body, url and the
hidden subscription_id will be passed to the
server and and save it to the notifications table.
After that, the curl request will be executed. This
will trigger the push listener in the sw.js.
“fetch('php_actions/notification_get_me..” will
get the title, body, url and subscription_id that
you saved earlier by getting the last data it gets
when it matches the subscription_id.

33. Making it work
What’s happening in the background?
Clicking this will open a new tab, triggered by the
notificationclick listener.

34. Problems Encountered
1. Easy to have errors on multiple tabs.
2. Stackoverflow is limited for PWA.
3. Service worker is supported in most browsers but doesn’t have full support on all
functionalities.
4. Service worker listener to push notifications has a much shorter lifetime compared
to native apps.

35. Thanks for Listening
Millicent Convento
Email: mjmconvento@gmail.com
Github Username: mjmconvento