Flutter PWA! WHAT, HOW

Majid Hajian

mhadaily

Updated - Flutter2

Credit to: JDominik 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

mhadaily

mhadaily

Service Worker 

Web App Manifest

mhadaily

mhadaily

mhadaily

mhadaily

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

mhadaily

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

mhadaily

  • Progressive Web App

mhadaily

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.

WebAssembly and Skia

Demo

Credit: https://github.com/MarcusNg/flutter_facebook_responsive_ui

mhadaily

flutter.gskinner.com

Summary

  • Servier Worker / Fetch / Caching
  • Web App Manifest
  • What the fundamentails in PWA
  • Read more for advanced patterns: https://slides.com/mhadaily/pwa-advanced-patterns-and-strategies

Majid Hajian

mhadaily

Slides and link to source code

slides.com/mhadaily/flutter-pwa-what-and-how

SVG icons credited to undraw.co

Flutter PWA, What and How!

By Majid Hajian

Made with Slides.com

Flutter PWA, What and How!

The web is the largest application-delivery platform in existence, and introducing progressive web applications takes it to the next level. Flutter, a UI toolkit to create beautiful cross-platform applications, supports standard web technologies like HTML, DOM, Canvas, JavaScript, and runs PWA on the browser; Not surprisingly, with only one language, Dart! But, what exactly is PWA? How Service Worker as the brain of the PWA works? How can Flutter web be turned into a progressive web app? What are the advanced patterns in creating PWA that can be applied in Flutter web? These are all questions that I will answer in this session.

  • 1,383

More from Majid Hajian