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
20
とある EM の初めての育休からの学び
clown0082
1
3.8k
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
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
120
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
170
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
200
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
240
AIでテストプロセス自動化に挑戦する
sakatakazunori
1
530
TLSから見るSREの未来
atpons
2
310
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
420
shake-upを科学する
rsakata
7
1k
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4.4k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
230
An introduction to Claude Code SDK
choplin
2
1.1k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Side Projects
sachag
455
42k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Why Our Code Smells
bkeepers
PRO
337
57k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
Bash Introduction
62gerente
613
210k
Statistics for Hackers
jakevdp
799
220k
Code Reviewing Like a Champion
maltzj
524
40k
Designing Experiences People Love
moore
142
24k
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