Skip to content

Commit

Permalink
Add PWA compatibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@calvinmclean
calvinmclean committed Aug 26, 2024
1 parent caa3c34 commit eff11b4
Show file tree
Hide file tree
Showing 6 changed files with 27 additions and 18 deletions.
8 changes: 8 additions & 0 deletions garden-app/server/api.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,14 @@ func NewAPI() *API {
api.API.
AddCustomRoute(http.MethodGet, "/metrics", promhttp.Handler()).
AddCustomRoute(http.MethodGet, "/", http.RedirectHandler("/gardens", http.StatusFound)).
AddCustomRoute(http.MethodGet, "/manifest.json", http.HandlerFunc(func(w http.ResponseWriter, _ *http.Request) {
// manifest.json enables PWA for mobile devices
_, _ = w.Write([]byte(`{
"name": "Garden App",
"start_url": "/gardens",
"display": "standalone"
}`))
})).
AddNestedAPI(api.gardens).
AddNestedAPI(api.weatherClients).
AddNestedAPI(api.notificationClients).
Expand Down
3 changes: 2 additions & 1 deletion garden-app/server/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Garden App</title>
<link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
Expand Down Expand Up @@ -59,4 +60,4 @@
</body>

</html>
{{ end }}
{{ end }}
6 changes: 3 additions & 3 deletions garden-app/server/vcr/testdata/vcr_server/fixtures/create_and_delete_waterschedule.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ interactions:
trailer: {}
content_length: -1
uncompressed: false
body: "\n\n<!doctype html>\n<html>\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Garden App</title>\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css\" />\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n</head>\n\n<style>\n div.htmx-swapping {\n opacity: 0;\n transition: opacity 1s ease-out;\n }\n</style>\n\n<body>\n <div id=\"create-modal-here\"></div>\n <nav class=\"uk-navbar-container\">\n <div class=\"uk-container\">\n <div uk-navbar>\n <div class=\"uk-navbar-left\">\n <ul class=\"uk-navbar-nav\">\n <li class=\"uk-active\" ><a href=\"/gardens\">Gardens</a>\n </li>\n <li ><a\n href=\"/water_schedules?exclude_weather_data=true\">Water Schedules</a></li>\n <li ><a\n href=\"/weather_clients\">Weather Clients</a></li>\n <li>\n </li>\n </ul>\n </div>\n \n <div class=\"uk-navbar-right\">\n <ul class=\"uk-navbar-nav\">\n <li>\n <a hx-get=\"/gardens/components?type=create_modal\" hx-headers='{\"Accept\": \"text/html\"}'\n hx-target=\"#create-modal-here\"\n _=\"on htmx:afterOnLoad wait 10ms then add .uk-open to #modal\">\n <span uk-icon=\"icon: plus-circle; ratio: 1.25\"></span>\n </a>\n </li>\n </ul>\n </div>\n \n </div>\n </div>\n </nav>\n \n\n<div hx-swap=\"outerHTML\" hx-get=\"/gardens?refresh=true\" hx-headers='{\"Accept\": \"text/html\"}'\n hx-trigger=\"newGarden from:body\" uk-grid>\n \n</div>\n\n\n</body>\n\n</html>\n\n"
body: "\n\n<!doctype html>\n<html>\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Garden App</title>\n <link rel=\"manifest\" href=\"/manifest.json\" />\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css\" />\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n</head>\n\n<style>\n div.htmx-swapping {\n opacity: 0;\n transition: opacity 1s ease-out;\n }\n</style>\n\n<body>\n <div id=\"create-modal-here\"></div>\n <nav class=\"uk-navbar-container\">\n <div class=\"uk-container\">\n <div uk-navbar>\n <div class=\"uk-navbar-left\">\n <ul class=\"uk-navbar-nav\">\n <li class=\"uk-active\" ><a href=\"/gardens\">Gardens</a>\n </li>\n <li ><a\n href=\"/water_schedules?exclude_weather_data=true\">Water Schedules</a></li>\n <li ><a\n href=\"/weather_clients\">Weather Clients</a></li>\n <li>\n </li>\n </ul>\n </div>\n \n <div class=\"uk-navbar-right\">\n <ul class=\"uk-navbar-nav\">\n <li>\n <a hx-get=\"/gardens/components?type=create_modal\" hx-headers='{\"Accept\": \"text/html\"}'\n hx-target=\"#create-modal-here\"\n _=\"on htmx:afterOnLoad wait 10ms then add .uk-open to #modal\">\n <span uk-icon=\"icon: plus-circle; ratio: 1.25\"></span>\n </a>\n </li>\n </ul>\n </div>\n \n </div>\n </div>\n </nav>\n \n\n<div hx-swap=\"outerHTML\" hx-get=\"/gardens?refresh=true\" hx-headers='{\"Accept\": \"text/html\"}'\n hx-trigger=\"newGarden from:body\" uk-grid>\n \n</div>\n\n\n</body>\n\n</html>\n\n"
headers:
Content-Type:
- text/html; charset=utf-8
Expand Down Expand Up @@ -287,7 +287,7 @@ interactions:
trailer: {}
content_length: -1
uncompressed: false
body: "\n\n<!doctype html>\n<html>\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Garden App</title>\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css\" />\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n</head>\n\n<style>\n div.htmx-swapping {\n opacity: 0;\n transition: opacity 1s ease-out;\n }\n</style>\n\n<body>\n <div id=\"create-modal-here\"></div>\n <nav class=\"uk-navbar-container\">\n <div class=\"uk-container\">\n <div uk-navbar>\n <div class=\"uk-navbar-left\">\n <ul class=\"uk-navbar-nav\">\n <li ><a href=\"/gardens\">Gardens</a>\n </li>\n <li class=\"uk-active\" ><a\n href=\"/water_schedules?exclude_weather_data=true\">Water Schedules</a></li>\n <li ><a\n href=\"/weather_clients\">Weather Clients</a></li>\n <li>\n </li>\n </ul>\n </div>\n \n <div class=\"uk-navbar-right\">\n <ul class=\"uk-navbar-nav\">\n <li>\n <a hx-get=\"/water_schedules/components?type=create_modal\" hx-headers='{\"Accept\": \"text/html\"}'\n hx-target=\"#create-modal-here\"\n _=\"on htmx:afterOnLoad wait 10ms then add .uk-open to #modal\">\n <span uk-icon=\"icon: plus-circle; ratio: 1.25\"></span>\n </a>\n </li>\n </ul>\n </div>\n \n </div>\n </div>\n </nav>\n \n\n<div hx-swap=\"outerHTML\" hx-get=\"/water_schedules?refresh=true\" hx-headers='{\"Accept\": \"text/html\"}'\n hx-trigger=\"load, newWaterSchedule from:body\" uk-grid>\n \n</div>\n\n\n</body>\n\n</html>\n\n"
body: "\n\n<!doctype html>\n<html>\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Garden App</title>\n <link rel=\"manifest\" href=\"/manifest.json\" />\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css\" />\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n</head>\n\n<style>\n div.htmx-swapping {\n opacity: 0;\n transition: opacity 1s ease-out;\n }\n</style>\n\n<body>\n <div id=\"create-modal-here\"></div>\n <nav class=\"uk-navbar-container\">\n <div class=\"uk-container\">\n <div uk-navbar>\n <div class=\"uk-navbar-left\">\n <ul class=\"uk-navbar-nav\">\n <li ><a href=\"/gardens\">Gardens</a>\n </li>\n <li class=\"uk-active\" ><a\n href=\"/water_schedules?exclude_weather_data=true\">Water Schedules</a></li>\n <li ><a\n href=\"/weather_clients\">Weather Clients</a></li>\n <li>\n </li>\n </ul>\n </div>\n \n <div class=\"uk-navbar-right\">\n <ul class=\"uk-navbar-nav\">\n <li>\n <a hx-get=\"/water_schedules/components?type=create_modal\" hx-headers='{\"Accept\": \"text/html\"}'\n hx-target=\"#create-modal-here\"\n _=\"on htmx:afterOnLoad wait 10ms then add .uk-open to #modal\">\n <span uk-icon=\"icon: plus-circle; ratio: 1.25\"></span>\n </a>\n </li>\n </ul>\n </div>\n \n </div>\n </div>\n </nav>\n \n\n<div hx-swap=\"outerHTML\" hx-get=\"/water_schedules?refresh=true\" hx-headers='{\"Accept\": \"text/html\"}'\n hx-trigger=\"load, newWaterSchedule from:body\" uk-grid>\n \n</div>\n\n\n</body>\n\n</html>\n\n"
headers:
Content-Type:
- text/html; charset=utf-8
Expand Down Expand Up @@ -830,7 +830,7 @@ interactions:
trailer: {}
content_length: -1
uncompressed: false
body: "\n\n<!doctype html>\n<html>\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Garden App</title>\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css\" />\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n</head>\n\n<style>\n div.htmx-swapping {\n opacity: 0;\n transition: opacity 1s ease-out;\n }\n</style>\n\n<body>\n <div id=\"create-modal-here\"></div>\n <nav class=\"uk-navbar-container\">\n <div class=\"uk-container\">\n <div uk-navbar>\n <div class=\"uk-navbar-left\">\n <ul class=\"uk-navbar-nav\">\n <li class=\"uk-active\" ><a href=\"/gardens\">Gardens</a>\n </li>\n <li ><a\n href=\"/water_schedules?exclude_weather_data=true\">Water Schedules</a></li>\n <li ><a\n href=\"/weather_clients\">Weather Clients</a></li>\n <li>\n </li>\n </ul>\n </div>\n \n <div class=\"uk-navbar-right\">\n <ul class=\"uk-navbar-nav\">\n <li>\n <a hx-get=\"/gardens/components?type=create_modal\" hx-headers='{\"Accept\": \"text/html\"}'\n hx-target=\"#create-modal-here\"\n _=\"on htmx:afterOnLoad wait 10ms then add .uk-open to #modal\">\n <span uk-icon=\"icon: plus-circle; ratio: 1.25\"></span>\n </a>\n </li>\n </ul>\n </div>\n \n </div>\n </div>\n </nav>\n \n\n<div hx-swap=\"outerHTML\" hx-get=\"/gardens?refresh=true\" hx-headers='{\"Accept\": \"text/html\"}'\n hx-trigger=\"newGarden from:body\" uk-grid>\n \n</div>\n\n\n</body>\n\n</html>\n\n"
body: "\n\n<!doctype html>\n<html>\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Garden App</title>\n <link rel=\"manifest\" href=\"/manifest.json\" />\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css\" />\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n</head>\n\n<style>\n div.htmx-swapping {\n opacity: 0;\n transition: opacity 1s ease-out;\n }\n</style>\n\n<body>\n <div id=\"create-modal-here\"></div>\n <nav class=\"uk-navbar-container\">\n <div class=\"uk-container\">\n <div uk-navbar>\n <div class=\"uk-navbar-left\">\n <ul class=\"uk-navbar-nav\">\n <li class=\"uk-active\" ><a href=\"/gardens\">Gardens</a>\n </li>\n <li ><a\n href=\"/water_schedules?exclude_weather_data=true\">Water Schedules</a></li>\n <li ><a\n href=\"/weather_clients\">Weather Clients</a></li>\n <li>\n </li>\n </ul>\n </div>\n \n <div class=\"uk-navbar-right\">\n <ul class=\"uk-navbar-nav\">\n <li>\n <a hx-get=\"/gardens/components?type=create_modal\" hx-headers='{\"Accept\": \"text/html\"}'\n hx-target=\"#create-modal-here\"\n _=\"on htmx:afterOnLoad wait 10ms then add .uk-open to #modal\">\n <span uk-icon=\"icon: plus-circle; ratio: 1.25\"></span>\n </a>\n </li>\n </ul>\n </div>\n \n </div>\n </div>\n </nav>\n \n\n<div hx-swap=\"outerHTML\" hx-get=\"/gardens?refresh=true\" hx-headers='{\"Accept\": \"text/html\"}'\n hx-trigger=\"newGarden from:body\" uk-grid>\n \n</div>\n\n\n</body>\n\n</html>\n\n"
headers:
Content-Type:
- text/html; charset=utf-8
Expand Down
Loading

0 comments on commit eff11b4

Please sign in to comment.