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
68
Let's play with PWA
kkeeth
July 13, 2018
Tweet
Share
More Decks by kkeeth
See All by kkeeth
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
1
46
Visually experience the beauty of mathematics with p5.js
clown0082
0
2.2k
Rediscover the joy of coding with Creative Coding
clown0082
0
1k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
470
JavaScript × Mathematics go to Digital Art
clown0082
1
230
In-house study group at YUMEMI
clown0082
0
110
Playing Ionic Logo by p5.js
clown0082
0
140
Skills that employers recommend students to acquire
clown0082
0
200
Walking through the source code of an OSS Library(ESLint))
clown0082
0
290
Other Decks in Technology
See All in Technology
オーナーシップを持つ領域を明確にする
konifar
11
2.3k
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
240
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
2
320
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM and Prompt Engineering and Building Tutors
ks91
PRO
0
220
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.5k
社内勉強会運営のコツ
senoo
6
1.1k
Databricks における 『MLOps』
databricksjapan
2
140
Signals Unleashed: The Full Guide
rainerhahnekamp
0
360
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
150
SREとその組織類型
tatsuo48
8
1.5k
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
2
430
[PlatformCon 24] Platform Orchestrators: The Missing Middle of Internal Developer Platforms?
danielbryantuk
1
180
Featured
See All Featured
Bash Introduction
62gerente
604
210k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Producing Creativity
orderedlist
PRO
336
39k
Code Reviewing Like a Champion
maltzj
513
39k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
Building Applications with DynamoDB
mza
88
5.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
13
1.5k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
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