Updating mobile web pages!but why

Salim KAYABAŞI@salimkayabasi+SalimKAYABAŞI

Mobile first does not mean

native only

Mobile-friendly

Offering native appor

Web app

Why web is good?

Indexable

Linkable

Secure

Updatable

Do we need native app?

More platforms, more problems

25average apps used

by a user per month

100+sites visited per

month by Chrome on Android user

Going Native?

❏ Performance❏ Offline access❏ Engagement❏ Capabilities

HTML5WebComponents

❏ templates❏ shadow dom❏ html imports❏ custom elements

Should we use hybrid apps?

Ionic framework

Cordova

in-app browsing

So let’s see what is the

Progressive Web App

● Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.

● Responsive - Fit any form factor: desktop, mobile, tablet, or whatever is next.

● Connectivity independent - Enhanced with service workers to work offline or on low quality networks.

● App-like - Feel like an app to the user with app-style interactions and navigation because it's built on the app shell model.

● Fresh - Always up-to-date thanks to the service worker update process.

● Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.

● Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.

● Re-engageable - Make re-engagement easy through features like push notifications.

● Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.

● Linkable - Easily share via URL and not require complex installation.

Offline

regular web request

if any problem on server

use a service worker

with cache

works offline

“There is an element for that”

polymer team

Push Notifications

you have a service worker

register to push server

talk with app server

send push to sw

yay!

Quick Demo

Add to homescreenIs it new bookmark?

hey! we already have this feature...

but?

http://www.youtube.com/watch?v=iK-zro8e2Ok

http://www.youtube.com/watch?v=weaNw_S7E4w

http://www.youtube.com/watch?v=ysxB_PXFImE

Thank you!Questions?

http://bit.ly/be-progressive

@salimkayabasi+SalimKAYABAŞI

Don’t forget that this slides were presented on web