Nico Martin

Web- / Frontend Developer

@nic_o_martin
nicomartin.ch

Say Hello GmbH

@SayHelloGmbH
sayhello.ch

WEB

APP

Website

or

native App

87%

app share of time spent on mobile.

only 13% on mobile web.

comScore: The 2017 U.S. Mobile App Report

0

Number of apps 51%
of the Users install..

.. per month!

78%

of time spent is
in users' top 3 apps

comScore: The 2017 U.S. Mobile App Report

next gen. Web Apps

Fast

Integrated
Installable

Reliable
offline usage

Engaging
push notifications


"Progressive Web App"

manifest.json

<head>
	...
	<link rel="manifest" href="/manifest.json">
</head>
{
    name: "Meine App",
    short_name: "MeineApp",
    start_url: "./",
    description: "Meine erste Progressive Web App",
    theme_color: "#1d1d1b",
    background_color: "#ffffff",
    display: "standalone",
    lang: "",
    orientation: "any",
    icons: [
        {
            src: "/path/to/app-icon-512x512.png",
            type: "image/png",
            sizes: "512x512"
        }
    ],
}

manifest.json

serviceworker.js


Web

serviceworker.js


Web

serviceworker.js


Web


SW


Cache

The awesomeness of PWA

  • uses web standards
  • security (HTTPS)
  • installable (optional)
  • uses the full power of URL
  • works offline
  • push notifications
  • instant updates

App Shell Model

App Shell

index.html

../styles.css

../app.js

../img/logo.svg

../img/image.jpg

Content (Rest API)

https://myapp.com/posts/

https://myapp.com/posts/1/

https://myapp.com/page/2/

https://myapp.com/.../

 

What about "traditional" Websites?

What if we could use PWA as an "Add-On" enhancement?

What if we could bring PWA features to 25% of the web?



https://wordpress.org/plugins/progressive-wp/
@WordPressPWA

Browser Support

https://jakearchibald.github.io/isserviceworkerready/

Thank you!



nic_o_martin

nicomartin.ch

Nico Martin nic_o_martin