Progressive web applications across frontend frameworks and tools

Progressive Web Apps Across Front-end Frameworks & tools Majid Hajian
@mhadaily www.majidhajian.com OCTOBER 5TH / 10:00 - 10:45 / THOR OSLO, NORWAY

Work for every user, regardless of browser choice because they’re
built with progressive enhancement as a core tenet. Progressive

Fit any form factor, desktop, mobile, tablet, or whatever is
next. Responsive

Mobile First / Responsive

CSS layouts in 2017 Box Model VS Flexbox VS Grid

Served via HTTPS to prevent snooping and ensure content hasn’t
been tampered with. SECURE

Enhanced with service workers to work offline or on low
quality networks Connectivity Independent

A service worker is a script that runs in the
background of your browser when you view a webpage. It’s opening the door to features that don't need a web page or user interaction.

if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator
.serviceWorker .register('/sw.js') .then(function () { // Registration was successful console.log('ServiceWorker registration successful!'); }) .catch(function (err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }); }

Static Assets .js | .html | .json .svg | .png
| .jpg .css Dynamic Content networkFirst cacheFirst fastest cacheOnly networkOnly + Ofﬂine Storage https://www.majidhajian.com/pwa-ofﬂine-storage/

$npm install workbox-cli --global $workbox generate:sw

navigateFallback: '/index.html', runtimeCaching: [ { urlPattern: /^https:\/\/your.api.com\/.*/, handler: 'networkFirst' }
]

"scripts": { "build": "node existing_build_script.js && workbox generate:sw" },

Allow users to “keep” apps they find most useful on
their home screen without the hassle of an app store. Installable

{ "name": "Glimmer HN", "short_name": "Glimmer HN", "icons": [ {
"src": "/icon-512x512.png", "sizes": "512x512", "type": "image\/png" } ], "theme_color": "#0059a3", "background_color": "#ffffff", "display": "standalone", "orientation": "portrait", "start_url": "./" } <link rel="manifest" href="/manifest.json">

Use the app-shell model to provide app-style navigations and interactions.
App-Like

Make re-engagement easy through features like push notifications. Re-engageable

Make it faster … ?

<html> <head> <!—- The dns-prefetch link relation type is used
to indicate an origin that will be used to fetch required resources, and that the user agent should resolve as early as possible.—> <link rel="dns-prefetch" href="https://node-hnapi.herokuapp.com"> </head> </html> Use of rel=dns-prefetch suggests a browser should resolve the DNS of a specific domain prior to it being explicitly called.

CODE SPLITTING

<html> <head> <link rel="preload" href="chunk.cf7bd8260d685f704bd0.js" as="script"> <link rel="prefetch" href="chunk.cf7bd8260d685f704bd0.js"> </head>
Preload resources you have high-confidence will be used in the current page. Prefetch resources likely to be used for future navigations across multiple navigation boundaries.

HTTP/2 Server Push "headers": [ { "source": "/", "headers": [
{ "key": "Link", "value": "</app-9cb33dbd1d2efaa3112d7916a35c97a8.js>;rel=preload;as=script" } ] } ],

SSR SERVER SIDE RENDERING

+ Angular-cli $npm install angular-cli -g

Angular Service Worker implementation comes in an additional module $
npm install @angular/service-worker  

* Service worker generation * Declarative JSON-based setting instead of
javascript * Push notifications / Lifecycle events (wrap API in a service that you can listen to Observables)

// .angular-cli.json { ... "apps": [ { ... "serviceWorker": "true"
} ] } $ ng set apps.0.serviceWorker=true

Static Content / External content / Dynamic content Cache /
Route redirection // ngsw-manifest.json { "static": { "urls": { "/default-img-blue.9900c4c439ab0c134ca7.svg": "23ca4d5279c3621871fb2d065392414dc8c3adc1", "/default-img-green.b9ab76c15266d2980579.svg": "f4bcb6555a194cb2810ee53e1b21b4642790241f", "/0.8da5ff2db9cbef38ebed.chunk.js": "44134d9d2a876f4043bd151c07b0752e1b274571", "/1.1bc1e7354540b7ba6e58.chunk.js": "1ff2ba300f9572fc7cd1ff7c446d02e0046ef976", ....... }, ....... }, "external": { "urls": [ { "url": "https://fonts.googleapis.com/css?family=..." }, { "url": "https://fonts.gstatic.com/s/materialicons/..." } ] } }

Experimental consider Workbox

Lazy Loading { path: '', loadChildren: './@modules/authentication/authentication.module#AuthenticationModule', canLoad: [ AuthGuard
], },

AoT and Bundle Optimization > ng build --prod --aot --bundle-optimizer
Service Side Rendering @angular/universal

+ create-react-app $npm install create-react-app -g

* service worker and web app manifest generation * cache-first
strategy to give perceived performance

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css';
import App from './App'; import registerServiceWorker from './registerServiceWorker'; ReactDOM.render(<App />, document.getElementById('root')); registerServiceWorker(); After Build

componentDidMount() { import(/* webpackChunkName: 'vendor' */ 'moment') .then(moment => moment().format('LLLL'))
.then(str => console.log(str)) .catch(err => console.log('Failed to load moment', err)); } Dynamic Import Server Side Rendering

+ vue-cli $npm install vue-cli -g

* Create App * Generate app shell * Generate Server
Wrok * Manifest Generation * JS/CSS/Webfonts will be intelligently loaded

./dist ./src

+ preact-cli $npm install preact-cli -g

* Create App * Generate app shell * Firebase setting
for server push * SSR ready * Dynamic Import, lazy loading modules

./src ./build

+ ember-cli $npm install ember-cli -g

$ ember install ember-service-worker $ ember install ember-service-worker-index $ ember
install ember-service-worker-asset-cache $ ember install ember-service-worker-cache-fallback $ ember install ember-service-worker-force-update Ember Server Worker A pluggable approach to Service Workers for Ember.js

// ember-cli-build.js module.exports = function(defaults) { let app = new
GlimmerApp(defaults, { 'esw-index': { // Where the location of your index file is at, defaults to `index.html` location: 'app-shell.html', // Bypass esw-index and don't serve cached index file for matching URLs excludeScope: [/\/non-ember-app(\/.*)?$/, /\/another-app(\/.*)?$/], // Leave blank serve index file for all URLs, otherwise ONLY URLs which match // this pattern will be served the cached index file so you will need to list // every route in your app. includeScope: [/\/dashboard(\/.*)?$/, /\/admin(\/.*)?$/], }, 'asset-cache': { include: [ 'assets/**/*', '**/*', 'sw-registration.js', ], exclude: [ '**/*.txt', '**/*.css', 'test.json', 'sw.js', ], requestMode: ‘cors', }, 'esw-cache-fallback': { patterns: [ 'https://node-hnapi.herokuapp.com/(.+)', ], },

Debugging Service Worker: https://goo.gl/mkERwK by By Rob Dodson https://github.com/pinterest/service-workers generate-service-worker
A node module for generating service worker files based on provided configuration options. service-worker-plugin A webpack plugin for generating dynamic service worker files and a runtime helper. service-worker-mock A mock service worker environment generator. Used for testing service worker code. https://www.pwabuilder.com

…Progressive web apps can replace native apps… Thank you @mhadaily
https://www.majidhajian.com/PWA-frontend-frameworks-mobileera-2017/

Progressive web applications across frontend fr...

Progressive web applications across frontend frameworks and tools

More Decks by Majid Hajian

Other Decks in Programming

Featured

Transcript