الآن أحاول جعل تطبيقي PWA أو (Progressive Web Application)
الأمر في الفريموورك يختلف قليلا،،
ما فعلته حتى الآن هو:
إنشاء ملف `manifest.json` وربطه بصفحة `index.html`
{
"name": "vue-shop",
"short_name": "vue-shop",
"icons": [
{
"src": "./img/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./img/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#000000",
"theme_color": "#4DBA87"
}
=> إضافة خاصية vue add @vue/pwa
الـplugin عمل ملف `registerServiceWorker.js`
/* eslint-disable no-console */
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
console.log(
'App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB'
)
},
registered () {
console.log('Service worker has been registered.')
},
cached () {
console.log('Content has been cached for offline use.')
},
updatefound () {
console.log('New content is downloading.')
},
updated () {
console.log('New content is available; please refresh.')
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
}
النتيجة الحالية في كروم:
manifest
service workers
ما هي الخطوات التالية ومتى سيظهر تنويه تثبيت التطبيق على الموبايل؟
أيضا أحاول البحث عن طريقة عمل caching بشكل سليم