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
84
Let's play with PWA
kkeeth
July 13, 2018
Tweet
Share
More Decks by kkeeth
See All by kkeeth
Programming to play with p5.js
clown0082
0
18
とある EM の初めての育休からの学び
clown0082
1
3.7k
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
2
170
Visually experience the beauty of mathematics with p5.js
clown0082
1
3k
Rediscover the joy of coding with Creative Coding
clown0082
0
1.6k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
620
JavaScript × Mathematics go to Digital Art
clown0082
1
390
In-house study group at YUMEMI
clown0082
0
210
Playing Ionic Logo by p5.js
clown0082
0
280
Other Decks in Technology
See All in Technology
AWS認定を取る中で感じたこと
siromi
1
160
敢えて生成AIを使わないマネジメント業務
kzkmaeda
1
300
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
500
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
3
3.3k
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
150
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
Model Mondays S2E03: SLMs & Reasoning
nitya
0
330
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
320
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
800
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
180
ビギナーであり続ける/beginning
ikuodanaka
3
710
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
430
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
What's in a price? How to price your products and services
michaelherold
246
12k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Speed Design
sergeychernyshev
32
1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Raft: Consensus for Rubyists
vanstee
140
7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Rails Girls Zürich Keynote
gr2m
94
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Facilitating Awesome Meetings
lara
54
6.4k
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