Flutter PWA! WHAT, HOW

Majid Hajian

mhadaily

Updated - Flutter2

Credit to: J Dominik Roszkowski - https://codepen.io/orestesgaolin/pen/ExVboMY

https://chrome-trex-flutter.netlify.app/#/

Credit to: Joshua de Guzman - https://codepen.io/joshuadeguzman/pen/jObrzJB

https://nike-shop-flutter.netlify.app

Credit to: Zoey Fan - https://codepen.io/zoeyfan/pen/ExVaXGK

https://gooey-edge-flutter.netlify.app

mhadaily

Scenarios

A PWA built with Flutter

Single Page Application

Existing Mobile Applications

At this time

mhadaily

Agenda

Service Worker, the Brain of PWA

Web App Manifest

PWA Charactrestics

PWA in Flutter

DEMO

ME.dart

import 'package:flutter/material.dart';
MaterialApp(
   ThemeData(
        name: "Majid Hajian",
        location: "Oslo, Norway",
        description: '''
                Google Developer Expert
        	Passionate Software engineer, 
	        Community Leader, Author and international Speaker
         ''',
        main: "Flutter/Dart, PWA, Performance",
        homepage: "https://www.majidhajian.com",
        socials: {
          twitter: "https://www.twitter.com/mhadaily",
          github: "https://www.github.com/mhadaily"
        },
        author: {
          Pluralsight: "www.pluralsight.com/authors/majid-hajian",
          Apress: "Progressive Web App with Angular, Book",
          PacktPub: "PWA development",
          Udemy: "PWA development",
        }
        founder: "Softiware As (www.Softiware.com)"
        devDependencies: {
          tea: "Ginger", 
          mac: "10.14+",
        },
        community: {
          MobileEraConference: "Orginizer",
          FlutterVikings: "Orginizer", 
          FlutterDartOslo: "Orginizer",
          GDGOslo: "Co-Orginizer",
          DevFestNorway: "Orginizer",
          ...more
        }));

mhadaily

Find me on the internet by

Reliable

Fast

Engaging

Reliable

Linkable

Engaging

Secure

Progressive by nature

Native-like User Experince

Responsiveness

Fast

Discoverable

mhadaily

Service Worker

Web App Manifest

mhadaily

mhadaily

self.addEventListener("install", (event) => {


}


self.addEventListener("activate", function(event) {


}


self.addEventListener("fetch", (event) => {



}

mhadaily

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

mhadaily

// Cache API
caches.open(cacheName)
.then(function(cache) {
      return cache.addAll(
        [
          '/css/bootstrap.css',
          '/css/main.css',
          '/js/bootstrap.min.js',
          '/js/jquery.min.js',
          '/offline.html'
        ]
      );
})

https://developer.mozilla.org/en-US/docs/Web/API/Cache

mhadaily

Web App Manifest

The Web App Manifest is a JSON text file following Web App Manifest specification

that provides information about an application such as its name, author, icons, and description.

mhadaily

<link rel="manifest" href="/app.webmanifest">



<link rel="manifest" href="/manifest.json">

mhadaily

{
  "short_name": "Flutter",
  "name": "Flutter: Amazing Technology!",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "description": "Flutter pwa information",
}

mhadaily

Progressive Web App

mhadaily

Dart to JS

https://dart.dev/tools/dart2js

 dart2js -O2 -o test.js test.dart

mhadaily

Web Renderers

HTML renderer

Uses a combination of HTML elements, CSS, Canvas elements, and SVG elements. This renderer has a smaller download size.

CanvasKit renderer

This renderer is fully consistent with Flutter mobile and desktop, has faster performance with higher widget density, but adds about 2MB in download size.