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
610
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
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
190
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
410
怖くない!はじめてのClaude Code
shinya337
0
320
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
2
6.2k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
一体いつからSRE NEXTがSREだけのカンファレンスだと錯覚していた? / When did you ever get the idea that SRE NEXT was a conference just for SREs?
vtryo
1
130
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
380
Lazy application authentication with Tailscale
bluehatbrit
0
140
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
190
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.5k
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
3.2k
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
160
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Making Projects Easy
brettharned
116
6.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Gamification - CAS2011
davidbonilla
81
5.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Faster Mobile Websites
deanohume
307
31k
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