fix: add browser warning message (#4048)

Author: adamspofford

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

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>

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;
+}

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>
 

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;
+}

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>

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;
+}

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>

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;
+}