Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Progressive Web App
Search
anop72
October 12, 2016
Programming
1
66
Progressive Web App
Overview Progressive Web App
anop72
October 12, 2016
Tweet
Share
More Decks by anop72
See All by anop72
Create LINE Rich Menu via Rich Menu Maker
anop72
0
640
Introduction to LINE Messaging API
anop72
0
42
Android Support Library
anop72
0
58
Other Decks in Programming
See All in Programming
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.2k
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
250
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.8k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
Contemporary Test Cases
maaretp
0
140
Better Code Design in PHP
afilina
PRO
0
130
みんなでプロポーザルを書いてみた
yuriko1211
0
280
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
610
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
Featured
See All Featured
Building Applications with DynamoDB
mza
90
6.1k
Code Review Best Practice
trishagee
64
17k
RailsConf 2023
tenderlove
29
900
Facilitating Awesome Meetings
lara
50
6.1k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
It's Worth the Effort
3n
183
27k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Transcript
Progressive Web App
None
“Progressive Web App (PWA) is a term used to denote
a new software development methodology. Unlike traditional applications, Progressive Web App can be seen as an evolving hybrid of regular web pages (or websites) and a mobile application.” Wikipedia
Alex Russell @ O'Reilly Fluent Conference in San Francisco 2016
https://nolanlawson.github.io/pwas-2016-05/#/6
https://www.youtube.com/watch?v=9Jef9IluQw0
Half of U.S. smartphone users download zero apps per month
http://www.recode.net/2016/9/16/12933780/average-app-downloads-per-month-comscore
PWA Keys • Reliable performance • Push notification • Home
screen icon metadata
Service Worker https://codelabs.developers.google.com/codelabs/polymer-offline-weather/img/1fbdd59d923c44cb.png
SW Strategies • Fastest • Network first • Cache first
• Cache only • Network only
Application Shell architecture https://developers.google.com/web/fundamentals/architecture/app-shell
https://developer.mozilla.org/en-US/docs/WebAPI
https://developer.mozilla.org/en/docs/Web/API/Push_API
caniuse.com
Manifest { "name": "Hello Mobile", "short_name": "Hello Mobile", "icons": [
{ "src": "/icons/android-chrome-48x48.png", "sizes": "48x48", "type": "image/png", "density": 1 }, { "src": "/icons/android-chrome-72x72.png", "sizes": "72x72", "type": "image/png", "density": 1.5 }, { "src": "/icons/android-chrome-96x96.png", "sizes": "96x96", "type": "image/png", "density": 2 } ], "theme_color": "#000000", "background_color": "#e0e0e0", "start_url": "/index.html", "display": "standalone", "orientation": "portrait" }
Characteristics • Progressive • Responsive • Connectivity independent • App-like
• Fresh • Safe • Discoverable • Re-engageable • Installable • Linkable
None
Thank you Champ Annop @anop72 Android Evangelist, Coder