PWA 概念

Tags
webpwa
Created
Jun 20, 2016 2:45 AM

https://web.dev/learn/pwa

https://web.dev/fugu-status/

Progressive web apps

image

Discoverable

Identifiable as applications, findable by search engines.

image

Installable

Available on the device, on users' home screens — without the hassle of an app store.

可安装,Web App Manifest

image

Linkable

Easily shareable via URLs, without requiring complex installation.

image

Network independent

Works offline or on low quality networks.

Using service workersUsing IndexedDBUsing the Web Storage APIInstant Loading Web Apps with An Application Shell Architecture

image

Progressive

Works for every user, regardless of browser choice.

// 对兼容性启用渐进增强

image

Re-engageable

Makes user engagement easy by drawing attention, even when users aren't using their devices.

让用户重新回到 WebApp, 通过 sw, push, notification

image

Responsive

Fits any form factor: desktop, mobile, tablet, or whatever comes next.

Media queries(希望 Element queries,应用于web组件)@viewport/viewport meta tagFlexbox

image

Safe

Delivery mechanism prevents snooping and ensures content hasn’t been tampered with.

HTTPS(HTTP2/3 弥补速度慢的问题)

SuperMade with Super