PWA에서 홈 화면에 추가하는 아이콘을 무작위로 시도했습니다.
실현하고 싶은 것
PWA로서 홈 화면에 아이콘을 추가할 때 자신이 좋아하는 아이콘을 설정할 수 있거나 무작위로 아이콘을 설정할 수 있도록 하고 싶다.
어떤 장면에서 사용합니까?
요 전날 잘라!이라는 서비스를 출시했습니다.
출시 기사 : htps : // 코 m / 미나카
이것은, 2차원의 정부인을 기록하거나, 매 쿨 바뀌는 애니메이션의 아내의 히스토리를 남길 수 있게 하고 싶다고 하는 컨셉으로 만든 서비스입니다만, 예를 들면 이런 서비스의 때에, 정부인에게 등록한 화상 아이콘을 원하지 않습니까? 나는 하고 싶다.
또한 같은 URL로 전달하고 있는 서비스로, 예를 들면 팀마다 아이콘을 바꾸고 싶다든가, 게임이라고 하면 자신이 만든 캐릭터나 팀의 아이콘을 지정할 수 있다든가, 다양한 장면에서 사용할 수 있을 것 같은 기분 합니다.
이미지
구현해 보았다.
이번에는 Ruby on Rails로 구현해 보았습니다. 다른 프레임워크에서도 문제없이 구현할 수 있는 범위라고 생각합니다.
리포지토리 : htps : // 기주 b. 코 m / 미나 카와 다이 키 / dy nami c
실행 방법
touch .env
docker-compose run --rm web bundle
docker-compose run --rm web rails db:create
docker-compose up
이 앱은 무작위로 2장의 아이콘이 전환되도록 되어 있습니다.
구현
config/routes.rb
Rails.application.routes.draw do
root 'home#index'
get 'manifest.json', to: 'json#manifest'
end
app/controllers/json_controller.rb
class JsonController < ApplicationController
def manifest
end
end
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="/manifest.json">
</head>
<body>
<%= yield %>
</body>
</html>
app/views/home/index.html
<h1>Dynamic Icon App</h1>
app/views/json/manifest.json.erb
<% index = rand(2) + 1 %>
{
"name": "DynamicIconApp",
"short_name": "DIA",
"start_url": "/",
"icons": [
{
"src": "icon<%=index %>.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#fcd550",
"background_color": "#ffb919",
"display": "standalone",
"orientation": "portrait"
}
특히 바뀐 구현은 하지 않고,
manifest.json.erb 를 작성하는 것으로, 동적으로 manifest.json 를 작성하고 있는 것이 미소입니다.여기의 동적 생성하는 부분을, 로그인하고 있는 유저의 아이콘으로 하거나 등, 여러가지 하는 일은 있다고 생각합니다.
또, 아이콘 이외의 부분도 동적으로 생성할 수 있으므로, 동적으로 다양한
manifest.json 를 작성 가능합니다.결론
이번 기술을 이용해 잘라! 의 PWA화를 진행해 나가려고 합니다.
또, 네이티브 어플에는 실현할 수 없는 부분이 PWA에서도 할 수 있는 것이 재미의 하나라고 생각합니다.
향후 PWA의 움직임에 주목하네요.
Reference
이 문제에 관하여(PWA에서 홈 화면에 추가하는 아이콘을 무작위로 시도했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/minakawa-daiki/items/572b3f7c2d2dd4bf736c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
