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
Let's play with PWA
Search
kkeeth
July 13, 2018
Technology
0
80
Let's play with PWA
kkeeth
July 13, 2018
Tweet
Share
More Decks by kkeeth
See All by kkeeth
とある EM の初めての育休からの学び
clown0082
1
1.6k
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
2
140
Visually experience the beauty of mathematics with p5.js
clown0082
1
2.9k
Rediscover the joy of coding with Creative Coding
clown0082
0
1.5k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
580
JavaScript × Mathematics go to Digital Art
clown0082
1
350
In-house study group at YUMEMI
clown0082
0
190
Playing Ionic Logo by p5.js
clown0082
0
250
Skills that employers recommend students to acquire
clown0082
1
280
Other Decks in Technology
See All in Technology
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
280
OPENLOGI Company Profile
hr01
0
60k
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
300
困難を「一般解」で解く
fujiwara3
8
2.3k
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.7k
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
330
完璧を捨てろ! “攻め”のQAがもたらすスピードと革新/20250306 Hiroki Hachisuka
shift_evolve
0
110
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
380
サバイバルモード下でのエンジニアリングマネジメント
konifar
21
7.3k
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
140
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
How to Ace a Technical Interview
jacobian
276
23k
Building an army of robots
kneath
303
45k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
We Have a Design System, Now What?
morganepeng
51
7.4k
Site-Speed That Sticks
csswizardry
4
420
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Done Done
chrislema
182
16k
Speed Design
sergeychernyshev
27
820
Transcript
Let's play with PWA Tech Do #5 k-kuwahara @kuwahara_jsri clown0082
Basic Information const my_info = { Name: ‘܂ݪਔ’, Home: ‘ෑ,
ౡ’, Interest: ‘όεέ, কع, ຊञ’, Workplace: ‘Yumemi, Inc.’, Skillset: ‘JS, Node.js, PHP, Ruby’ }
Communities collaborator translator staff staff
github.com/k-kuwahara github.com/k-kuwahara
Let’s start the today’s talk of PWA !!
Table of Contents • Lightly looking back on history •
What is PWA? • Let’s play with PWA
Lightly looking back on history
1991.8.6 HTML1 was born
image by: http://virtuallyfun.com/wordpress/category/win32s/
Primary Browser War After the release of IE, it is
open war. ɹɹˣ As a result, IE won.
In 2005, “Ajax” appeared. The word “web 2.0” is prevalent.
Secondary Browser War Each company developed and added its own
function to their browser. ɹɹˣ As a result, Chrome won.
mobile phones around this time ...
The goalden age of feature phone • Low performance •
Screen is small • Physical button • Less information • Not a web
2007.1.9 iPhone release !!
To smart phone heyday • Performance improvement • Touch panel
• Operability is much improved • Install apps freely image by: https://ja.wikipedia.org/wiki/IPhone
None
Responsive
The web became easier to see. But, still web first…
>
Rushed into the era of mobile first
Native Application ↓ Hybrid Application ↓ HTML5 Application
Mobile first is good, but UX has room for improvement.
⚡AMP (Accelerated Mobile Pages) PWA (Progressive Web Apps) For more
mobile first and UX
What is PWA?
–Pete LePage “Progressive Web Apps are experiences that combine the
best of the web and the best of apps.”
+ +
• Progressive • Responsive • Connectivity independent • App-like •
Fresh • Safe • Discoverable • Re-engageable • Installable • Linkable Specifications
PWA example APP
PWA example
Let’s play with PWA
⚠PWA operating environment⚠ • Android: Google Chrome ≧ 47 •
iOS: Safari ≧ 11.3 • PC: Google Chrome ≧ 67
Using Desktop Chrome 67 Access to: chrome://flags • App Banners:
Enabled • Enable PWA full code cache: Enabled • Desktop PWAs: Enabled • Desktop PWAs Link Capturing: Enabled
Sample Sites • Uber - https://m.uber.com/ • Twitter - https://mobile.twitter.com/home
• Trivago - https://www.trivago.jp/ • λϯϫʔΫ - https://townwork.net/ • ຊܦࡁ৽ฉ(PWA൛) - https://r.nikkei.com/ • Google Photos - https://photos.google.com
DEMO
Why do we need to HTTS?
Why HTTPS ? • A secure web is here to
stay https://blog.chromium.org/2018/02/a-secure-web-is- here-to-stay.html • Prefer Secure Origins For Powerful New Features http://www.chromium.org/Home/chromium-security/ prefer-secure-origins-for-powerful-new-features • HTTPS required https://developers.google.com/web/fundamentals/ primers/service-workers/#https
Served over HTTPS
Uninstall PWAs Access to: chrome://apps
Using Lighthouse (implemented in chrome) How to make it PWA?
See “Progressive Web App Checklist”. https://developers.google.com/web/progressive-web-apps/checklist How to make it
PWA?
How to make it PWA? Check the implementation status of
the function By Can I use
Let’s start PWA !!
References • ͡ΊͯͷϓϩάϨογϒΣϒΞϓϦ https://developers.google.com/web/fundamentals/codelabs/your-first- pwapp/?hl=ja • Your First Progressive Web
App https://codelabs.developers.google.com/codelabs/your-first-pwapp/ index.html?index=..%2F..%2Findex#0 • What is the good framework to build progressive web app? https://www.quora.com/What-is-the-good-framework-to-build- progressive-web-app
Thanks k-kuwahara @kuwahara_jsri clown0082