The slides from Kevin Farrugia's presentation for MaltaJS on Progressive Web Apps. Date: 05/03/2016

1. An Introduction to
Progressive Web Apps
by Kevin Farrugia

2. Kevin Farrugia
Co-founder at Incredible Web
I am a software engineer with expertise in web technologies and a proud
advocate of Progressive Web Applications. I am motivated to share my
knowledge of PWAs with the aspiration to contribute in bringing the next 1
billion users online.
Who am I?
Author for Smashing Magazine https://www.smashingmagazine.com/2016/08/a-beginners-
guide-to-progressive-web-apps/
Author of Building Progressive Web Apps (May 2017, Packt Publishing)

3. “Progressive web apps are ordinary mobile-
friendly web applications that may be
progressively enhanced into native-like
applications through the modern browser.”

4. A Brief History
“You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the
iPhone today”
- Taken from Walter Isaacson’s biography of Steve Jobs
iPhone
June 2007
SDK (later to
become the
App Store) is
announced
Oct 2007
App Store
July 2008
More than two
million mobile
apps on the
AppStore
June 2016

5. Mobile Friendly Applications
At it’s core, a PWA is little more than an ordinary website; composed of HTML, CSS & JavaScript.
Source: Stack Overflow Developer Survey 2017

6. Native App Funnel
Source: http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
“In a consumer mobile app, every step you make a user perform before they get value out of your app will cost you 20% of users.

7. Poor User Experience
Encouraging users to use the native app could seriously hinder the web user experience.

8. Progressive Enhancement
// how not to use JavaScript...
<a href="javascript:location.setUrl('/my-route')">My Route</a>
// ...don't do this either
<a href="#" onclick="location.setUrl('/my-route')">My Route</a>
A website must be built in a structured-layered approach, with rock-solid HTML & content and enhancements added to improve the
user’s experience.

9. Native Features
The most exciting aspect of a PWA is definitely the native-like user experience and features. A progressive web app is able to work
offline, receive push notifications and should be optimized to work flawlessly on mobile devices.

10. Properties of a PWA
Progressive
Responsive
Connectivity-independent
App-like
Fresh
Safe
Installable
Discoverable
Re-engageable
Linkable

11. App-Shell Model
The “app-shell” could be compared to the code you would publish to the app store if you were building a native app.
By correctly applying the app-shell architecture (together with service workers) you are able to achieve:
Improved Performance
Offline Support
Reduced Data Usage

12. Service Workers
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.
Requires HTTPS
Web Worker

13. Web Application Manifest
{
"lang": "en",
"dir": "ltr",
"name": "Super Racer 2000",
"description": "The ultimate futuristic racing game from the
future!",
"short_name": "Racer2K",
"icons": [{
"src": "icon/lowres.webp",
"sizes": "64x64",
"type": "image/webp"
},{
"src": "icon/lowres.png",
"sizes": "64x64"
}, {
"src": "icon/hd_hi",
"sizes": "128x128"
}],
"scope": "/racer/",
"start_url": "/racer/start.html",
"display": "fullscreen",
"orientation": "landscape",
"theme_color": "aliceblue",
"background_color": "red"
}

14. Let’s Code...

15. Conclusion
So, should I build a PWA or a native app?

16. PWA First
Build PWA First
Progressive web apps aim to combine the advantages of both, providing both a low friction of distribution and a host of features that
improve user-engagement; with FlipKart almost reaching native app engagement levels and tripling time-on-site with their progressive
web app.

17. Learn More
Source:
https://github.com/IncredibleWeb/MaltaJS
Technologies:
Push API
IndexedDB
Resources:
https://github.com/GoogleChrome/lighthouse
https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
https://developers.google.com/web/progressive-web-apps/checklist

18. incredible-web.com
Incredible Web Ltd.
Kevin Farrugia
kevin.farrugia@incredible-web.com
+356 99218499
Shaun Grech
shaun.grech@incredible-web.com
+356 79886164