Add Support for iOS "Add to Homescreen"

* Adds basic Manifest.json
 * Adds Meta Tags for iOS
 * Adds Meta Tags for Android
 * Adds Logo for Manifest.json
 * Adds iOS Logo for homescreen
This commit is contained in:
JPyke3 2021-02-01 11:10:53 +01:00
parent bfcc4c985d
commit e837d84105
No known key found for this signature in database
GPG Key ID: C7833DB15753380A
5 changed files with 47 additions and 1 deletions

View File

@ -19,6 +19,21 @@ async fn style() -> HttpResponse {
HttpResponse::Ok().content_type("text/css").body(include_str!("../static/style.css")) HttpResponse::Ok().content_type("text/css").body(include_str!("../static/style.css"))
} }
// Required for creating a PWA
async fn manifest() -> HttpResponse {
HttpResponse::Ok().content_type("application/json").body(include_str!("../static/manifest.json"))
}
// Required for the manifest to be valid
async fn pwa_logo() -> HttpResponse {
HttpResponse::Ok().content_type("image/png").body(include_bytes!("../static/logo.png").as_ref())
}
// Required for iOS App Icons
async fn iphone_logo() -> HttpResponse {
HttpResponse::Ok().content_type("image/png").body(include_bytes!("../static/touch-icon-iphone.png").as_ref())
}
async fn robots() -> HttpResponse { async fn robots() -> HttpResponse {
HttpResponse::Ok() HttpResponse::Ok()
.header("Cache-Control", "public, max-age=1209600, s-maxage=86400") .header("Cache-Control", "public, max-age=1209600, s-maxage=86400")
@ -75,7 +90,7 @@ async fn main() -> std::io::Result<()> {
.header("X-Frame-Options", "DENY") .header("X-Frame-Options", "DENY")
.header( .header(
"Content-Security-Policy", "Content-Security-Policy",
"default-src 'none'; media-src 'self'; style-src 'self' 'unsafe-inline'; base-uri 'none'; img-src 'self' data:; form-action 'self'; frame-ancestors 'none';", "default-src 'none'; manifest-src 'self'; media-src 'self'; style-src 'self' 'unsafe-inline'; base-uri 'none'; img-src 'self' data:; form-action 'self'; frame-ancestors 'none';",
), ),
) )
// Default service in case no routes match // Default service in case no routes match
@ -84,6 +99,9 @@ async fn main() -> std::io::Result<()> {
.route("/style.css/", web::get().to(style)) .route("/style.css/", web::get().to(style))
.route("/favicon.ico/", web::get().to(favicon)) .route("/favicon.ico/", web::get().to(favicon))
.route("/robots.txt/", web::get().to(robots)) .route("/robots.txt/", web::get().to(robots))
.route("/manifest.json/", web::get().to(manifest))
.route("/logo.png/", web::get().to(pwa_logo))
.route("/touch-icon-iphone.png/", web::get().to(iphone_logo))
// Proxy media through Libreddit // Proxy media through Libreddit
.route("/proxy/{url:.*}/", web::get().to(proxy::handler)) .route("/proxy/{url:.*}/", web::get().to(proxy::handler))
// Browse user profile // Browse user profile

BIN
static/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

15
static/manifest.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "Libreddit",
"short_name": "Libreddit",
"display": "standalone",
"background_color": "#2A3443",
"description": "An alternative private front-end to Reddit",
"theme_color": "#2A3443",
"icons": [
{
"src": "./logo.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -6,6 +6,19 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="View on Libreddit, an alternative private front-end to Reddit."> <meta name="description" content="View on Libreddit, an alternative private front-end to Reddit.">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- General PWA -->
<meta name="theme-color" content="#009a9a"/>
<!-- iOS Application -->
<meta name="apple-mobile-web-app-title" content="Libreddit">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- Android -->
<meta name="theme-color" content="#2A3443">
<meta name="mobile-web-app-capable" content="yes">
<!-- iOS Logo -->
<link href="/touch-icon-iphone.png" rel="apple-touch-icon">
<!-- PWA Manifest -->
<link rel="manifest" type="application/json" href="/manifest.json">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href="/style.css"> <link rel="stylesheet" type="text/css" href="/style.css">
{% endblock %} {% endblock %}