- Now and Future -
GDG DevFest Tokyo 2018
Takanori Oki
Self-Introduction
- Takanori Oki / @takanorip
- Frontend Developer
- Nuxt.js, Polymer, React, etc...
- Polymer Japan Translation Team
- I love webfonts
Table of Contents
- What are PWA?
- Code Sample
- Future
- Other Notes
What are
PWA?
Progressive Web Apps
- A web application that provides UX like a
native application
- Based on "Progressive Enhancement"
- A radically improved user experience
Progressive Enhancement
A design philosophy that centers around providing a baseline of essential content and functionality to as many users as possible, while at the same time going further and delivering the best possible experience only to users of the most modern browsers that can run all the required code.
MDN
App
Old Browser
Latest Browser
Minimum
functions
Maximum
functions
Features
Reliable
Fast
Engaging
Integrated
Fast
Load Fast, feel fast.
After 3s , 53% users leave sites.
Integrated
PWA is able to behave in the same way as other apps.
For example, the Payment Request API
Reliable
Eliminate the dependence on the network
and
Work always.
Engaging
Installable,
Push notification,
Immersive full screen experience
Comparison
with native apps
PWA
- Work Offline
- Installable without
an app store - Discoverable
- Lightweight
- Push Notification (limited)
- Can use sensors (limited)
- Safe (HTTPS)
Native Apps
- Work Offline
- Push Notification
- Can use advanced sensors
- Can do High-load processing
- Can use OS-provided function
Who is the target of PWA?
loyalty
Native Apps
Number of customers
Web
??
loyalty
Number of customers
Web
PWA
Functions of PWA
Service Workers
Offline
Support
Push
Notification
Add Icon to
Home Screen
background
sync
Web App Manifest
Browser Support
| Add to Home Screen | ||||
| Service Workers | ||||
| Push Notifications | ||||
| Credential manegement API | ||||
| Payment Request API |
Notes
- iOS Safari don't support Push notification, Background sync, A2HS banner
- Attention required "PWA on iOS"
Progressive Web App is...
- Progressive
- Responsive
- Connectivity independent
- App-like
- Fresh
- Safe
- Discoverable
- Re-engageable
- Installable
- Linkable
CODE
Sample
Basic
1. Register ServiceWorker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('service-worker.js', {
scope: '/',
});
});
}You write this code into
index.html or any External JavaScript File
2. Add sw-precache-config.js
module.exports = {
staticFileGlobs: [
'manifest.json',
'src/**/*',
],
runtimeCaching: [
{
urlPattern: /\/@webcomponents\/webcomponentsjs\//,
handler: 'fastest'
},
{
urlPattern: /^https:\/\/fonts.gstatic.com\//,
handler: 'fastest'
}
]
};3. Add manifest.json
<link rel="manifest" href="/manifest.json">{
"name": "My App",
"short_name": "My App",
"description": "My App description",
"start_url": "/",
"display": "standalone",
"theme_color": "#3f51b5",
"background_color": "#3f51b5",
"icons": [
{
"src": "images/manifest/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/manifest/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Completed !
Progressive Web Apps Checklist
How to Build PWA
with
Web Components
PWA Starter Kit
What's in the kit?
-
PWA
-
LitElement
-
Redux
-
PRPL
-
pwa-helpers
DEMO
pwa-helpers
-
https://github.com/Polymer/pwa-helpers
-
Small helper methods or mixins to help build a PWA
-
This contains Basic helpers, Test helpers and
Redux helpers
-
network.js
-
Calls a callback whenever the network connectivity of the app changes.
-
import { installOfflineWatcher }
from '../node_modules/pwa-helpers/network.js';
installOfflineWatcher((offline) => {
console.log(offline ? ' offline' : 'online');
});import { installMediaQueryWatcher }
from '../node_modules/pwa-helpers/media-query.js';
installMediaQueryWatcher(`(min-width: 600px)`, (matches) => {
console.log(matches ? 'wide screen' : 'narrow sreen');
});-
media-query.js
-
Calls a callback whenever a media-query matches in response to the viewport size changing.
-
Future of
PWA
Progressive
Web Apps
Web Fundamentals
"Your app don't work offline??
And can not install??
Are you serious?"
PWA will not replace
all native apps.
They will be separated.
Native Apps
PWA
Load
Depend on Apple
Other
Notes
Push Notification
DO NOT
DEMAND PERMISSIONS FOR NOTIFICATION
ON PAGE LOAD
If blocked,
Apps can't request permission again.
We should think
the
story that user allow push notifications.
Safari
iOS Safari can't share credentials between PWA and Browser.
So, sometimes, Users can't login...
Design
PWA need to be designed as
native apps.
design for...
- When offline
- Without browser's back button
- Splash screen
- and so on...
Don't use
Full-screen view
without thinking!!
Conclusion
Let's make PWA and add FIRE experiences
Thank you!