Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive web applications across frontend frameworks and tools

Progressive web applications across frontend frameworks and tools

This talk will cover the best practices in front-end frameworks to build a PWA.

Majid Hajian

October 05, 2017
Tweet

More Decks by Majid Hajian

Other Decks in Programming

Transcript

  1. Progressive Web Apps Across Front-end Frameworks & tools Majid Hajian

    @mhadaily www.majidhajian.com OCTOBER 5TH / 10:00 - 10:45 / THOR OSLO, NORWAY 
  2. Work for every user, regardless of browser choice because they’re

    built with progressive enhancement as a core tenet. Progressive
  3. Enhanced with service workers to work offline or on low

    quality networks Connectivity Independent
  4. 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.
  5. 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); }); }); }
  6. Static Assets .js | .html | .json .svg | .png

    | .jpg .css Dynamic Content networkFirst cacheFirst fastest cacheOnly networkOnly + Offline Storage https://www.majidhajian.com/pwa-offline-storage/
  7. Allow users to “keep” apps they find most useful on

    their home screen without the hassle of an app store. Installable
  8. { "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">
  9. <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content=“black"> <link rel="apple-touch-icon" sizes="180x180" href="icon.png">

    <link rel="apple-touch-icon" sizes="120x120" href="icon-120x120.png"> <link rel="apple-touch-icon" sizes="152x152" href="icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="icon-180x180.png"> Safari on IOS can install to home screen…
  10. <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.
  11. <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.
  12. HTTP/2 Server Push "headers": [ { "source": "/", "headers": [

    { "key": "Link", "value": "</app-9cb33dbd1d2efaa3112d7916a35c97a8.js>;rel=preload;as=script" } ] } ],
  13. * 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)
  14. 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/..." } ] } }
  15. 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
  16. 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
  17. * Create App * Generate app shell * Generate Server

    Wrok * Manifest Generation * JS/CSS/Webfonts will be intelligently loaded
  18. <link rel=manifest href=/static/manifest.json> <meta name=theme-color content=#4DBA87> <meta name=apple-mobile-web-app-capable content=yes> <meta

    name=apple-mobile-web-app-status-bar-style content=black> <meta name=apple-mobile-web-app-title content=vue-pwa-app> <link rel=apple-touch-icon href=/static/img/icons/apple-touch-icon-152x152.png> <meta name=msapplication-TileImage content=/static/img/icons/msapplication-icon-144x144.png> <meta name=msapplication-TileColor content=#000000> <link rel=preload href=/static/js/app.a0fe22b4b95e5dbcaa95.js as=script> <link rel=preload href=/static/css/app.1d063bc0cd301699760e884e1e4c3379.css as=style> <link rel=preload href=/static/js/vendor.fb36c9b323848ce4ff90.js as=script> <link rel=preload href=/static/js/manifest.7c674032a639035f63e5.js as=script> <link href=/static/css/app.1d063bc0cd301699760e884e1e4c3379.css rel=stylesheet> Dynamic Import & async Chunk Preloading Server Side Rendering
  19. * Create App * Generate app shell * Firebase setting

    for server push * SSR ready * Dynamic Import, lazy loading modules
  20. $ 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
  21. // 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/(.+)', ], },
  22. 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
  23. …Progressive web apps can replace native apps… Thank you @mhadaily

    https://www.majidhajian.com/PWA-frontend-frameworks-mobileera-2017/