fix: add browser warning message (#4048)

dfinity · Jan 6, 2025 · c03e41a · c03e41a
1 parent 79de1d0
commit c03e41a
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # UNRELEASED
 
+### fix: template frontends now have unsupported browser warnings
+
+DFX's default security headers cause Safari to break when viewing local canisters. Warning messages
+have been added to the frontend project templates when the page is broken that indicate to try switching
+browsers.
+
 ### feat: impersonating sender of requests to a local PocketIC instance
 
 `dfx canister call`, `dfx canister status`, and `dfx canister update-settings` take

diff --git a/src/dfx/assets/project_templates/react/src/__frontend_name__/index.html b/src/dfx/assets/project_templates/react/src/__frontend_name__/index.html
@@ -10,6 +10,10 @@
 </head>
 
 <body>
+  <div class="browser-warning">
+    ⚠️ If this page appears broken, try reloading. If the problem persists, try switching browsers; Chrome or
+    Firefox are recommended.
+  </div>
   <div id="root"></div>
   <script type="module" src="/src/main.jsx"></script>
 </body>

diff --git a/src/dfx/assets/project_templates/react/src/__frontend_name__/src/index.scss b/src/dfx/assets/project_templates/react/src/__frontend_name__/src/index.scss
@@ -35,3 +35,7 @@ button[type="submit"] {
 #greeting:empty {
   display: none;
 }
+
+.browser-warning {
+  display: none;
+}
diff --git a/src/dfx/assets/project_templates/svelte/src/__frontend_name__/src/app.html b/src/dfx/assets/project_templates/svelte/src/__frontend_name__/src/app.html
@@ -10,6 +10,10 @@
 </head>
 
 <body data-sveltekit-preload-data="hover">
+	<div class="browser-warning">
+		⚠️ If this page appears broken, try reloading. If the problem persists, try switching browsers; Chrome or
+		Firefox are recommended.
+	</div>
 	<div style="display: contents">%sveltekit.body%</div>
 </body>
 

diff --git a/src/dfx/assets/project_templates/svelte/src/__frontend_name__/src/index.scss b/src/dfx/assets/project_templates/svelte/src/__frontend_name__/src/index.scss
@@ -35,3 +35,7 @@ button[type="submit"] {
 #greeting:empty {
   display: none;
 }
+
+.browser-warning {
+  display: none;
+}
diff --git a/src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/index.html b/src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/index.html
@@ -9,6 +9,10 @@
 </head>
 
 <body>
+  <div class="browser-warning">
+    ⚠️ If this page appears broken, try reloading. If the problem persists, try switching browsers; Chrome or
+    Firefox are recommended.
+  </div>
   <div id="root"></div>
   <script type="module" src="/src/main.js"></script>
 </body>

diff --git a/src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/src/index.scss b/src/dfx/assets/project_templates/vanilla_js/src/__frontend_name__/src/index.scss
@@ -35,3 +35,7 @@ button[type="submit"] {
 #greeting:empty {
   display: none;
 }
+
+.browser-warning {
+  display: none;
+}
diff --git a/src/dfx/assets/project_templates/vue/src/__frontend_name__/index.html b/src/dfx/assets/project_templates/vue/src/__frontend_name__/index.html
@@ -14,6 +14,10 @@
     <strong>We're sorry but this application doesn't work properly without
       JavaScript enabled. Please enable it to continue.</strong>
   </noscript>
+  <div class="browser-warning">
+    ⚠️ If this page appears broken, try reloading. If the problem persists, try switching browsers; Chrome or
+    Firefox are recommended.
+  </div>
   <div id="app"></div>
   <script src="/src/main.js" type="module"></script>
 </body>

diff --git a/src/dfx/assets/project_templates/vue/src/__frontend_name__/src/index.scss b/src/dfx/assets/project_templates/vue/src/__frontend_name__/src/index.scss
@@ -35,3 +35,7 @@ button[type="submit"] {
 #greeting:empty {
   display: none;
 }
+
+.browser-warning {
+  display: none;
+}