Notes
Notes - notes.io |
Sitemde aktif olarak PWA Bulunmakta.
Hatta çok iyi bir şekilde;
*
Fakat kendi sitenize PWA mı kurmak istiyorsunuz?
Bu gün nasıl PWA kuracağınızı anlatacağım.
# 1. İlk Olarak
Sitenizin ana sayfasına girin
bu genellikle index.html olur,
head içerisine
[CODE lang="html" title="index.html Head İçerisine Eklenecek Kodlar"] <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="uurcan7">
<meta name="apple-mobile-web-app-title" content="uurcan7">
<meta name="theme-color" content="#ff7f9f">
<meta name="msapplication-navbutton-color" content="#ff7f9f">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="https://uurcan7.xyz/">
<link rel="icon" type="image/png" sizes="192x192" href="https://uurcan7.xyz/png/icon-192x192.png">
<link rel="icon" type="image/png" sizes="256x256" href="https://uurcan7.xyz/png/icon-256x256.png">
<link rel="icon" type="image/png" sizes="384x384" href="https://uurcan7.xyz/png/icon-384x384.png">
<link rel="icon" type="image/png" sizes="512x512" href="https://uurcan7.xyz/png/icon-512x512.png">
<link rel="apple-touch-icon" type="image/png" sizes="192x192" href="https://uurcan7.xyz/png/icon-192x192.png">
<link rel="apple-touch-icon" type="image/png" sizes="256x256" href="https://uurcan7.xyz/png/icon-256x256.png">
<link rel="apple-touch-icon" type="image/png" sizes="384x384" href="https://uurcan7.xyz/png/icon-384x384.png">
<link rel="apple-touch-icon" type="image/png" sizes="512x512" href="https://uurcan7.xyz/png/icon-512x512.png">
<meta name="msapplication-TileImage" content="https://uurcan7.xyz/png/logo-144.png">
<meta name="msapplication-TileColor" content="#FF7f9f">
<link rel="manifest" href="https://uurcan7.xyz/manifest.webmanifest">[/CODE]
Kodlarını ekleyin
# 2. Sonrasında
body içerisine
[CODE lang="html" title="index.html Body İçerisine Eklenecek Kod"] <script>
if('serviceWorker'in navigator){window.addEventListener('load',function(){navigator.serviceWorker.register('sw.js').then(function(registration){console.log('ServiceWorker registration successful with scope: ',registration.scope);},function(err){console.log('ServiceWorker registration failed: ',err);});});}
</script>[/CODE]
Kodunu Ekleyin.
# 3. Sonra
manifest.webmanifest dosyası oluşturun ve içerisine;
[CODE title="manifest.webmanifest İçerisine Eklenecek Kodlar"]{
"name": "uurcan7 Portfolio",
"short_name": "uurcan7",
"description": "Burası uurcan7 Portfolio Sitesidir.",
"start_url": "https://uurcan7.xyz/",
"display": "minimal-ui",
"background_color": "#FF7f9f",
"theme_color": "#FF7f9f",
"orientation": "any",
"categories": ["portfolio", ""],
"dir": "auto",
"lang": "tr-TR",
"capture_links": "new-client",
"prefer_related_applications": false,
"related_applications": [
{
"platform": "appstore",
"url": "https://apps.apple.com/tr/app//?l=tr"
},
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=com..&hl=tr&gl=TR",
"id": "com.."
}
],
"icons": [
{
"src": "https://uurcan7.xyz/png/logo-144.png",
"type": "image/png", "sizes": "144x144", "purpose": "any"
},
{
"src": "https://uurcan7.xyz/png/icon-192x192.png",
"type": "image/png", "sizes": "192x192", "purpose": "any"
},
{
"src": "https://uurcan7.xyz/png/icon-256x256.png",
"type": "image/png", "sizes": "256x256", "purpose": "any"
},
{
"src": "https://uurcan7.xyz/png/icon-384x384.png",
"type": "image/png","sizes": "384x384", "purpose": "any"
},
{
"src": "https://uurcan7.xyz/png/icon-512x512.png",
"type": "image/png", "sizes": "512x512", "purpose": "any"
},
{
"src": "https://uurcan7.xyz/png/maskable_icon.png",
"type": "image/png", "sizes": "120x120", "purpose": "maskable"
}
],
"shortcuts": [
{
"name": "uurcan7 Discord Sunucusu",
"short_name": "uurcan7 Discord",
"description": "uurcan7 | Topluluk Discord Sunucuma Gelmek İçin Tıkla!",
"url": "https://top.gg/servers/829993665194885173?utm_source=homescreen",
"icons": [{ "src": "https://uurcan7.xyz/png/discord.png", "sizes": "256x256" }]
},
{
"name": "",
"short_name": "",
"description": "",
"url": "//",
"icons": [{ "src": "//", "sizes": "x" }]
}
],
"screenshots": [
{
"src": "https://uurcan7.xyz/png/uurcan7.xyz.png",
"type": "image/png",
"sizes": "1920x1080"
},
{
"src": "",
"type": "image/",
"sizes": "x"
}
]
}[/CODE]
Kodlarını Ekleyin.
# 4. Sonrasında
sw.js Oluşturun ve içerisine girin,
[CODE lang="javascript" title="sw.js İçerisine Eklenecek Kodlar"]var CACHE_NAME = 'uurcan7o';
var urlsToCache = [
'/'
];
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});
self.addEventListener('activate', function(event) {
var cacheWhitelist = ['uurcan7o'];
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});[/CODE]
Kodlarını Ekleyin.
# 5. Sonra,
Bunları Sitenizin Kaynak Klasörüne Atın.
***
Logolar nasıl yapılır onları da anlatalım,
Adobe Photoshop Kullanacaklar için
300 ppi
sRGB
16 bit
Ayarlarını öneriyorum
[PWA Logoları](https://www.simicart.com/manifest-generator.html/) [Maskable](https://maskable.app/)
Şu şekilde yapılıyor:
PWA Logoları diye yukarıda yazdığım yazıya tıklayın
Açılan sitede * İle doldurulması zorunlu kutucukları random bir şekilde doldurun
Minimum 512x512 Olarak herhangi bir resmi
Icons* Yazan kısımdan seçin
Generate Manifest butonuna basın İnen zip Dosyasından
.png Olan tüm resimleri masaüstünüze atın.
PWA Logoları tamamdır
Maskable logoyu ise
Yukarıda ki Maskable yazısına tıklayın
Açılan siteden Editor yazısına tıklayın
İstediğiniz rengi seçin ve logonuzu yükleyin
Sonra da indirin
Umarım sizlere yardımcı olabilmişimdir!
|
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
