Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
PWA ICS 30 5 20 Web Ionic Meetup Tokyo #4 #ionic_jp
(Yasunobu Ikeda) ICS / @clockmaker
PWA Progressive Web Apps 
 Google 2015 PWA Google Trends 2017
UI PWA
(App Store) 


 モバイルアプリ 105MB Twitter Lite 2MB
Twitter 1 105MB × 4 = 420MB/
Progressive Web Apps Checklist Progressive Web App Checklist https://developers.google.com/web/progressive-web-apps/checkl...
HTTPS 3G Progressive Web Apps Checklist Progressive Web App Checklist https://developers.google.com/web/progressive-web-ap...
Lighthouse PWA Lighthouse https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
PWA API iOS PWA PWA
Service Worker JavaScript Service Worker Service Worker
iOS 11.3 Safari 11.1 Service Worker iOS Safari PWA Safari 11.1 https://developer.apple.com/library/content/releasenotes/Ge...
Service Worker 
 iOS Safari Service Worker
Web App Manifest
Android Chrome 
 
 Web App Manifest
Web App Manifest Sevice Worker fetch
iOS Safari 11.1 - Web App Manifest Safari Web App Manifest PWA
<meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="icon.png">
<meta name="apple-mobile-web-app-capable" content="yes"> Web App Manifest location.href = "" a <link rel="apple-touch-icon...
Safari PWA
ICS MEDIA https://ics.media/ https://ics-creative.github.io/project-megurogawa-river/ Color Create https://ics-creative.gi...
PWA Service Worker Web App Manifest
Service Worker
Service Worker
Service Worker Caching Files with Service Worker | Web | Google Developers 
 https://developers.google.com/web/ilt/pwa/cac...
Google Analytics 
 GET

 PWA

 

viewport (350ms)
PWA

 PWA
Chrome PWA
Windows Store PWA Window Store
PWA Web App Manifest Service Worker &
Twitter ICS ikeda@ics-web.jp @clockmaker Copyright 2018 ICS INC. All rights reserved.
クリエイティブの視点から挑戦するPWA
クリエイティブの視点から挑戦するPWA
クリエイティブの視点から挑戦するPWA
クリエイティブの視点から挑戦するPWA
クリエイティブの視点から挑戦するPWA
クリエイティブの視点から挑戦するPWA
クリエイティブの視点から挑戦するPWA
クリエイティブの視点から挑戦するPWA
Upcoming SlideShare
Loading in …5
×

クリエイティブの視点から挑戦するPWA

250 views

Published on

平成30年5月20日に開催された勉強会「Webのこれからを語ろう Ionic Meetup Tokyo #4」で発表した資料です。

Published in: Engineering
no profile picture user

  • Be the first to comment

  • Be the first to like this

クリエイティブの視点から挑戦するPWA

  1. 1. PWA ICS 30 5 20 Web Ionic Meetup Tokyo #4 #ionic_jp
  2. 2. (Yasunobu Ikeda) ICS / @clockmaker
  3. 3. PWA Progressive Web Apps 
 Google 2015 PWA Google Trends 2017
  4. 4. UI PWA
  5. 5. (App Store) 

  6. 6. 
 モバイルアプリ 105MB Twitter Lite 2MB
  7. 7. Twitter 1 105MB × 4 = 420MB/
  8. 8. Progressive Web Apps Checklist Progressive Web App Checklist https://developers.google.com/web/progressive-web-apps/checklist
  9. 9. HTTPS 3G Progressive Web Apps Checklist Progressive Web App Checklist https://developers.google.com/web/progressive-web-apps/checklist
  10. 10. Lighthouse PWA Lighthouse https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
  11. 11. PWA API iOS PWA PWA
  12. 12. Service Worker JavaScript Service Worker Service Worker
  13. 13. iOS 11.3 Safari 11.1 Service Worker iOS Safari PWA Safari 11.1 https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_11_1.html
  14. 14. Service Worker 
 iOS Safari Service Worker
  15. 15. Web App Manifest
  16. 16. Android Chrome 
 
 Web App Manifest
  17. 17. Web App Manifest Sevice Worker fetch
  18. 18. iOS Safari 11.1 - Web App Manifest Safari Web App Manifest PWA
  19. 19. <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="icon.png">
  20. 20. <meta name="apple-mobile-web-app-capable" content="yes"> Web App Manifest location.href = "" a <link rel="apple-touch-icon" href="icon.png"> Web App Manifest Web App Manifest
  21. 21. Safari PWA
  22. 22. ICS MEDIA https://ics.media/ https://ics-creative.github.io/project-megurogawa-river/ Color Create https://ics-creative.github.io/project-color-create/
  23. 23. PWA Service Worker Web App Manifest
  24. 24. Service Worker
  25. 25. Service Worker
  26. 26. Service Worker Caching Files with Service Worker | Web | Google Developers 
 https://developers.google.com/web/ilt/pwa/caching- les-with-service-worker
  27. 27. Google Analytics 
 GET
  28. 28. 
 PWA
  29. 29. 
 

  30. 30. viewport (350ms)
  31. 31. PWA
  32. 32. 
 PWA
  33. 33. Chrome PWA
  34. 34. Windows Store PWA Window Store
  35. 35. PWA Web App Manifest Service Worker &
  36. 36. Twitter ICS ikeda@ics-web.jp @clockmaker Copyright 2018 ICS INC. All rights reserved.

×
Save this presentationTap To Close