Slide 1
Slide 1 text
Introduction to PWA
by step by step
6/28 ʲαϙʔλʔζColabษڧձʳ
k-kuwahara @kuwahara_jsri clown0082
Slide 2
Slide 2 text
Basic Information
const my_info = {
Name: ‘܂ݪਔ’,
Home: ‘ෑ, ౡ’,
Interest: ‘όεέ, কع, ຊञ’,
Workplace: ‘Yumemi, Inc.’,
Skillset: ‘JS, Node.js, PHP, Ruby’
}
Slide 3
Slide 3 text
Communities
collaborator
translator
staff
Slide 4
Slide 4 text
github.com/k-kuwahara
github.com/k-kuwahara
Slide 5
Slide 5 text
Let’s start
the today’s talk of PWA !!
Slide 6
Slide 6 text
Table of Contents
• Lightly looking back on history
• What is PWA?
• What can we do specifically about PWA?
• Step to make PWA
Slide 7
Slide 7 text
Lightly looking
back on history
Slide 8
Slide 8 text
1991.8.6
HTML1 was born
Slide 9
Slide 9 text
image by: http://virtuallyfun.com/wordpress/category/win32s/
Slide 10
Slide 10 text
The era of browser war
Each company developed
and added its own function
to their browser.
Slide 11
Slide 11 text
mobile phones around this time ...
Slide 12
Slide 12 text
The goalden age of feature phone
• Low performance
• Screen is small
• Physical button
• Less information
• Not a web
Slide 13
Slide 13 text
2007.1.9
iPhone release !!
Slide 14
Slide 14 text
To smart phone heyday
• Performance improvement
• Touch panel
• Operability is much improved
• Install apps freely
image by: https://ja.wikipedia.org/wiki/IPhone
Slide 15
Slide 15 text
The web became easier to see.
But, still web first…
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Responsive
Slide 19
Slide 19 text
>
Slide 20
Slide 20 text
Rushed into the era of mobile first
Slide 21
Slide 21 text
What is PWA?
Slide 22
Slide 22 text
Mobile first is good,
but UX has room for improvement.
Slide 23
Slide 23 text
⚡AMP
(Accelerated Mobile Pages)
PWA
(Progressive Web Apps)
For more mobile first and UX
Slide 24
Slide 24 text
–Pete LePage
“Progressive Web Apps are experiences
that combine the best of the web and
the best of apps.”
Slide 25
Slide 25 text
What can we do specifically
about PWA?
Slide 26
Slide 26 text
• Progressive
• Responsive
• Connectivity independent
• App-like
• Fresh
• Safe
• Discoverable
• Re-engageable
• Installable
• Linkable
Features of PWA
Slide 27
Slide 27 text
PWA example
APP
Slide 28
Slide 28 text
PWA example
Slide 29
Slide 29 text
⚠Caution⚠
I will not touch about
“push notifications”.
Slide 30
Slide 30 text
Step to make PWA
Slide 31
Slide 31 text
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.
Slide 32
Slide 32 text
1. Served over HTTPS
Slide 33
Slide 33 text
Why does PWA require HTTPS?
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
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.
Slide 37
Slide 37 text
2-2. Import manifest.json to index.html
index.html (in tag)
Slide 38
Slide 38 text
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.
Slide 39
Slide 39 text
2-3. Create icons for home screen
It is correct if it is
displayed like this.
Slide 40
Slide 40 text
2-4. Create JavaScript file
of Service Worker
sw.js
self.addEventListener(‘fetch’, (e) => {
// empty
})
index.html (in tag)
Slide 41
Slide 41 text
Setting complete.
Let's check it !!
Slide 42
Slide 42 text
Click this link
Slide 43
Slide 43 text
3. Offline experience
1. Make all pages HTTPS
2. Edit Service Worker file
Slide 44
Slide 44 text
3-1. Make all pages HTTPS
Everything omitted
because same as “1.”
Slide 45
Slide 45 text
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.
Slide 46
Slide 46 text
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 })
Slide 47
Slide 47 text
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 })
1. Create cache and open the cache
with key name CACHE_NAME
Slide 48
Slide 48 text
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 })
2. Register the specified file list
in the cache
Slide 49
Slide 49 text
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 })
Slide 50
Slide 50 text
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 })
Look for resources that match the
available cache for the resource at
the requested URL,
This events is poffline’s processing.
Slide 51
Slide 51 text
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 })
If it matches, it responds the
resource from the cache.
Slide 52
Slide 52 text
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 }) If they do not match, acquire
resources from the network.
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
Setting complete.
Let's check it !!
Slide 55
Slide 55 text
Click this checkbox,
and reload page.
Slide 56
Slide 56 text
Final directory structure
app/
├ fin-products/
│
└ public/
├ index.html
├ manifest.json
├ sw.js
└ img/
Sample of
finished product
Slide 57
Slide 57 text
How to make it PWA?
Using Lighthouse
(implemented in
chrome)
Slide 58
Slide 58 text
How to make it PWA?
See “Progressive Web App Checklist”.
https://developers.google.com/web/progressive-web-apps/checklist
Slide 59
Slide 59 text
How to make it PWA?
Check the
implementation
status of the function
By Can I use
Slide 60
Slide 60 text
Let’s play with PWA !!