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
64
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
630
Introduction to LINE Messaging API
anop72
0
41
Android Support Library
anop72
0
58
Other Decks in Programming
See All in Programming
現場で役立つモデリング 超入門
masuda220
PRO
15
3.1k
受け取る人から提供する人になるということ
little_rubyist
0
180
イベント駆動で成長して委員会
happymana
1
270
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.1k
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
440
ヤプリ新卒SREの オンボーディング
masaki12
0
110
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
4
2k
C#/.NETのこれまでのふりかえり
tomokusaba
1
180
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
2k
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
420
Better Code Design in PHP
afilina
PRO
0
110
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
Featured
See All Featured
Being A Developer After 40
akosma
86
590k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Documentation Writing (for coders)
carmenintech
65
4.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
505
140k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Six Lessons from altMBA
skipperchong
26
3.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Automating Front-end Workflow
addyosmani
1366
200k
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