Introduction to PWA by step by step

Introduction to PWA by step by step 6/28 ʲαϙʔλʔζColabษڧձʳ 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

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? • What can we do specifically about PWA? • Step to make PWA

Lightly looking back on history

1991.8.6 HTML1 was born

image by: http://virtuallyfun.com/wordpress/category/win32s/

The era of browser war Each company developed and added
its own function to their browser.

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

The web became easier to see. But, still web first…

Responsive

Rushed into the era of mobile first

What is PWA?

Mobile first is good, but UX has room for improvement.

⚡AMP (Accelerated Mobile Pages) PWA (Progressive Web Apps) For more
mobile first and UX

–Pete LePage “Progressive Web Apps are experiences that combine the
best of the web and the best of apps.”

What can we do specifically about PWA?

• Progressive • Responsive • Connectivity independent • App-like •
Fresh • Safe • Discoverable • Re-engageable • Installable • Linkable Features of PWA

PWA example APP

PWA example

⚠Caution⚠ I will not touch about “push notifications”.

Step to make PWA

Advance preparation • Using Google Chrome • Sample application https://github.com/k-kuwahara/pwa-sample
note: This application assumes using “Firebase”. Therefore, the “public” directory is the content to be deployed.

1. Served over HTTPS

Why does PWA require HTTPS?

1. Served over 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

APP 2. Add to home screen 1. Create manifest.json 2.
Import manifest.json to index.html 3. Create icons for home screen 4. Create JavaScript file of Service Worker

2-1. Create manifest.json { "name": "PWA sample of supporterzcolab 439",
"short_name": "PWA sample”, "icons": [ { "src": "img/launcher-icon-48x48.png", "type": "image/png", "sizes": "48x48" }, . . . { "src": "img/launcher-icon-512x512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/?utm_source=homescreen", "display": "standalone", "theme_color": "#ff0044", "background_color": "#f2f2f5" } Please check the meaning of each item.

2-2. Import manifest.json to index.html index.html (in <head> tag) <link
rel="manifest" href="/manifest.json">

2-3. Create icons for home screen { "name": "PWA sample
of supporterzcolab 439", "short_name": "PWA sample”, "icons": [ { "src": "img/launcher-icon-48x48.png", "type": "image/png", "sizes": "48x48" }, . . . { "src": "img/launcher-icon-512x512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/?utm_source=homescreen", "display": "standalone", "theme_color": "#ff0044", "background_color": "#f2f2f5" } Prepare icons of size for each device.

2-3. Create icons for home screen It is correct if
it is displayed like this.

2-4. Create JavaScript file of Service Worker sw.js self.addEventListener(‘fetch’, (e)
=> { // empty }) index.html (in <head> tag) <script src=“/sw.js”></script>

Setting complete. Let's check it !!

Click this link

3. Offline experience 1. Make all pages HTTPS 2. Edit
Service Worker file

3-1. Make all pages HTTPS Everything omitted because same as
“1.”

3-2. Edit Service Worker file 1 const CACHE_NAME = 'my-site-cache-v1';
2 const urlsToCache = [ 3 '/', 4 '/index.html', 5 '/bundle.js' 6 ]; cache key name. ※ If you will change Service Worker jobs, change this name. Target file list to cache.

3-2. Edit Service Worker file 8 self.addEventListener('install', (e) => {
9 console.log('[ServiceWorker] Install’) 10 e.waitUntil( 11 caches.open(CACHE_NAME) 12 .then((cache) => { 13 return cache.addAll(urlsToCache) 14 }) 15 ) 16 })

9 console.log('[ServiceWorker] Install’) 10 e.waitUntil( 11 caches.open(CACHE_NAME) 12 .then((cache) => { 13 return cache.addAll(urlsToCache) 14 }) 15 ) 16 }) 1. Create cache and open the cache with key name CACHE_NAME

9 console.log('[ServiceWorker] Install’) 10 e.waitUntil( 11 caches.open(CACHE_NAME) 12 .then((cache) => { 13 return cache.addAll(urlsToCache) 14 }) 15 ) 16 }) 2. Register the specified file list in the cache

3-2. Edit Service Worker file 18 self.addEventListener('fetch', (e) => {
19 console.log('[ServiceWorker] Fetch') 20 e.respondWith( 21 caches.match(e.request) 22 .then((response) => { 23 return response || fetch(e.request) 24 }) 25 ) 26 })

19 console.log('[ServiceWorker] Fetch') 20 e.respondWith( 21 caches.match(e.request) 22 .then((response) => { 23 return response || fetch(e.request) 24 }) 25 ) 26 }) Look for resources that match the available cache for the resource at the requested URL, This events is poffline’s processing.

19 console.log('[ServiceWorker] Fetch') 20 e.respondWith( 21 caches.match(e.request) 22 .then((response) => { 23 return response || fetch(e.request) 24 }) 25 ) 26 }) If it matches, it responds the resource from the cache.

19 console.log('[ServiceWorker] Fetch') 20 e.respondWith( 21 caches.match(e.request) 22 .then((response) => { 23 return response || fetch(e.request) 24 }) 25 ) 26 }) If they do not match, acquire resources from the network.

3-2. Edit Service Worker file You can also delete the
old cache by using “activate” events. https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API/ Using_Service_Workers#Deleting_old_caches

Setting complete. Let's check it !!

Click this checkbox, and reload page.

Final directory structure app/ ├ fin-products/ │ └ public/ ├
index.html ├ manifest.json ├ sw.js └ img/ Sample of finished product

How to make it PWA? 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? Check the implementation status of
the function By Can I use

Let’s play with PWA !!

Introduction to PWA by step by step

Introduction to PWA by step by step

More Decks by kkeeth

Other Decks in Programming

Featured

Transcript