PWA

@jdmaldonado06

If you didn't do the homework...

npm install -g ionic

npm install -g firebase-tools

Juan David Maldonado G.

  • Software Developer
  • Paintball Player
  • Gamer
  • Google Tec.  lover
  • Languages Lover

https://jdmaldonado.com.co

Social

Business

jdmaldonado

jdmaldonado06

jdmaldonado06

A lo que vinimos

¿ PWA ?

Progressive Web Apps

Web

PWA

Native

Advantages

  • Run in Background
  • Looks like Native App
  • Push notifications
  • Size
  • Offline
  • Doesn't need store (updates)
  • Installed
Device Pinterest Tinder
Android 22 MB 130 MB
iOS 114 MB 178.4 MB
PWA 0.25 MB 0.2 MB

What do I need ?

Service Worker

  • Javascript commands
  • Notifications
  • Background
  • Offline
  • DOM
  • HTTPS (required)
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function () {
    navigator.serviceWorker.register('/sw.js')
      .then(function (registration) {
        // Registration was successful
        console.log('Successful', registration.scope);
      }).catch(function (err) {
        // registration failed :(
        console.log('Failed: ', err);
      });
  });
}

Service Worker

manifest.json

  • Configuration
  • App settings
  • icon
  • name
  • start_url
  • colors
  • display

manifest.json

{
  "name": "My PWA",
  "short_name": "My PWA",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [{
    "src": "assets/imgs/icon.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "background_color": "#4e8ef7",
  "theme_color": "#4e8ef7"
}

Install Banner

Requirements

  • manifest.json
    • short_name
    • name
    • icon
      • (192 x 192)
      • png
    • start_url
  • Service worker
  • https

For the workshop...

Tools

ionic

firebase

one signal

https://console.firebase.google.com/

https://ionicframework.com/getting-started#cli

https://onesignal.com/

Let's code...

Merci

Gracias

Thank You

Grazie

Danke

Obrigada

ありがとう

Благодарю вас

PWA

By Juan David Maldonado

Made with Slides.com

PWA

  • 320

More from Juan David Maldonado