ebrugulec

/* myWorklet.js */

registerPaint('myGradient', class {
  paint(ctx, size, properties) {
    var gradient = ctx.createLinearGradient(0, 0, 0, size.height / 3);

    gradient.addColorStop(0, "black");
    gradient.addColorStop(0.7, "rgb(210, 210, 210)");
    gradient.addColorStop(0.8, "rgb(230, 230, 230)");
    gradient.addColorStop(1, "white");

ebrugulec

/* service-worker.js */

self.addEventListener('fetch', function(event) {
    // cache'den verileri getir
    event.respondWith(
        caches.match(event.request);
    );
});

ebrugulec

/* service-worker.js */

// Kur
self.addEventListener('install', function(event) {
    // ...
});

// Aktif Et
self.addEventListener('activate', function(event) {
    // ...

ebrugulec

/* worker.js */

// main.js'den mesaj ulaştığında
self.onmessage = function(e) {
  console.log(e.data);

  // main.js'e mesaj gönderme
  self.postMessage(workerResult);
}

ebrugulec

/* main.js */

// Worker oluşturma
const myWorker = new Worker('worker.js');

// worker'a mesaj gönderme
myWorker.postMessage('Hello!');

// Workerdan mesaj aldığında
myWorker.onmessage = function(e) {

ebrugulec

import React, { Suspense } from 'react';
import { Router } from '@reach/router';
import Loading from './Loading';

const Home = React.lazy(() => import('./Home'));
const Dashboard = React.lazy(() => import('./Dashboard'));
const Overview = React.lazy(() => import('./Overview'));
const History = React.lazy(() => import('./History'));
const NotFound = React.lazy(() => import('./NotFound'));

ebrugulec

const Lazycomponent1 = React.lazy(()=>import('./lazy.component1.js'))
const Lazycomponent2 = React.lazy(()=>import('./lazy.component2.js'))
const Lazycomponent3 = React.lazy(()=>import('./lazy.component3.js'))
const Lazycomponent4 = React.lazy(()=>import('./lazy.component4.js'))
import ErrorBoundary from './error.boundary.js'
function AppComponent() {
    return 
    (<div>
        <ErrorBoundary>
            <Suspense fallback={<div>loading ...</div>}>

ebrugulec

function App() {
  return (
    <div>
      <h1>My Movie</h1>
      <Suspense fallback="Loading...">
        <Description />
        <div>
          <Suspense fallback="Sorry for our laziness">
            <span>Cast</span>
            <AnotherLazyComponent />

ebrugulec

const Lazycomponent1 = React.lazy(()=>import('./lazy.component1.js'))
const Lazycomponent2 = React.lazy(()=>import('./lazy.component2.js'))
const Lazycomponent3 = React.lazy(()=>import('./lazy.component3.js'))
const Lazycomponent4 = React.lazy(()=>import('./lazy.component4.js'))
function AppComponent() {
    return 
    (<div>
        <Suspense fallback={<div>loading ...</div>}>
            <LazyComponent1 />
            <LazyComponent2 />

ebrugulec

// ...
function LoadingIndicator () {
    return (<div>loading ...</div>)
}
function AppComponent() {
    return 
    (<div>
        <Suspense fallback={<LoadingIndicator />}>
            <LazyComponent />
        </Suspense>