Slides from Turku <3 Frontend talk at Taiste, where Joni Juup and Mikko Harju talked about progressive web apps, the differences for developing in the web and in the native mobile operating systems.

1. Progressive
Web Apps, Web and
Apps.
Turku Frontend - 14.12.2016

2. About the
speakers
Mikko Harju Joni Juup
Technical Director UX Designer
Over 15 years of development
experience in mobile and web.
Recently worked most with Clojure,
Python, C# and ClojureScript
Over 10 years of digital
design experience.
Works mostly with HTML,
CSS & JavaScript.

3. What are Progressive Web Apps (PWA)
• A web site, that you can install as an app on your phone
instantly. No App Stores, no versioning for different OS’s.
• Google is the main driving force behind enabling Web Apps
on Android mobile, meaning:
• offline support with service workers, push notifications
• better support for hardware interactions and phone specific things
• smart “install to homescreen” -banner
https://developers.google.com/web/progressive-web-apps/

4. So what is a service worker?
A service worker is a javascript enabled
background process, that essentially acts as
proxy server that sits between your web app,
and the browser and network.
It makes possible to cache things offline, send
push notifications and do background syncing.
https://developer.mozilla.org/en/docs/Web/API/Service_Worker_API https://serviceworke.rs/

5. Web Apps - what they
can and can’t do:
Save to homescreen
Push notifications (on Android)
Background processes (on Android)
Offline caching
Full screen experience at 60 fps
Geolocation
Touch Gestures
DeviceMotion access
WebAudio API (on Android)
WebSockets
App Icons
Camera Access (partial)
Full hardware access
Native platform integrations
Video recording (coming)
Google IO 2016 - What’s next for web: https://www.youtube.com/watch?v=bK6Ah68jEX8

6. Simple PWA demo
Go to: https://costner.taiste.fi
Best experience with new Android
devices, but works on iOS as well
(doesn’t have offline caching
there yet though).

7. Some simple things done in Costner
• Web app use enabled in manifest.json.
• Served on HTTPS - service workers won’t register
otherwise.
• HTML, Javascript and CSS are cached on your device via the
service worker, so Costner works even in airplane mode
(handy for counting lost money when internet fails)

8. When to use PWAs?

9. What are Progressive Web Apps great for?
• Data browsing and reading - services that fetch stuff online
for you to look at.
• Simple tools - like forms, counters, check-ins, orders.
• Targeting users on multiple platforms with one solution
(PWAs work on browsers - so pads & desktops are covered).
• MVP’s, getting things done fast and iterating and releasing
new versions, even multiple times a day.

10. Should it be a native app anyway?
Do you need to record videos, take a lot of photos?
Is it a critical tool that you need to use a lot as offline?
Does it involve a lot of integrations with other apps?
Is it something you want to sell on an App Store?
Complicated graphics and animation?
If nearly all of the boxes are empty, consider PWA!

11. Working with web apps compared to native apps
• PWA’s are inherently web pages with extra bells and
whistles – you can start prototyping by just doing what
you’ve always done.
• The steep learning curve for native app development is
worth it only if you really, really need those extra miles.
• The difference between native and web apps are in the
details – and those details are getting more and more subtle.

12. Thank you!
Go follow the speakers at Twitter: @mikharj @jonijuup