Progressive Web Apps

New Term

Google I/O 2016

https://www.youtube.com/watch?v=srdKq0DckXQ

Case

2016

Flipkart、Gmail、Inbox、AliExpress、Wikipedia、Flipboard、Booking

Still going

Google I/O 2017

https://www.youtube.com/watch?v=m-sCdS0sQO8

Context

WEB

NATIVE

Free

Magic

Context

Start Up Project

Market

Development costs

Context

First Contact

Download

Native App

Context

https://medium.com/javascript-scene/why-native-apps-really-are-doomed-native-apps-are-doomed-pt-2-e035b43170e9

Context

ex. Single Page Application

Heavy Javascript

Server rendering

Reason

Downside

Status

Data Only

Dev

First Download

SEO, SSR

PWA

A new way to deliver amazing user experiences on the web.

Close to native app

Checklist

Progressive

RWD

Offline

HTTPS

https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/

Google Checklist

Idenpendent URL

Cross Platfrom

Manifest

Core

Reliable

Fast

Engaging

Core

Reliable

Offline Support -> Service Work (HTTPS)

Core

Fast

Critical Render Path
App Shell (SW)
Content Optimize

Core

Engaging

Web App Manifest (Home screen)

Push notification

Manifest

Manifest

First meaningful paint

App(Application) Shell

感知效能 > 實際效能

Offline Support

Offline Support

Offline Support

https://ppt.baomitu.com/

Push Notification

Web App

Native App

Service Worker

What is SW?

The worker controls all your network requests as background scripts.

offline support
push notifications
background sync

Service Worker

in tech

Web Workers API

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

Service Worker

in tech

The Problem:
JavaScript Concurrency

non-blocking in node.js

Async, XHR, setTimeout

Service Worker

in tech

Service Worker

in tech


console.log('hello 1')

setTimeout(function() {
    console.log('hello 2')
}, 0)

console.log('hello 3')

Service Worker

in tech

跨越不同 Thread 溝通

[main] new
[main] work.postMessage 發送
[worker] onmessage
[worker] postMessage
[main] work.onmessage 收到回傳並處理

Service Worker

Cache Strategy

Cache Only
Cache First
Network Only
Network First
Fastest

 

Cache API

Service Worker

Cache Strategy

200 from disk

304 not modified

from service work

Service Worker

self.addEventListener("fetch", event => {
  event.respondWith(
    caches.open("v1").then(cache =>
      cache.match(event.request).then(
        response =>
          response ||
          fetch(event.request).then(response => {
            cache.put(event.request, response.clone());
            return response;
          })
      )
    )
  );
});

Basic Usage

Service Worker

sw-toolbox

sw-precache

Workbox

Service Worker

快取優化都是第2次以後

第 1 次呢？

Performance

Optimizing Content Efficiency

Critical Render Path

Server Responding time < 200ms

Critical Render Path

Critical Render Path

DOM

CSSOM

Redner Tee

Response

Layout

Paint

Critical Render Path

can't partial apply

CSS

Critical Render Path

render blocking resource

CSS

Critical Render Path

CSS

Critical Render Path

CSS

browser will preload 

but still blocked

Critical Render Path

CSS

Critical Render Path

CSS

https://github.com/addyosmani/critical

Critical Render Path

JavaScript

execution block on CSSOM

block DOM parse

Critical Render Path

JavaScript

Critical Render Path

JavaScript

Default

Async

Defer

Critical Render Path

Another Example

@font-face

It will be load until css match a element

Critical Render Path

font preload

Critical Render Path

font preload

<link rel=“preload” href=“/assets/myfont.woff” as=“font”>
Made with Slides.com