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

Turku

Embed Size (px)

Citation preview

Progressive Web Apps, Web and Apps.

Turku Frontend - 14.12.2016

About the speakers

Mikko Harju Joni JuupTechnical 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.

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/

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/

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

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).

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)

When to use PWAs?

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.

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!

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.

Thank you!

Go follow the speakers at Twitter: @mikharj @jonijuup