<mxfile host="app.diagrams.net" agent="tempest-react-sdk" version="24.0.0">
  <diagram name="push-flow" id="push-flow">
    <mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="826" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="title" value="Web Push — fluxo end-to-end" style="text;html=1;align=center;fontSize=18;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="380" y="20" width="400" height="30" as="geometry" />
        </mxCell>
        <mxCell id="userCol" value="Usuário (browser)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="70" width="220" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sdkCol" value="tempest-react-sdk" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="290" y="70" width="220" height="40" as="geometry" />
        </mxCell>
        <mxCell id="swCol" value="Service Worker" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="540" y="70" width="220" height="40" as="geometry" />
        </mxCell>
        <mxCell id="apiCol" value="Backend" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="790" y="70" width="220" height="40" as="geometry" />
        </mxCell>
        <mxCell id="s1" value="1. clica em &quot;Receber notificações&quot;" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="140" width="220" height="50" as="geometry" />
        </mxCell>
        <mxCell id="s2" value="2. push.subscribe()&#10;Notification.requestPermission()" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="290" y="140" width="220" height="50" as="geometry" />
        </mxCell>
        <mxCell id="s3" value="3. SW ready → pushManager.subscribe({ applicationServerKey })" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="540" y="140" width="220" height="50" as="geometry" />
        </mxCell>
        <mxCell id="s4" value="4. onSubscribe(subscription.toJSON())&#10;POST /webpush/subscribe" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="790" y="140" width="220" height="50" as="geometry" />
        </mxCell>
        <mxCell id="s5" value="5. Backend grava (user_id, subscription)" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;" vertex="1" parent="1">
          <mxGeometry x="790" y="220" width="220" height="50" as="geometry" />
        </mxCell>
        <mxCell id="s6" value="6. Evento (pagamento, mensagem) dispara web-push lib" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;" vertex="1" parent="1">
          <mxGeometry x="790" y="300" width="220" height="50" as="geometry" />
        </mxCell>
        <mxCell id="s7" value="7. push event chega no SW&#10;installPushHandler → showNotification" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="540" y="380" width="220" height="50" as="geometry" />
        </mxCell>
        <mxCell id="s8" value="8. Usuário vê notificação OS-level" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="460" width="220" height="50" as="geometry" />
        </mxCell>
        <mxCell id="s9" value="9. Clica → notificationclick&#10;installNotificationClickHandler abre/foca aba" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="540" y="460" width="220" height="50" as="geometry" />
        </mxCell>
        <mxCell id="e1" style="edgeStyle=orthogonalEdgeStyle;html=1;" edge="1" parent="1" source="s1" target="s2">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e2" style="edgeStyle=orthogonalEdgeStyle;html=1;" edge="1" parent="1" source="s2" target="s3">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e3" style="edgeStyle=orthogonalEdgeStyle;html=1;" edge="1" parent="1" source="s3" target="s4">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e4" style="edgeStyle=orthogonalEdgeStyle;html=1;" edge="1" parent="1" source="s4" target="s5">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e5" style="edgeStyle=orthogonalEdgeStyle;html=1;dashed=1;" edge="1" parent="1" source="s5" target="s6">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e6" style="edgeStyle=orthogonalEdgeStyle;html=1;" edge="1" parent="1" source="s6" target="s7">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e7" style="edgeStyle=orthogonalEdgeStyle;html=1;" edge="1" parent="1" source="s7" target="s8">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e8" style="edgeStyle=orthogonalEdgeStyle;html=1;" edge="1" parent="1" source="s8" target="s9">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
