Ajustar regra do SW para baixar os assets e tornar o Portugol mais am…

…igável offline
dgadelha · May 2, 2024 · 8c09de4 · 8c09de4
1 parent eaf5bd5
commit 8c09de4
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ide/ngsw-config.json b/packages/ide/ngsw-config.json
@@ -11,8 +11,7 @@
     },
     {
       "name": "assets",
-      "installMode": "lazy",
-      "updateMode": "prefetch",
+      "installMode": "prefetch",
       "resources": {
         "files": ["/assets/**", "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"]
       }

diff --git a/packages/ide/package.json b/packages/ide/package.json
@@ -44,6 +44,8 @@
     "@fontsource/lato": "^5.0.21",
     "@materia-ui/ngx-monaco-editor": "^6.0.0",
     "@mdi/svg": "^7.4.47",
+    "@ngneat/overview": "^6.0.0",
+    "@ngxpert/hot-toast": "^2.0.0",
     "@portugol-webstudio/antlr": "*",
     "@portugol-webstudio/parser": "*",
     "@portugol-webstudio/resources": "*",

diff --git a/packages/ide/src/app/app.module.ts b/packages/ide/src/app/app.module.ts
@@ -15,6 +15,7 @@ import { MatTreeModule } from "@angular/material/tree";
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { MonacoEditorModule } from "@materia-ui/ngx-monaco-editor";
+import { provideHotToastConfig } from "@ngxpert/hot-toast";
 import * as Sentry from "@sentry/angular-ivy";
 import { AngularSplitModule } from "angular-split";
 import { AngularSvgIconModule } from "angular-svg-icon";
@@ -26,6 +27,7 @@ import { environment } from "../environments/environment";
 import { AppComponent } from "./app.component";
 import { DialogOpenExampleComponent } from "./dialog-open-example/dialog-open-example.component";
 import { MonacoService } from "./monaco.service";
+import { PwaService } from "./pwa.service";
 import { TabEditorComponent } from "./tab-editor/tab-editor.component";
 import { TabHelpComponent } from "./tab-help/tab-help.component";
 import { TabStartComponent } from "./tab-start/tab-start.component";
@@ -61,7 +63,11 @@ import { TabStartComponent } from "./tab-start/tab-start.component";
     }),
   ],
   providers: [
+    provideHotToastConfig({
+      position: "bottom-right",
+    }),
     MonacoService,
+    PwaService,
     {
       provide: ErrorHandler,
       useValue: Sentry.createErrorHandler({
@@ -72,7 +78,7 @@ import { TabStartComponent } from "./tab-start/tab-start.component";
       provide: APP_INITIALIZER,
       useFactory: () => () => {},
       multi: true,
-      deps: [MonacoService],
+      deps: [MonacoService, PwaService],
     },
   ],
   bootstrap: [AppComponent],

diff --git a/packages/ide/src/app/new-version-available/new-version-available.component.html b/packages/ide/src/app/new-version-available/new-version-available.component.html
@@ -0,0 +1,9 @@
+<strong>Uma nova versão do Portugol Webstudio está disponível</strong>
+
+<p>Lembre-se de salvar os seus arquivos antes de atualizar.</p>
+<p>Quando estiver pronto, basta atualizar a página ou clicar no botão abaixo.</p>
+
+<div class="buttons">
+  <button mat-raised-button color="primary" (click)="onReload()" type="button">Atualizar</button>
+  <button mat-button color="primary" (click)="onIgnore()" type="button">Ignorar</button>
+</div>
diff --git a/packages/ide/src/app/new-version-available/new-version-available.component.scss b/packages/ide/src/app/new-version-available/new-version-available.component.scss
@@ -0,0 +1,5 @@
+.buttons {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
diff --git a/packages/ide/src/app/new-version-available/new-version-available.component.ts b/packages/ide/src/app/new-version-available/new-version-available.component.ts
@@ -0,0 +1,28 @@
+import { Component, Inject, Optional } from "@angular/core";
+import { MatButtonModule } from "@angular/material/button";
+import { HotToastRef } from "@ngxpert/hot-toast";
+
+@Component({
+  selector: "app-new-version-available",
+  templateUrl: "./new-version-available.component.html",
+  styleUrls: ["./new-version-available.component.scss"],
+  standalone: true,
+  imports: [MatButtonModule],
+})
+export class NewVersionAvailableComponent {
+  constructor(@Optional() @Inject(HotToastRef) public toastRef?: HotToastRef<any>) {}
+
+  onReload() {
+    if (
+      confirm(
+        'Lembre-se de salvar seu código antes de recarregar a página!\n\nAperte "OK" para recarregar a página, ou "Cancelar" para abortar.',
+      )
+    ) {
+      window.location.reload();
+    }
+  }
+
+  onIgnore() {
+    this.toastRef?.close();
+  }
+}
diff --git a/packages/ide/src/app/pwa.service.ts b/packages/ide/src/app/pwa.service.ts
@@ -0,0 +1,45 @@
+import { Injectable } from "@angular/core";
+import { SwUpdate } from "@angular/service-worker";
+import { CreateHotToastRef, HotToastService } from "@ngxpert/hot-toast";
+import { NewVersionAvailableComponent } from "./new-version-available/new-version-available.component";
+
+@Injectable({ providedIn: "root" })
+export class PwaService {
+  loadingToast?: CreateHotToastRef<unknown>;
+
+  constructor(
+    private swUpdate: SwUpdate,
+    private toast: HotToastService,
+  ) {
+    if (!this.swUpdate.isEnabled) {
+      return;
+    }
+
+    this.swUpdate.versionUpdates.subscribe(event => {
+      switch (event.type) {
+        case "VERSION_DETECTED": {
+          this.loadingToast = this.toast.loading("Baixando atualizações…", {
+            autoClose: true,
+            duration: 5000,
+          });
+
+          break;
+        }
+
+        case "VERSION_READY": {
+          this.loadingToast?.close();
+          this.toast.success(NewVersionAvailableComponent, {
+            autoClose: false,
+            dismissible: true,
+          });
+
+          break;
+        }
+
+        default: {
+          break;
+        }
+      }
+    });
+  }
+}
diff --git a/packages/ide/src/app/tab-start/tab-start.component.html b/packages/ide/src/app/tab-start/tab-start.component.html
@@ -94,15 +94,14 @@
 
 <section class="info">
   <h4><svg-icon src="assets/mdi/newspaper.svg" svgAriaLabel="Ícone de jornal para notícias" />Novidades</h4>
+  <p><strong>02/05/2024:</strong> Portugol Webstudio como PWA: funcionamento offline</p>
   <p><strong>01/05/2024:</strong> Correção de retorno em função vazia</p>
   <p><strong>30/04/2024:</strong></p>
   <ul>
     <li>Melhorias de acessibilidade e ajustes na tela inicial e ícones</li>
     <li>Correção nas verificações de erros relacionados a escopo e tipos</li>
     <li>Melhorias na experiência de erros e de estabilidade no geral</li>
   </ul>
-  <p><strong>10/03/2024:</strong> Otimização de desempenho na análise semântica</p>
-  <p><strong>09/03/2024:</strong> Novo domínio: <strong>portugol.dev</strong> e experimento com propagandas</p>
 </section>
 
 <ins

diff --git a/packages/ide/src/styles.scss b/packages/ide/src/styles.scss
@@ -1,6 +1,7 @@
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
 @use "@angular/material" as mat;
+@use "node_modules/@ngxpert/hot-toast/src/styles/styles.scss";
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only