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

•

1 like•1,789 views

Yasunobu Ikeda

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

Engineering

PWA
ICS
30 5 20
Web Ionic Meetup Tokyo #4
#ionic_jp

PWA Progressive Web Apps
 
Google 2015
PWA
Google Trends
2017

Progressive Web Apps Checklist
Progressive Web App Checklist
https://developers.google.com/web/progressive-web-apps/checklist

HTTPS
3G
Progressive Web Apps Checklist
Progressive Web App Checklist
https://developers.google.com/web/progressive-web-apps/checklist

Lighthouse PWA
Lighthouse
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

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/General/WhatsNewInSafari/Articles/Safari_11_1.html

Service Worker  
iOS Safari
Service Worker

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" href="icon.png">
Web App Manifest
Web App Manifest

ICS MEDIA
https://ics.media/ https://ics-creative.github.io/project-megurogawa-river/ Color Create
https://ics-creative.github.io/project-color-create/

Service Worker
Caching Files with Service Worker | Web | Google Developers  
https://developers.google.com/web/ilt/pwa/caching- les-with-service-worker

Twitter
ICS
ikeda@ics-web.jp
@clockmaker
Copyright 2018 ICS INC. All rights reserved.

What's hot

Introduction to Progressive web app (PWA)Zhentian Wan

Testing on Mobile Devices with Location ServicesSauce Labs

Mobile Web App & Google Apps ScriptIdo Green

Angular UniversalOleksandr Telnov

Introduction towatchkitMohammad Azam

Firebase Adventures - Going above and beyond in RealtimeJuarez Filho

MobileConf 2013 - Aerogear AndroidDaniel Passos

Codemotion Progressive Web Applications Pwa Webinar - Jorge Ferreiro - @jgfer...Jorge Ferreiro

Progressive Web ApplicationsBartek Igielski

Real World Progressive Web Apps (Building Flipkart Lite)Abhinav Rastogi

Hybrid Apps, Ionic frameworkOleksandr Telnov

Offline-First Progressive Web AppsAditya Punjani

CraftCamp for Students - Introduction to JHipstercraftworkz

Automating PhoneGap BuildMatt Gifford

My learnings on web performance optimization while building a Progressive Web...Narendra Shetty

Reark : a Reference Architecture for Android using RxJavaFuturice

Progressive Web AppVinci Rufus

Basic Understanding of Progressive Web AppsAnjaliTanpure1

Building your first Native iOs App with an API BackendApigee | Google Cloud

Pepperoni 2.0 - How to spice up your mobile apps Futurice

What's hot (20)

Introduction to Progressive web app (PWA)

Testing on Mobile Devices with Location Services

Mobile Web App & Google Apps Script

Angular Universal

Introduction towatchkit

Firebase Adventures - Going above and beyond in Realtime

MobileConf 2013 - Aerogear Android

Codemotion Progressive Web Applications Pwa Webinar - Jorge Ferreiro - @jgfer...

Progressive Web Applications

Real World Progressive Web Apps (Building Flipkart Lite)

Hybrid Apps, Ionic framework

Offline-First Progressive Web Apps

CraftCamp for Students - Introduction to JHipster

Automating PhoneGap Build

My learnings on web performance optimization while building a Progressive Web...

Reark : a Reference Architecture for Android using RxJava

Progressive Web App

Basic Understanding of Progressive Web Apps

Building your first Native iOs App with an API Backend

Pepperoni 2.0 - How to spice up your mobile apps

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

Best Practices in Mobile Development: Building Your First jQuery Mobile AppSt. Petersburg College

Testing installable mobile apps analoguesDiana Pinchuk

Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Maximiliano Firtman

從 Google i/o 2015 看下半年 mobile 應用發展趨勢Ascii Huang

Advanced Strategies for Testing Responsive WebPerfecto by Perforce

Proven strategy for testing pw as aus-agile_testersPerfecto Mobile

Ionic adventures - Hybrid Mobile App Development rocksJuarez Filho

Hybrid mobile appsAbraham Barrera

IBM Bluemix Tech Meetup 18-02-2015gjuljo

SearchLeeds 2019 - Nichola stott - The state of PWAsSearchLeeds

Frontend development of the (current) futureFilip Bruun Bech-Larsen

TechEvent Advanced Service Worker / PWA with Google WorkboxTrivadis

Frontend State of the unionFilip Bruun Bech-Larsen

What is Google App EngineChris Schalk

ChromeとAndroidの過去・現在・未来Shinobu Okano

Fake it 'til you make itJonathan Snook

#MBLTdev: Разработка backend для мобильного приложения с использованием Googl...e-Legion

Novidades do Google IO 2015Jose Papo, MSc

Deep crawl the chaotic landscape of JavaScript Onely

Similar to クリエイティブの視点から挑戦するPWA (20)

Best Practices in Mobile Development: Building Your First jQuery Mobile App

Testing installable mobile apps analogues

Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014

從 Google i/o 2015 看下半年 mobile 應用發展趨勢

Advanced Strategies for Testing Responsive Web

Proven strategy for testing pw as aus-agile_testers

Ionic adventures - Hybrid Mobile App Development rocks

Hybrid mobile apps

IBM Bluemix Tech Meetup 18-02-2015

SearchLeeds 2019 - Nichola stott - The state of PWAs

Frontend development of the (current) future

TechEvent Advanced Service Worker / PWA with Google Workbox

Frontend State of the union

What is Google App Engine

ChromeとAndroidの過去・現在・未来

Fake it 'til you make it

#MBLTdev: Разработка backend для мобильного приложения с использованием Googl...

Novidades do Google IO 2015

Deep crawl the chaotic landscape of JavaScript

Recently uploaded

welding defects observed during the weldingMuhammadUzairLiaqat

Call Girls Narol 7397865700 Independent Call Girlsssuser7cb4ff

complete construction, environmental and economics information of biomass com...asadnawaz62

Class 1 | NFPA 72 | Overview Fire Alarm Systemirfanmechengr

CCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdfAsst.prof M.Gokilavani

Architect Hassan Khalil Portfolio for 2024hassan khalil

Introduction to Machine Learning Unit-3 for II MECHC Sai Kiran

Concrete Mix Design - IS 10262-2019 - .pptxKartikeyaDwivedi3

Arduino_CSE ece ppt for working and principal of arduino.pptSAURABHKUMAR892774

An experimental study in using natural admixture as an alternative for chemic...Chandu841456

Study on Air-Water & Water-Water Heat Exchange in a Finned Tube ExchangerAnamika Sarkar

Work Experience-Dalton Park.pptxfvvvvvvvLewisJB

Correctly Loading Incremental Data at ScaleAlluxio, Inc.

Software and Systems Engineering Standards: Verification and Validation of Sy...VICTOR MAESTRE RAMIREZ

Electronically Controlled suspensions system .pdfme23b1001

Earthing details of Electrical Substationstephanwindworld

US Department of Education FAFSA Week of ActionMebane Rash

Introduction-To-Agricultural-Surveillance-Rover.pptxk795866

Indian Dairy Industry Present Status and.pptMadan Karki

Gurgaon ✡️9711147426✨Call In girls Gurgaon Sector 51 escort servicejennyeacort

Recently uploaded (20)

welding defects observed during the welding

Call Girls Narol 7397865700 Independent Call Girls

complete construction, environmental and economics information of biomass com...

Class 1 | NFPA 72 | Overview Fire Alarm System

CCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdf

Architect Hassan Khalil Portfolio for 2024

Introduction to Machine Learning Unit-3 for II MECH

Concrete Mix Design - IS 10262-2019 - .pptx

Arduino_CSE ece ppt for working and principal of arduino.ppt

An experimental study in using natural admixture as an alternative for chemic...

Study on Air-Water & Water-Water Heat Exchange in a Finned Tube Exchanger

Work Experience-Dalton Park.pptxfvvvvvvv

Correctly Loading Incremental Data at Scale

Software and Systems Engineering Standards: Verification and Validation of Sy...

Electronically Controlled suspensions system .pdf

Earthing details of Electrical Substation

US Department of Education FAFSA Week of Action

Introduction-To-Agricultural-Surveillance-Rover.pptx

Indian Dairy Industry Present Status and.ppt

Gurgaon ✡️9711147426✨Call In girls Gurgaon Sector 51 escort service

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

1. PWA ICS 30 5 20 Web Ionic Meetup Tokyo #4 #ionic_jp

2. (Yasunobu Ikeda) ICS / @clockmaker

3. PWA Progressive Web Apps   Google 2015 PWA Google Trends 2017

4. UI PWA

5. (App Store)  

6.   モバイルアプリ 105MB Twitter Lite 2MB

8. Twitter 1 105MB × 4 = 420MB/

9. Progressive Web Apps Checklist Progressive Web App Checklist https://developers.google.com/web/progressive-web-apps/checklist

10. HTTPS 3G Progressive Web Apps Checklist Progressive Web App Checklist https://developers.google.com/web/progressive-web-apps/checklist

11. Lighthouse PWA Lighthouse https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

12. PWA API iOS PWA PWA

13. Service Worker JavaScript Service Worker Service Worker

14. 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

15. Service Worker   iOS Safari Service Worker

16. Web App Manifest

17. Android Chrome     Web App Manifest

18. Web App Manifest Sevice Worker fetch

19. iOS Safari 11.1 - Web App Manifest Safari Web App Manifest PWA

20. <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="icon.png">

21. <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

22. Safari PWA

23. ICS MEDIA https://ics.media/ https://ics-creative.github.io/project-megurogawa-river/ Color Create https://ics-creative.github.io/project-color-create/

24. PWA Service Worker Web App Manifest

25. Service Worker

26. Service Worker

27. Service Worker Caching Files with Service Worker | Web | Google Developers   https://developers.google.com/web/ilt/pwa/caching- les-with-service-worker

28.

29.

30.

31. Google Analytics   GET

32.   PWA

33.

34.    

35.

36.

37. viewport (350ms)

38. PWA

39.   PWA