LƯU Ý CỰC MẠNH, CHỈ DÙNG CHO WEBSITE ĐÃ CÓ SSL VÀ DÙNG CLOUDFLARE (DO DÙNG WAP4)
CHỈ DÀNH CHO WEBSITE SFW (KHÔNG XXX)
KHI RÚT SẼ PHẢI QUA BƯỚC PHÊ DUYỆT
Chả là Dai thấy có một trang web dùng arc.io mà biết trang này.
Thay vì hiển thị quảng cáo thì trang này lấy người dùng làm CDN P2P
Chi tiết thì truy cậphttps://arc.io/
Mới thêm 1 ngày được $0.003741
Để trang này yêu cầu thêm qua service worker ~~, sẵn tiện hướng dẫn pwa luôn ~~
WAP4
Tạo manifest
dùnghttps://www.simicart.com/manifest-generator.html/
hoặchttps://app-manifest.firebaseapp.com/
ảnh upload lên/images
upload file manifest.webmanifest lên /js
sửa link ảnh lại
Thêm app.js
tạo file app.js ở /js
if('serviceWorker' in navigator){
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('service worker registered'))
.catch(err => console.log('service worker not registered', err));
}thêm sw.js ở root
importScripts('https://arc.io/arc-sw-core.js')
const staticCacheName = 'site-static-v2';
const assets = [
'https://fonts.googleapis.com/css?family=Quicksand',
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
];
// install event
self.addEventListener('install', evt => {
evt.waitUntil(
caches.open(staticCacheName).then((cache) => {
console.log('caching shell assets');
cache.addAll(assets);
})
);
});
// activate event
self.addEventListener('activate', evt => {
evt.waitUntil(
caches.keys().then(keys => {
return Promise.all(keys
.filter(key => key !== staticCacheName)
.map(key => caches.delete(key))
);
})
);
});
// When we change the name we could have multiple cache, to avoid that we need to delet the old cache, so with this function we check the key that is our cache naming, if it is different from the actual naming we delete it, in this way we will always have only the last updated cache.
// fetch event
self.addEventListener('fetch', evt => {
evt.respondWith(
caches.match(evt.request).then(cacheRes => {
return cacheRes || fetch(evt.request);
})
);
});ở chỗ assets có thể sửa lại nội dung cần cache ở web bạn
thêm
<link rel="manifest" href="/js/manifest.webmanifest">
<script src="/js/app.js" type="text/javascript"></script>vào header của web
ARC.IO
Ởhttps://portal.arc.io/ thêm web site của bạn
Xem hướng dẫn của arc.io ở bước thứ 5: 5. Add Arc's widget to your site
thêm code ở Add your Arc widget vào header web
CLOUDFLARE
làm theo bước 6 ở arc.io
Tạo worker với code
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
/**
* @param {Request} request
*/
async function handleRequest(request) {
const response = await fetch(request)
var headers = new Headers();
for (var kv of response.headers.entries()) {
headers.append(kv[0], kv[1]);
}
const url = request.url
headers.set("Content-Type", get_content_type(url))
headers.set("x-julia-test", "edited headers!")
response.headers = headers
return new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: headers})
return response
}
function get_content_type(url) {
if (url.endsWith(".svg")) {
return "image/svg+xml"
} else if (url.endsWith(".png")) {
return "image/png"
} else if (url.endsWith(".jpg")) {
return "image/jpg"
} else if (url.endsWith(".css")) {
return "text/css"
} else if (url.endsWith(".pdf")) {
return "application/pdf"
} else if (url.endsWith(".js")) {
return "application/javascript"
} else if (url.endsWith(".json")) {
return "application/json"
} else if (url.endsWith(".xml")) {
return "text/xml"
} else if (url.endsWith(".txt")) {
return "text/plain; charset=UTF-8"
} else if (url.endsWith(".webmanifest")) {
return "application/manifest+json"
} else {
return "text/html; charset=UTF-8"
}
} ở tab worker của domain
=> add route
Route tendomancuaban/sw.js
Worker là cái worker vừa tạo
XONG
Cơ mà kiếm chả được nhiêu đâu~~ tới giờ mới dorew mới 0.3$