Aplikasi wéb anu progresif (PWA) mangrupikeun jinis perangkat lunak aplikasi anu dikirimkeun ngalangkungan wéb, diwangun nganggo téknologi wéb umum kalebet HTML, CSS sareng JavaScript. Éta ditujukeun pikeun dianggo dina sagala platform anu ngagunakeun panyungsi anu patuh standar, kalebet dina desktop sareng alat sélulér. Kusabab aplikasi wéb anu progresif mangrupikeun jinis halaman wéb atanapi halaman wéb anu dikenal salaku aplikasi wéb, aranjeunna henteu meryogikeun bundling atanapi distribusi anu misah. Teu aya sarat pikeun pangembang atanapi pangguna masang aplikasi wéb ngalangkungan sistem distribusi digital.
Ieu léngkah pikeun ngarobah halaman wéb anjeun kana PWA.
1. pendaptaran Manifest
Sateuacan masang PWA, browser kedah parios naha file manifes parantos aya. Anjeun tiasa nganggo salah sahiji cara ieu pikeun ngadaptar pagawé jasa.
a. Plugin
Pasang plugin skrip sareng tambahkeun kode ieu.
<link rel="manifest" href="/su/manifest.json">
b. Editor file téma
Sateuacan nganggo metodeu ieu, pastikeun anjeun ngajaga dokuméntasi lengkep sareng cadangan halaman wéb WordPress anjeun.
- arahkeun ka WP Admin> Penampilan> Téma File Editor.
- milih functions.php.
- Selapkeun kodeu handap dina garis panungtungan dina functions.php.
//manifest file
add_action( 'wp_head', 'inc_manifest_link' );
// Creates the link tag
function inc_manifest_link() {
echo '<link rel="manifest" href="/su/manifest.json">';
}
2. file Manifest
Manif aplikasi wéb mangrupikeun spésifikasi W3C anu nangtoskeun manifes basis JSON (biasana dilabélan manif.json) pikeun nyayogikeun pamekar tempat terpusat nempatkeun metadata pakait sareng aplikasi wéb kalebet:
- Ngaran aplikasi wéb.
- Tumbu ka ikon aplikasi wéb atawa objék gambar.
- URL anu dipikaresep pikeun ngaluncurkeun atanapi muka aplikasi wéb.
- Data konfigurasi aplikasi wéb.
- Orientasi standar tina aplikasi wéb.
- Pilihan pikeun nyetél mode tampilan, contona, layar pinuh.
Metadata ieu penting pisan pikeun hiji aplikasi pikeun ditambahkeun kana layar utama atawa lamun heunteu didaptarkeun barengan aktip asli. Jieun file anyar disebut manifest.json dina akar situs anjeun. file kedah ngawengku handap.
{
"name": can be used by app stores or browsers on startup screens and prompts.
"short-name": used to display the name to the user within the icon. For example: in the homescreen.
"description": provides additional context about the app.
"dir": Direction of the text.
Values: ltr(left to right),
rtl (right to left),
auto
"lang": Language of the text.
Example: en (English)
"icons": Array of icons that the browser can choose from, including size and type.
[{
"src": source,
"sizes": i.e. "192x192",
"type": i.e. "image/png",
"purpose": the purpose of the image in the context of the host OS.
Values: badge, maskable, any
}]
"display": Preferred display mode for the website.
Values: fullscreen,
standalone,
minimal-ui,
browser.
"scope": it represents the set of urls that can be viewed through the installable web context, if the user navigates outside this scope, those pages will be opened in a standard browser.
Example:"https://example.com/", "/app/"
"orientation": you can enforce the orientation of your app, it can be ommited.
Example: natural (default).
"background_color": tells the browser what color to use on the startup splash screen that users will see when they launch your app.
Example: "#456BD9"
"theme_color": is used by some browsers to tint the status bar, address bar, and other parts of the browser user interface.
"start_url": indicates what page should launch when someone opens your progressive web app.
"categories": This is intended to be used by app stores to categorize your app.
Example: ["business", "technology", "web"]
}
3. Pendaptaran padamel
Unggal pagawé jasa kedah didaptarkeun dina panyungsi klien. Pagawe jasa ngalangkungan siklus hirup tilu léngkah pendaptaran, pamasangan sareng aktivasina. Pendaptaran ngalibatkeun nyaritakeun ka peramban lokasi pagawé jasa dina persiapan dipasang. Kayaning JavaScript sanésna, anjeun ngamuat skrip service-worker.js dina HTML anjeun. Sakali ngajalankeun, éta bakal muka conto na nyalira, janten moal aya aksés kana elemen modél obyék anu disebarkeun.
Anjeun tiasa nganggo salah sahiji cara ieu pikeun ngadaptar pagawé jasa.
a. Plugin
Pasang plugin skrip sareng tambahkeun kode ieu.
<script src='/service-worker-register.js'></script>
b. Editor file téma
Sateuacan nganggo metodeu ieu, pastikeun anjeun ngajaga dokuméntasi lengkep sareng cadangan halaman wéb WordPress anjeun.
- arahkeun ka WP Admin> Penampilan> Téma File Editor.
- milih functions.php.
- Selapkeun kodeu handap dina garis panungtungan dina functions.php.
//service worker registration
function register_my_service_worker () {
echo "<script>navigator.serviceWorker.register('/service-worker.js')</script>";
}
add_action ( 'wp_head', 'register_my_service_worker' );
c. index.xml
Tambihkeun kode ieu ka anjeun index.xml file.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js', {
scope: './'
}).then(function (registration) {
var serviceWorker;
if (registration.installing) {
serviceWorker = registration.installing;
document.querySelector('#kind').textContent = 'installing';
} else if (registration.waiting) {
serviceWorker = registration.waiting;
document.querySelector('#kind').textContent = 'waiting';
} else if (registration.active) {
serviceWorker = registration.active;
document.querySelector('#kind').textContent = 'active';
}
if (serviceWorker) {
// logState(serviceWorker.state);
serviceWorker.addEventListener('statechange', function (e) {
// logState(e.target.state);
});
}
}).catch (function (error) {
// Something went wrong during registration. The service-worker.js file
// might be unavailable or contain a syntax error.
});
} else {
// The current browser doesn't support service workers.
// Perhaps it is too old or we are not in a Secure Context.
}
4. file pagawe jasa
Pagawe jasa mangrupikeun padamel wéb anu nerapkeun proksi jaringan anu tiasa diprogram anu tiasa ngaréspon paménta wéb / HTTP tina dokumén utama. Éta tiasa parios kasadiaan sérpér jauh sareng kanggo cache eusi nalika sérver éta sayogi, sareng ngaladénkeun kontén éta engké kana dokumén. Pagawe jasa ngalangkungan siklus hirup tilu léngkah pendaptaran, pamasangan sareng aktivasina. Saatos pendaptaran, siklus instalasi sareng aktivasina nuturkeun.
Instalasi lumangsung nalika teu aya pagawé jasa dipasang dina pangotéktak pikeun wéb, atanapi upami aya pembaruan ka pagawé jasa. Aktipikasi lumangsung nalika sadaya halaman PWAs ditutup, janten teu aya konflik antara vérsi anu sateuacanna sareng anu terakhir. Siklus hirup ogé ngabantosan konsistén nalika ngaganti antara vérsi pagawé jasa kumargi ngan ukur pagawé jasa tunggal anu tiasa aktip pikeun domain.
Nyiptakeun file anyar anu disebut "service-worker.js”Dina akar situs anjeun sareng nambihan kode di handap.
var CACHE_NAME = 'cache-v1';
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 = ['cache-v1'];
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});