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

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

  • Login to see the comments

クリエイティブの視点から挑戦する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.

×